Animation add keyFrame

doric-android/app/build.gradle

@@ -44,5 +44,5 @@ dependencies {
     annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'
     implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
 
-    debugImplementation 'com.squareup.leakcanary:leakcanary-android:2.4'
+    debugImplementation 'com.squareup.leakcanary:leakcanary-android:2.7'
 }

doric-android/doric/src/main/java/pub/doric/shader/ViewNode.java

@@ -19,7 +19,9 @@ import android.animation.Animator;
 import android.animation.AnimatorListenerAdapter;
 import android.animation.AnimatorSet;
 import android.animation.ArgbEvaluator;
+import android.animation.Keyframe;
 import android.animation.ObjectAnimator;
+import android.animation.PropertyValuesHolder;
 import android.content.Context;
 import android.graphics.Color;
 import android.graphics.LinearGradient;
@@ -1054,28 +1056,49 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
 
     private ObjectAnimator parseChangeable(JSObject jsObject, JSValue fillMode) {
         String key = jsObject.getProperty("key").asString().value();
-        if ("backgroundColor".equals(key)) {
+        boolean castInt = "backgroundColor".equals(key);
-            int startVal = jsObject.getProperty("fromValue").asNumber().toInt();
+        ObjectAnimator animator;
-            int endVal = jsObject.getProperty("toValue").asNumber().toInt();
+        float startVal = 0;
-            ObjectAnimator animator = ObjectAnimator.ofInt(this,
+        if (jsObject.getProperty("keyFrames").isArray()) {
-                    key,
+            JSArray keyFrames = jsObject.getProperty("keyFrames").asArray();
-                    startVal,
+            Keyframe[] keyFrameArray = new Keyframe[keyFrames.size()];
-                    endVal
+            for (int i = 0; i < keyFrames.size(); i++) {
-            );
+                JSObject keyFrame = keyFrames.get(i).asObject();
-            animator.setEvaluator(new ArgbEvaluator());
+                float percent = keyFrame.getProperty("percent").asNumber().toFloat();
-            setFillMode(animator, key, startVal, fillMode);
+                float value = keyFrame.getProperty("value").asNumber().toFloat();
-            return animator;
+                if (i == 0) {
+                    startVal = value;
+                }
+                if (castInt) {
+                    keyFrameArray[i] = Keyframe.ofInt(percent, (int) value);
+                } else {
+                    keyFrameArray[i] = Keyframe.ofFloat(percent, value);
+                }
+            }
+            PropertyValuesHolder frameHolder = PropertyValuesHolder.ofKeyframe(key, keyFrameArray);
+            animator = ObjectAnimator.ofPropertyValuesHolder(this, frameHolder);
         } else {
-            float startVal = jsObject.getProperty("fromValue").asNumber().toFloat();
+            startVal = jsObject.getProperty("fromValue").asNumber().toFloat();
             float endVal = jsObject.getProperty("toValue").asNumber().toFloat();
-            ObjectAnimator animator = ObjectAnimator.ofFloat(this,
+            if (castInt) {
-                    key,
+                animator = ObjectAnimator.ofInt(this,
-                    startVal,
+                        key,
-                    endVal
+                        (int) startVal,
-            );
+                        (int) endVal
-            setFillMode(animator, key, startVal, fillMode);
+                );
-            return animator;
+            } else {
+                animator = ObjectAnimator.ofFloat(this,
+                        key,
+                        startVal,
+                        endVal
+                );
+            }
         }
+        if (castInt) {
+            animator.setEvaluator(new ArgbEvaluator());
+        }
+        setFillMode(animator, key, startVal, fillMode);
+        return animator;
     }
 
     private void setFillMode(ObjectAnimator animator,

doric-iOS/Pod/Classes/Shader/DoricViewNode.m

@@ -660,10 +660,10 @@ - (CAAnimation *)parseAnimation:(id)params {
     } else if ([params isKindOfClass:[NSDictionary class]]) {
         NSArray<NSDictionary *> *changeables = params[@"changeables"];
         CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
-        NSMutableArray <CABasicAnimation *> *animations = [NSMutableArray new];
+        NSMutableArray <CAAnimation *> *animations = [NSMutableArray new];
 
         [changeables forEach:^(NSDictionary *obj) {
-            CABasicAnimation *animation = [self parseChangeable:obj fillMode:params[@"fillMode"]];
+            CAAnimation *animation = [self parseChangeable:obj fillMode:params[@"fillMode"]];
             if (params[@"timingFunction"]) {
                 animation.timingFunction = [self translateToTimingFunction:params[@"timingFunction"]];
             }
@@ -672,7 +672,7 @@ - (CAAnimation *)parseAnimation:(id)params {
         animationGroup.animations = animations;
         animationGroup.delegate = [[AnimationCallback new] also:^(AnimationCallback *it) {
             it.startBlock = ^(AnimationCallback *callback) {
-                [[animations map:^id(CABasicAnimation *obj) {
+                [[animations map:^id(CAAnimation *obj) {
                     return obj.delegate;
                 }] forEach:^(AnimationCallback *obj) {
                     if (obj.startBlock) {
@@ -681,7 +681,7 @@ - (CAAnimation *)parseAnimation:(id)params {
                 }];
             };
             it.endBlock = ^(AnimationCallback *callback) {
-                [[animations map:^id(CABasicAnimation *obj) {
+                [[animations map:^id(CAAnimation *obj) {
                     return obj.delegate;
                 }] forEach:^(AnimationCallback *obj) {
                     if (obj.endBlock) {
@@ -816,52 +816,101 @@ - (void)setAnimatedValue:(NSString *)key value:(NSNumber *)value {
     }
 }
 
-- (CABasicAnimation *)parseChangeable:(NSDictionary *)params fillMode:(NSNumber *)fillMode {
+- (CAAnimation *)parseChangeable:(NSDictionary *)params fillMode:(NSNumber *)fillMode {
     NSString *key = params[@"key"];
-    CABasicAnimation *animation = [CABasicAnimation animation];
+    NSArray *keyFrames = params[@"keyFrames"];
-    if ([@"translationX" isEqualToString:key]) {
+    if (keyFrames && keyFrames.count > 0) {
-        animation.keyPath = @"transform.translation.x";
+        CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
-        animation.fromValue = params[@"fromValue"];
+        NSMutableArray *values = [NSMutableArray new];
-        animation.toValue = params[@"toValue"];
+        NSMutableArray *times = [NSMutableArray new];
-    } else if ([@"translationY" isEqualToString:key]) {
+
-        animation.keyPath = @"transform.translation.y";
+        for (NSDictionary *keyFrame in keyFrames) {
-        animation.fromValue = params[@"fromValue"];
+            if ([@"rotation" isEqualToString:key]
-        animation.toValue = params[@"toValue"];
+                    || [@"rotationX" isEqualToString:key]
-    } else if ([@"scaleX" isEqualToString:key]) {
+                    || [@"rotationY" isEqualToString:key]) {
-        animation.keyPath = @"transform.scale.x";
+                [values addObject:@([keyFrame[@"value"] floatValue] * M_PI)];
-        animation.fromValue = params[@"fromValue"];
+            } else if ([@"backgroundColor" isEqualToString:key]) {
-        animation.toValue = params[@"toValue"];
+                [values addObject:(id) DoricColor(keyFrame[@"value"]).CGColor];
-    } else if ([@"scaleY" isEqualToString:key]) {
+            } else {
-        animation.keyPath = @"transform.scale.y";
+                [values addObject:keyFrame[@"value"]];
-        animation.fromValue = params[@"fromValue"];
+            }
-        animation.toValue = params[@"toValue"];
+            [times addObject:keyFrame[@"percent"]];
-    } else if ([@"rotation" isEqualToString:key]) {
+        }
-        animation.keyPath = @"transform.rotation.z";
+        animation.keyTimes = times;
-        animation.fromValue = @([params[@"fromValue"] floatValue] * M_PI);
+        animation.values = values;
-        animation.toValue = @([params[@"toValue"] floatValue] * M_PI);
+        if ([@"translationX" isEqualToString:key]) {
-    } else if ([@"rotationX" isEqualToString:key]) {
+            animation.keyPath = @"transform.translation.x";
-        animation.keyPath = @"transform.rotation.x";
+        } else if ([@"translationY" isEqualToString:key]) {
-        animation.fromValue = @([params[@"fromValue"] floatValue] * M_PI);
+            animation.keyPath = @"transform.translation.y";
-        animation.toValue = @([params[@"toValue"] floatValue] * M_PI);
+        } else if ([@"scaleX" isEqualToString:key]) {
-    } else if ([@"rotationY" isEqualToString:key]) {
+            animation.keyPath = @"transform.scale.x";
-        animation.keyPath = @"transform.rotation.y";
+        } else if ([@"scaleY" isEqualToString:key]) {
-        animation.fromValue = @([params[@"fromValue"] floatValue] * M_PI);
+            animation.keyPath = @"transform.scale.y";
-        animation.toValue = @([params[@"toValue"] floatValue] * M_PI);
+        } else if ([@"rotation" isEqualToString:key]) {
-    } else if ([@"backgroundColor" isEqualToString:key]) {
+            animation.keyPath = @"transform.rotation.z";
-        animation.keyPath = @"backgroundColor";
+        } else if ([@"rotationX" isEqualToString:key]) {
-        animation.fromValue = (id)DoricColor(params[@"fromValue"]).CGColor;
+            animation.keyPath = @"transform.rotation.x";
-        animation.toValue = (id)DoricColor(params[@"toValue"]).CGColor;
+        } else if ([@"rotationY" isEqualToString:key]) {
-    } else if ([@"alpha" isEqualToString:key]) {
+            animation.keyPath = @"transform.rotation.y";
-        animation.keyPath = @"opacity";
+        } else if ([@"backgroundColor" isEqualToString:key]) {
-        animation.fromValue = params[@"fromValue"];
+            animation.keyPath = @"backgroundColor";
-        animation.toValue = params[@"toValue"];
+        } else if ([@"alpha" isEqualToString:key]) {
+            animation.keyPath = @"opacity";
+        }
+
+        [self setFillMode:animation
+                      key:key
+               startValue:params[@"fromValue"]
+                 endValue:params[@"toValue"]
+                 fillMode:fillMode];
+        return animation;
+    } else {
+        CABasicAnimation *animation = [CABasicAnimation animation];
+        if ([@"translationX" isEqualToString:key]) {
+            animation.keyPath = @"transform.translation.x";
+            animation.fromValue = params[@"fromValue"];
+            animation.toValue = params[@"toValue"];
+        } else if ([@"translationY" isEqualToString:key]) {
+            animation.keyPath = @"transform.translation.y";
+            animation.fromValue = params[@"fromValue"];
+            animation.toValue = params[@"toValue"];
+        } else if ([@"scaleX" isEqualToString:key]) {
+            animation.keyPath = @"transform.scale.x";
+            animation.fromValue = params[@"fromValue"];
+            animation.toValue = params[@"toValue"];
+        } else if ([@"scaleY" isEqualToString:key]) {
+            animation.keyPath = @"transform.scale.y";
+            animation.fromValue = params[@"fromValue"];
+            animation.toValue = params[@"toValue"];
+        } else if ([@"rotation" isEqualToString:key]) {
+            animation.keyPath = @"transform.rotation.z";
+            animation.fromValue = @([params[@"fromValue"] floatValue] * M_PI);
+            animation.toValue = @([params[@"toValue"] floatValue] * M_PI);
+        } else if ([@"rotationX" isEqualToString:key]) {
+            animation.keyPath = @"transform.rotation.x";
+            animation.fromValue = @([params[@"fromValue"] floatValue] * M_PI);
+            animation.toValue = @([params[@"toValue"] floatValue] * M_PI);
+        } else if ([@"rotationY" isEqualToString:key]) {
+            animation.keyPath = @"transform.rotation.y";
+            animation.fromValue = @([params[@"fromValue"] floatValue] * M_PI);
+            animation.toValue = @([params[@"toValue"] floatValue] * M_PI);
+        } else if ([@"backgroundColor" isEqualToString:key]) {
+            animation.keyPath = @"backgroundColor";
+            animation.fromValue = (id) DoricColor(params[@"fromValue"]).CGColor;
+            animation.toValue = (id) DoricColor(params[@"toValue"]).CGColor;
+        } else if ([@"alpha" isEqualToString:key]) {
+            animation.keyPath = @"opacity";
+            animation.fromValue = params[@"fromValue"];
+            animation.toValue = params[@"toValue"];
+        }
+        [self setFillMode:animation
+                      key:key
+               startValue:params[@"fromValue"]
+                 endValue:params[@"toValue"]
+                 fillMode:fillMode];
+        return animation;
     }
-    [self setFillMode:animation
+
-                  key:key
-           startValue:params[@"fromValue"]
-             endValue:params[@"toValue"]
-             fillMode:fillMode];
-    return animation;
 }
 
 - (CAMediaTimingFunction *)translateToTimingFunction:(NSNumber *)timingFunction {

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() {

doric-js/index.d.ts

@@ -354,6 +354,10 @@ declare module 'doric/lib/src/ui/animation' {
             key: AnimatedKey;
             repeatCount?: number;
             repeatMode?: RepeatMode;
+            keyFrames?: {
+                    percent: number;
+                    value: number;
+            }[];
     }
     export enum FillMode {
             /**
@@ -412,6 +416,10 @@ declare module 'doric/lib/src/ui/animation' {
                             key: AnimatedKey;
                             fromValue: number;
                             toValue: number;
+                            keyFrames: {
+                                    percent: number;
+                                    value: number;
+                            }[] | undefined;
                     }[];
                     repeatCount: number | undefined;
                     repeatMode: RepeatMode | undefined;
@@ -422,6 +430,14 @@ declare module 'doric/lib/src/ui/animation' {
     }
     export class ScaleAnimation extends Animation {
             constructor();
+            set xKeyFrames(keyFrames: {
+                    percent: number;
+                    value: number;
+            }[]);
+            set yKeyFrames(keyFrames: {
+                    percent: number;
+                    value: number;
+            }[]);
             set fromScaleX(v: number);
             get fromScaleX(): number;
             set toScaleX(v: number);
@@ -433,6 +449,14 @@ declare module 'doric/lib/src/ui/animation' {
     }
     export class TranslationAnimation extends Animation {
             constructor();
+            set xKeyFrames(keyFrames: {
+                    percent: number;
+                    value: number;
+            }[]);
+            set yKeyFrames(keyFrames: {
+                    percent: number;
+                    value: number;
+            }[]);
             set fromTranslationX(v: number);
             get fromTranslationX(): number;
             set toTranslationX(v: number);
@@ -451,6 +475,10 @@ declare module 'doric/lib/src/ui/animation' {
             get fromRotation(): number;
             set toRotation(v: number);
             get toRotation(): number;
+            set keyFrames(keyFrames: {
+                    percent: number;
+                    value: number;
+            }[]);
     }
     /**
         * Rotation range is [0..2]
@@ -461,6 +489,10 @@ declare module 'doric/lib/src/ui/animation' {
             get fromRotation(): number;
             set toRotation(v: number);
             get toRotation(): number;
+            set keyFrames(keyFrames: {
+                    percent: number;
+                    value: number;
+            }[]);
     }
     /**
         * Rotation range is [0..2]
@@ -471,6 +503,10 @@ declare module 'doric/lib/src/ui/animation' {
             get fromRotation(): number;
             set toRotation(v: number);
             get toRotation(): number;
+            set keyFrames(keyFrames: {
+                    percent: number;
+                    value: number;
+            }[]);
     }
     export class BackgroundColorAnimation extends Animation {
             constructor();
@@ -478,6 +514,10 @@ declare module 'doric/lib/src/ui/animation' {
             get fromColor(): Color;
             set toColor(v: Color);
             get toColor(): Color;
+            set keyFrames(keyFrames: {
+                    percent: number;
+                    value: Color;
+            }[]);
     }
     /**
         * Alpha range is [0..1]
@@ -488,6 +528,10 @@ declare module 'doric/lib/src/ui/animation' {
             get from(): number;
             set to(v: number);
             get to(): number;
+            set keyFrames(keyFrames: {
+                    percent: number;
+                    value: number;
+            }[]);
     }
     export class AnimationSet implements IAnimation {
             delay?: number;

doric-js/lib/src/ui/animation.d.ts

@@ -16,6 +16,10 @@ export interface Changeable {
     key: AnimatedKey;
     repeatCount?: number;
     repeatMode?: RepeatMode;
+    keyFrames?: {
+        percent: number;
+        value: number;
+    }[];
 }
 export declare enum FillMode {
     /**
@@ -74,6 +78,10 @@ declare abstract class Animation implements IAnimation {
             key: AnimatedKey;
             fromValue: number;
             toValue: number;
+            keyFrames: {
+                percent: number;
+                value: number;
+            }[] | undefined;
         }[];
         repeatCount: number | undefined;
         repeatMode: RepeatMode | undefined;
@@ -86,6 +94,14 @@ export declare class ScaleAnimation extends Animation {
     private scaleXChangeable;
     private scaleYChangeable;
     constructor();
+    set xKeyFrames(keyFrames: {
+        percent: number;
+        value: number;
+    }[]);
+    set yKeyFrames(keyFrames: {
+        percent: number;
+        value: number;
+    }[]);
     set fromScaleX(v: number);
     get fromScaleX(): number;
     set toScaleX(v: number);
@@ -99,6 +115,14 @@ export declare class TranslationAnimation extends Animation {
     private translationXChangeable;
     private translationYChangeable;
     constructor();
+    set xKeyFrames(keyFrames: {
+        percent: number;
+        value: number;
+    }[]);
+    set yKeyFrames(keyFrames: {
+        percent: number;
+        value: number;
+    }[]);
     set fromTranslationX(v: number);
     get fromTranslationX(): number;
     set toTranslationX(v: number);
@@ -118,6 +142,10 @@ export declare class RotationAnimation extends Animation {
     get fromRotation(): number;
     set toRotation(v: number);
     get toRotation(): number;
+    set keyFrames(keyFrames: {
+        percent: number;
+        value: number;
+    }[]);
 }
 /**
  * Rotation range is [0..2]
@@ -129,6 +157,10 @@ export declare class RotationXAnimation extends Animation {
     get fromRotation(): number;
     set toRotation(v: number);
     get toRotation(): number;
+    set keyFrames(keyFrames: {
+        percent: number;
+        value: number;
+    }[]);
 }
 /**
  * Rotation range is [0..2]
@@ -140,6 +172,10 @@ export declare class RotationYAnimation extends Animation {
     get fromRotation(): number;
     set toRotation(v: number);
     get toRotation(): number;
+    set keyFrames(keyFrames: {
+        percent: number;
+        value: number;
+    }[]);
 }
 export declare class BackgroundColorAnimation extends Animation {
     private backgroundColorChangeable;
@@ -148,6 +184,10 @@ export declare class BackgroundColorAnimation extends Animation {
     get fromColor(): Color;
     set toColor(v: Color);
     get toColor(): Color;
+    set keyFrames(keyFrames: {
+        percent: number;
+        value: Color;
+    }[]);
 }
 /**
  * Alpha range is [0..1]
@@ -159,6 +199,10 @@ export declare class AlphaAnimation extends Animation {
     get from(): number;
     set to(v: number);
     get to(): number;
+    set keyFrames(keyFrames: {
+        percent: number;
+        value: number;
+    }[]);
 }
 export declare class AnimationSet implements IAnimation {
     private animations;

doric-js/lib/src/ui/animation.js

@@ -76,6 +76,7 @@ class Animation {
                 key: e.key,
                 fromValue: e.fromValue,
                 toValue: e.toValue,
+                keyFrames: e.keyFrames,
             });
         }
         return {
@@ -107,6 +108,12 @@ export 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;
     }
@@ -148,6 +155,12 @@ export 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;
     }
@@ -198,6 +211,9 @@ export class RotationAnimation extends Animation {
     get toRotation() {
         return this.rotationChaneable.toValue;
     }
+    set keyFrames(keyFrames) {
+        this.rotationChaneable.keyFrames = keyFrames;
+    }
 }
 /**
  * Rotation range is [0..2]
@@ -224,6 +240,9 @@ export class RotationXAnimation extends Animation {
     get toRotation() {
         return this.rotationChaneable.toValue;
     }
+    set keyFrames(keyFrames) {
+        this.rotationChaneable.keyFrames = keyFrames;
+    }
 }
 /**
  * Rotation range is [0..2]
@@ -250,6 +269,9 @@ export class RotationYAnimation extends Animation {
     get toRotation() {
         return this.rotationChaneable.toValue;
     }
+    set keyFrames(keyFrames) {
+        this.rotationChaneable.keyFrames = keyFrames;
+    }
 }
 export class BackgroundColorAnimation extends Animation {
     constructor() {
@@ -273,6 +295,9 @@ export 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]
@@ -299,6 +324,9 @@ export class AlphaAnimation extends Animation {
     get to() {
         return this.opacityChangeable.toValue;
     }
+    set keyFrames(keyFrames) {
+        this.opacityChangeable.keyFrames = keyFrames;
+    }
 }
 export class AnimationSet {
     constructor() {

doric-js/src/ui/animation.ts

@@ -37,6 +37,10 @@ export interface Changeable {
     key: AnimatedKey
     repeatCount?: number
     repeatMode?: RepeatMode
+    keyFrames?: {
+        percent: number,
+        value: number
+    }[]
 }
 export enum FillMode {
     /**
@@ -96,6 +100,7 @@ abstract class Animation implements IAnimation {
                 key: e.key,
                 fromValue: e.fromValue,
                 toValue: e.toValue,
+                keyFrames: e.keyFrames,
             })
         }
         return {
@@ -129,6 +134,12 @@ export class ScaleAnimation extends Animation {
         this.changeables.set("scaleY", this.scaleYChangeable)
     }
 
+    set xKeyFrames(keyFrames: { percent: number, value: number }[]) {
+        this.scaleXChangeable.keyFrames = keyFrames
+    }
+    set yKeyFrames(keyFrames: { percent: number, value: number }[]) {
+        this.scaleYChangeable.keyFrames = keyFrames
+    }
 
     set fromScaleX(v: number) {
         this.scaleXChangeable.fromValue = v
@@ -179,6 +190,14 @@ export class TranslationAnimation extends Animation {
         this.changeables.set("translationY", this.translationYChangeable)
     }
 
+    set xKeyFrames(keyFrames: { percent: number, value: number }[]) {
+        this.translationXChangeable.keyFrames = keyFrames
+    }
+
+    set yKeyFrames(keyFrames: { percent: number, value: number }[]) {
+        this.translationYChangeable.keyFrames = keyFrames
+    }
+
     set fromTranslationX(v: number) {
         this.translationXChangeable.fromValue = v
     }
@@ -239,6 +258,10 @@ export class RotationAnimation extends Animation {
     get toRotation() {
         return this.rotationChaneable.toValue
     }
+
+    set keyFrames(keyFrames: { percent: number, value: number }[]) {
+        this.rotationChaneable.keyFrames = keyFrames
+    }
 }
 /**
  * Rotation range is [0..2]
@@ -269,6 +292,10 @@ export class RotationXAnimation extends Animation {
     get toRotation() {
         return this.rotationChaneable.toValue
     }
+
+    set keyFrames(keyFrames: { percent: number, value: number }[]) {
+        this.rotationChaneable.keyFrames = keyFrames
+    }
 }
 /**
  * Rotation range is [0..2]
@@ -299,6 +326,10 @@ export class RotationYAnimation extends Animation {
     get toRotation() {
         return this.rotationChaneable.toValue
     }
+
+    set keyFrames(keyFrames: { percent: number, value: number }[]) {
+        this.rotationChaneable.keyFrames = keyFrames
+    }
 }
 
 export class BackgroundColorAnimation extends Animation {
@@ -328,6 +359,10 @@ export class BackgroundColorAnimation extends Animation {
     get toColor() {
         return new Color(this.backgroundColorChangeable.toValue)
     }
+
+    set keyFrames(keyFrames: { percent: number, value: Color }[]) {
+        this.backgroundColorChangeable.keyFrames = keyFrames.map(e => { return { percent: e.percent, value: e.value.toModel() } })
+    }
 }
 
 /**
@@ -360,6 +395,9 @@ export class AlphaAnimation extends Animation {
     get to() {
         return this.opacityChangeable.toValue
     }
+    set keyFrames(keyFrames: { percent: number, value: number }[]) {
+        this.opacityChangeable.keyFrames = keyFrames
+    }
 }
 
 

doric-web/dist/index.js

@@ -2855,6 +2855,7 @@ class Animation {
                 key: e.key,
                 fromValue: e.fromValue,
                 toValue: e.toValue,
+                keyFrames: e.keyFrames,
             });
         }
         return {
@@ -2886,6 +2887,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;
     }
@@ -2927,6 +2934,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;
     }
@@ -2977,6 +2990,9 @@ class RotationAnimation extends Animation {
     get toRotation() {
         return this.rotationChaneable.toValue;
     }
+    set keyFrames(keyFrames) {
+        this.rotationChaneable.keyFrames = keyFrames;
+    }
 }
 /**
  * Rotation range is [0..2]
@@ -3003,6 +3019,9 @@ class RotationXAnimation extends Animation {
     get toRotation() {
         return this.rotationChaneable.toValue;
     }
+    set keyFrames(keyFrames) {
+        this.rotationChaneable.keyFrames = keyFrames;
+    }
 }
 /**
  * Rotation range is [0..2]
@@ -3029,6 +3048,9 @@ class RotationYAnimation extends Animation {
     get toRotation() {
         return this.rotationChaneable.toValue;
     }
+    set keyFrames(keyFrames) {
+        this.rotationChaneable.keyFrames = keyFrames;
+    }
 }
 class BackgroundColorAnimation extends Animation {
     constructor() {
@@ -3052,6 +3074,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]
@@ -3078,6 +3103,9 @@ class AlphaAnimation extends Animation {
     get to() {
         return this.opacityChangeable.toValue;
     }
+    set keyFrames(keyFrames) {
+        this.opacityChangeable.keyFrames = keyFrames;
+    }
 }
 class AnimationSet {
     constructor() {