Animation add keyFrame

doric-js/bundle/doric-lib.es5.js

@@ -1668,6 +1668,7 @@ var Animation = /** @class */ (function () {
                     key: e.key,
                     fromValue: e.fromValue,
                     toValue: e.toValue,
+                    keyFrames: e.keyFrames,
                 });
             }
         }
@@ -1710,6 +1711,20 @@ var ScaleAnimation = /** @class */ (function (_super) {
         _this.changeables.set("scaleY", _this.scaleYChangeable);
         return _this;
     }
+    Object.defineProperty(ScaleAnimation.prototype, "xKeyFrames", {
+        set: function (keyFrames) {
+            this.scaleXChangeable.keyFrames = keyFrames;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScaleAnimation.prototype, "yKeyFrames", {
+        set: function (keyFrames) {
+            this.scaleYChangeable.keyFrames = keyFrames;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(ScaleAnimation.prototype, "fromScaleX", {
         get: function () {
             return this.scaleXChangeable.fromValue;
@@ -1770,6 +1785,20 @@ var TranslationAnimation = /** @class */ (function (_super) {
         _this.changeables.set("translationY", _this.translationYChangeable);
         return _this;
     }
+    Object.defineProperty(TranslationAnimation.prototype, "xKeyFrames", {
+        set: function (keyFrames) {
+            this.translationXChangeable.keyFrames = keyFrames;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TranslationAnimation.prototype, "yKeyFrames", {
+        set: function (keyFrames) {
+            this.translationYChangeable.keyFrames = keyFrames;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(TranslationAnimation.prototype, "fromTranslationX", {
         get: function () {
             return this.translationXChangeable.fromValue;
@@ -1847,6 +1876,13 @@ var RotationAnimation = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(RotationAnimation.prototype, "keyFrames", {
+        set: function (keyFrames) {
+            this.rotationChaneable.keyFrames = keyFrames;
+        },
+        enumerable: false,
+        configurable: true
+    });
     return RotationAnimation;
 }(Animation));
 /**
@@ -1884,6 +1920,13 @@ var RotationXAnimation = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(RotationXAnimation.prototype, "keyFrames", {
+        set: function (keyFrames) {
+            this.rotationChaneable.keyFrames = keyFrames;
+        },
+        enumerable: false,
+        configurable: true
+    });
     return RotationXAnimation;
 }(Animation));
 /**
@@ -1921,6 +1964,13 @@ var RotationYAnimation = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(RotationYAnimation.prototype, "keyFrames", {
+        set: function (keyFrames) {
+            this.rotationChaneable.keyFrames = keyFrames;
+        },
+        enumerable: false,
+        configurable: true
+    });
     return RotationYAnimation;
 }(Animation));
 var BackgroundColorAnimation = /** @class */ (function (_super) {
@@ -1955,6 +2005,13 @@ var BackgroundColorAnimation = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(BackgroundColorAnimation.prototype, "keyFrames", {
+        set: function (keyFrames) {
+            this.backgroundColorChangeable.keyFrames = keyFrames.map(function (e) { return { percent: e.percent, value: e.value.toModel() }; });
+        },
+        enumerable: false,
+        configurable: true
+    });
     return BackgroundColorAnimation;
 }(Animation));
 /**
@@ -1992,6 +2049,13 @@ var AlphaAnimation = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(AlphaAnimation.prototype, "keyFrames", {
+        set: function (keyFrames) {
+            this.opacityChangeable.keyFrames = keyFrames;
+        },
+        enumerable: false,
+        configurable: true
+    });
     return AlphaAnimation;
 }(Animation));
 var AnimationSet = /** @class */ (function () {

doric-js/bundle/doric-lib.js

@@ -1277,6 +1277,7 @@ class Animation {
                 key: e.key,
                 fromValue: e.fromValue,
                 toValue: e.toValue,
+                keyFrames: e.keyFrames,
             });
         }
         return {
@@ -1308,6 +1309,12 @@ class ScaleAnimation extends Animation {
         this.changeables.set("scaleX", this.scaleXChangeable);
         this.changeables.set("scaleY", this.scaleYChangeable);
     }
+    set xKeyFrames(keyFrames) {
+        this.scaleXChangeable.keyFrames = keyFrames;
+    }
+    set yKeyFrames(keyFrames) {
+        this.scaleYChangeable.keyFrames = keyFrames;
+    }
     set fromScaleX(v) {
         this.scaleXChangeable.fromValue = v;
     }
@@ -1349,6 +1356,12 @@ class TranslationAnimation extends Animation {
         this.changeables.set("translationX", this.translationXChangeable);
         this.changeables.set("translationY", this.translationYChangeable);
     }
+    set xKeyFrames(keyFrames) {
+        this.translationXChangeable.keyFrames = keyFrames;
+    }
+    set yKeyFrames(keyFrames) {
+        this.translationYChangeable.keyFrames = keyFrames;
+    }
     set fromTranslationX(v) {
         this.translationXChangeable.fromValue = v;
     }
@@ -1399,6 +1412,9 @@ class RotationAnimation extends Animation {
     get toRotation() {
         return this.rotationChaneable.toValue;
     }
+    set keyFrames(keyFrames) {
+        this.rotationChaneable.keyFrames = keyFrames;
+    }
 }
 /**
  * Rotation range is [0..2]
@@ -1425,6 +1441,9 @@ class RotationXAnimation extends Animation {
     get toRotation() {
         return this.rotationChaneable.toValue;
     }
+    set keyFrames(keyFrames) {
+        this.rotationChaneable.keyFrames = keyFrames;
+    }
 }
 /**
  * Rotation range is [0..2]
@@ -1451,6 +1470,9 @@ class RotationYAnimation extends Animation {
     get toRotation() {
         return this.rotationChaneable.toValue;
     }
+    set keyFrames(keyFrames) {
+        this.rotationChaneable.keyFrames = keyFrames;
+    }
 }
 class BackgroundColorAnimation extends Animation {
     constructor() {
@@ -1474,6 +1496,9 @@ class BackgroundColorAnimation extends Animation {
     get toColor() {
         return new Color(this.backgroundColorChangeable.toValue);
     }
+    set keyFrames(keyFrames) {
+        this.backgroundColorChangeable.keyFrames = keyFrames.map(e => { return { percent: e.percent, value: e.value.toModel() }; });
+    }
 }
 /**
  * Alpha range is [0..1]
@@ -1500,6 +1525,9 @@ class AlphaAnimation extends Animation {
     get to() {
         return this.opacityChangeable.toValue;
     }
+    set keyFrames(keyFrames) {
+        this.opacityChangeable.keyFrames = keyFrames;
+    }
 }
 class AnimationSet {
     constructor() {

doric-js/bundle/doric-vm.js

@@ -2801,6 +2801,7 @@ class Animation {
                 key: e.key,
                 fromValue: e.fromValue,
                 toValue: e.toValue,
+                keyFrames: e.keyFrames,
             });
         }
         return {
@@ -2832,6 +2833,12 @@ class ScaleAnimation extends Animation {
         this.changeables.set("scaleX", this.scaleXChangeable);
         this.changeables.set("scaleY", this.scaleYChangeable);
     }
+    set xKeyFrames(keyFrames) {
+        this.scaleXChangeable.keyFrames = keyFrames;
+    }
+    set yKeyFrames(keyFrames) {
+        this.scaleYChangeable.keyFrames = keyFrames;
+    }
     set fromScaleX(v) {
         this.scaleXChangeable.fromValue = v;
     }
@@ -2873,6 +2880,12 @@ class TranslationAnimation extends Animation {
         this.changeables.set("translationX", this.translationXChangeable);
         this.changeables.set("translationY", this.translationYChangeable);
     }
+    set xKeyFrames(keyFrames) {
+        this.translationXChangeable.keyFrames = keyFrames;
+    }
+    set yKeyFrames(keyFrames) {
+        this.translationYChangeable.keyFrames = keyFrames;
+    }
     set fromTranslationX(v) {
         this.translationXChangeable.fromValue = v;
     }
@@ -2923,6 +2936,9 @@ class RotationAnimation extends Animation {
     get toRotation() {
         return this.rotationChaneable.toValue;
     }
+    set keyFrames(keyFrames) {
+        this.rotationChaneable.keyFrames = keyFrames;
+    }
 }
 /**
  * Rotation range is [0..2]
@@ -2949,6 +2965,9 @@ class RotationXAnimation extends Animation {
     get toRotation() {
         return this.rotationChaneable.toValue;
     }
+    set keyFrames(keyFrames) {
+        this.rotationChaneable.keyFrames = keyFrames;
+    }
 }
 /**
  * Rotation range is [0..2]
@@ -2975,6 +2994,9 @@ class RotationYAnimation extends Animation {
     get toRotation() {
         return this.rotationChaneable.toValue;
     }
+    set keyFrames(keyFrames) {
+        this.rotationChaneable.keyFrames = keyFrames;
+    }
 }
 class BackgroundColorAnimation extends Animation {
     constructor() {
@@ -2998,6 +3020,9 @@ class BackgroundColorAnimation extends Animation {
     get toColor() {
         return new Color(this.backgroundColorChangeable.toValue);
     }
+    set keyFrames(keyFrames) {
+        this.backgroundColorChangeable.keyFrames = keyFrames.map(e => { return { percent: e.percent, value: e.value.toModel() }; });
+    }
 }
 /**
  * Alpha range is [0..1]
@@ -3024,6 +3049,9 @@ class AlphaAnimation extends Animation {
     get to() {
         return this.opacityChangeable.toValue;
     }
+    set keyFrames(keyFrames) {
+        this.opacityChangeable.keyFrames = keyFrames;
+    }
 }
 class AnimationSet {
     constructor() {