Animation add keyFrame

2021-09-07 20:10:44 +08:00
parent d7d19b17d0
commit 41e610e424
12 changed files with 443 additions and 69 deletions
--- a/doric-js/bundle/doric-lib.es5.js
+++ b/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 () {
--- a/doric-js/bundle/doric-lib.js
+++ b/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() {
--- a/doric-js/bundle/doric-vm.js
+++ b/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() {
--- a/doric-js/index.d.ts
+++ b/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;
--- a/doric-js/lib/src/ui/animation.d.ts
+++ b/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;
--- a/doric-js/lib/src/ui/animation.js
+++ b/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() {
--- a/doric-js/src/ui/animation.ts
+++ b/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
+    }
 }