Animation add keyFrame

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