Add BackgroundColorAnimation and AlphaAnimation

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

@@ -1054,6 +1054,18 @@ 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)) {
+            int startVal = jsObject.getProperty("fromValue").asNumber().toInt();
+            int endVal = jsObject.getProperty("toValue").asNumber().toInt();
+            ObjectAnimator animator = ObjectAnimator.ofInt(this,
+                    key,
+                    startVal,
+                    endVal
+            );
+            animator.setEvaluator(new ArgbEvaluator());
+            setFillMode(animator, key, startVal, fillMode);
+            return animator;
+        } else {
             float startVal = jsObject.getProperty("fromValue").asNumber().toFloat();
             float endVal = jsObject.getProperty("toValue").asNumber().toFloat();
             ObjectAnimator animator = ObjectAnimator.ofFloat(this,
@@ -1064,6 +1076,7 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
             setFillMode(animator, key, startVal, fillMode);
             return animator;
         }
+    }
 
     private void setFillMode(ObjectAnimator animator,
                              final String key,
@@ -1113,6 +1126,12 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
             case "rotation":
                 setRotation(value);
                 break;
+            case "backgroundColor":
+                setBackgroundColor((int) value);
+                break;
+            case "alpha":
+                setAlpha(value);
+                break;
             default:
                 break;
         }

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

@@ -768,6 +768,29 @@ - (NSNumber *)getAnimatedValue:(NSString *)key {
     if ([@"rotationY" isEqualToString:key]) {
         return self.rotationY;
     }
+    if ([@"backgroundColor" isEqualToString:key]) {
+        CGColorRef cgColor = self.view.backgroundColor.CGColor;
+        if (CGColorGetNumberOfComponents(cgColor) < 4) {
+            const CGFloat *components = CGColorGetComponents(cgColor);
+            CGFloat r = components[0];
+            CGFloat g = components[1];
+            CGFloat b = components[2];
+            return @((int) (b * 255) + (((int) (g * 255)) << 8) + (((int) (r * 255)) << 16) + (0xff
+                    << 24));
+        }
+
+        const CGFloat *components = CGColorGetComponents(cgColor);
+        CGFloat r = components[0];
+        CGFloat g = components[1];
+        CGFloat b = components[2];
+        CGFloat a = components[3];
+        return @((int) (b * 255) + (((int) (g * 255)) << 8) + (((int) (r * 255)) << 16) + (
+                ((int) (a * 255))
+                        << 24));
+    }
+    if ([@"alpha" isEqualToString:key]) {
+        return @(self.view.alpha);
+    }
     return nil;
 }
 
@@ -786,6 +809,10 @@ - (void)setAnimatedValue:(NSString *)key value:(NSNumber *)value {
         self.rotationX = value;
     } else if ([@"rotationY" isEqualToString:key]) {
         self.rotationY = value;
+    } else if ([@"backgroundColor" isEqualToString:key]) {
+        self.view.backgroundColor = DoricColor(value);
+    } else if ([@"alpha" isEqualToString:key]) {
+        self.view.alpha = value.floatValue;
     }
 }
 
@@ -822,6 +849,10 @@ - (CABasicAnimation *)parseChangeable:(NSDictionary *)params fillMode:(NSNumber
         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"];
     }

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

@@ -1487,6 +1487,82 @@ var Panel = /** @class */ (function () {
     return Panel;
 }());
 
+/**
+ *  Store color as format AARRGGBB or RRGGBB
+ */
+var Color = /** @class */ (function () {
+    function Color(v) {
+        this._value = 0;
+        this._value = v | 0x0;
+    }
+    Color.parse = function (str) {
+        if (!str.startsWith("#")) {
+            throw new Error("Parse color error with " + str);
+        }
+        var val = parseInt(str.substr(1), 16);
+        if (str.length === 7) {
+            return new Color(val | 0xff000000);
+        }
+        else if (str.length === 9) {
+            return new Color(val);
+        }
+        else {
+            throw new Error("Parse color error with " + str);
+        }
+    };
+    Color.safeParse = function (str, defVal) {
+        if (defVal === void 0) { defVal = Color.TRANSPARENT; }
+        var color = defVal;
+        try {
+            color = Color.parse(str);
+        }
+        catch (e) {
+        }
+        finally {
+            return color;
+        }
+    };
+    Color.prototype.alpha = function (v) {
+        v = v * 255;
+        return new Color((this._value & 0xffffff) | ((v & 0xff) << 24));
+    };
+    Color.prototype.toModel = function () {
+        return this._value;
+    };
+    Color.BLACK = new Color(0xFF000000);
+    Color.DKGRAY = new Color(0xFF444444);
+    Color.GRAY = new Color(0xFF888888);
+    Color.LTGRAY = new Color(0xFFCCCCCC);
+    Color.WHITE = new Color(0xFFFFFFFF);
+    Color.RED = new Color(0xFFFF0000);
+    Color.GREEN = new Color(0xFF00FF00);
+    Color.BLUE = new Color(0xFF0000FF);
+    Color.YELLOW = new Color(0xFFFFFF00);
+    Color.CYAN = new Color(0xFF00FFFF);
+    Color.MAGENTA = new Color(0xFFFF00FF);
+    Color.TRANSPARENT = new Color(0);
+    return Color;
+}());
+exports.GradientOrientation = void 0;
+(function (GradientOrientation) {
+    /** draw the gradient from the top to the bottom */
+    GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
+    /** draw the gradient from the top-right to the bottom-left */
+    GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
+    /** draw the gradient from the right to the left */
+    GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
+    /** draw the gradient from the bottom-right to the top-left */
+    GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
+    /** draw the gradient from the bottom to the top */
+    GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
+    /** draw the gradient from the bottom-left to the top-right */
+    GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
+    /** draw the gradient from the left to the right */
+    GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
+    /** draw the gradient from the top-left to the bottom-right */
+    GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
+})(exports.GradientOrientation || (exports.GradientOrientation = {}));
+
 /*
  * Copyright [2019] [Doric.Pub]
  *
@@ -1736,6 +1812,9 @@ var TranslationAnimation = /** @class */ (function (_super) {
     });
     return TranslationAnimation;
 }(Animation));
+/**
+ * Rotation range is [0..2]
+ */
 var RotationAnimation = /** @class */ (function (_super) {
     __extends$e(RotationAnimation, _super);
     function RotationAnimation() {
@@ -1770,6 +1849,9 @@ var RotationAnimation = /** @class */ (function (_super) {
     });
     return RotationAnimation;
 }(Animation));
+/**
+ * Rotation range is [0..2]
+ */
 var RotationXAnimation = /** @class */ (function (_super) {
     __extends$e(RotationXAnimation, _super);
     function RotationXAnimation() {
@@ -1804,6 +1886,9 @@ var RotationXAnimation = /** @class */ (function (_super) {
     });
     return RotationXAnimation;
 }(Animation));
+/**
+ * Rotation range is [0..2]
+ */
 var RotationYAnimation = /** @class */ (function (_super) {
     __extends$e(RotationYAnimation, _super);
     function RotationYAnimation() {
@@ -1838,6 +1923,77 @@ var RotationYAnimation = /** @class */ (function (_super) {
     });
     return RotationYAnimation;
 }(Animation));
+var BackgroundColorAnimation = /** @class */ (function (_super) {
+    __extends$e(BackgroundColorAnimation, _super);
+    function BackgroundColorAnimation() {
+        var _this = _super.call(this) || this;
+        _this.backgroundColorChangeable = {
+            key: "backgroundColor",
+            fromValue: Color.TRANSPARENT._value,
+            toValue: Color.TRANSPARENT._value,
+        };
+        _this.changeables.set("backgroundColor", _this.backgroundColorChangeable);
+        return _this;
+    }
+    Object.defineProperty(BackgroundColorAnimation.prototype, "fromColor", {
+        get: function () {
+            return new Color(this.backgroundColorChangeable.fromValue);
+        },
+        set: function (color) {
+            this.backgroundColorChangeable.fromValue = color._value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BackgroundColorAnimation.prototype, "toColor", {
+        get: function () {
+            return new Color(this.backgroundColorChangeable.toValue);
+        },
+        set: function (v) {
+            this.backgroundColorChangeable.toValue = v._value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return BackgroundColorAnimation;
+}(Animation));
+/**
+ * Alpha range is [0..1]
+ */
+var AlphaAnimation = /** @class */ (function (_super) {
+    __extends$e(AlphaAnimation, _super);
+    function AlphaAnimation() {
+        var _this = _super.call(this) || this;
+        _this.opacityChangeable = {
+            key: "alpha",
+            fromValue: 1,
+            toValue: 1,
+        };
+        _this.changeables.set("alpha", _this.opacityChangeable);
+        return _this;
+    }
+    Object.defineProperty(AlphaAnimation.prototype, "from", {
+        get: function () {
+            return this.opacityChangeable.fromValue;
+        },
+        set: function (v) {
+            this.opacityChangeable.fromValue = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AlphaAnimation.prototype, "to", {
+        get: function () {
+            return this.opacityChangeable.toValue;
+        },
+        set: function (v) {
+            this.opacityChangeable.toValue = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return AlphaAnimation;
+}(Animation));
 var AnimationSet = /** @class */ (function () {
     function AnimationSet() {
         this.animations = [];
@@ -1978,82 +2134,6 @@ function text(config) {
     return ret;
 }
 
-/**
- *  Store color as format AARRGGBB or RRGGBB
- */
-var Color = /** @class */ (function () {
-    function Color(v) {
-        this._value = 0;
-        this._value = v | 0x0;
-    }
-    Color.parse = function (str) {
-        if (!str.startsWith("#")) {
-            throw new Error("Parse color error with " + str);
-        }
-        var val = parseInt(str.substr(1), 16);
-        if (str.length === 7) {
-            return new Color(val | 0xff000000);
-        }
-        else if (str.length === 9) {
-            return new Color(val);
-        }
-        else {
-            throw new Error("Parse color error with " + str);
-        }
-    };
-    Color.safeParse = function (str, defVal) {
-        if (defVal === void 0) { defVal = Color.TRANSPARENT; }
-        var color = defVal;
-        try {
-            color = Color.parse(str);
-        }
-        catch (e) {
-        }
-        finally {
-            return color;
-        }
-    };
-    Color.prototype.alpha = function (v) {
-        v = v * 255;
-        return new Color((this._value & 0xffffff) | ((v & 0xff) << 24));
-    };
-    Color.prototype.toModel = function () {
-        return this._value;
-    };
-    Color.BLACK = new Color(0xFF000000);
-    Color.DKGRAY = new Color(0xFF444444);
-    Color.GRAY = new Color(0xFF888888);
-    Color.LTGRAY = new Color(0xFFCCCCCC);
-    Color.WHITE = new Color(0xFFFFFFFF);
-    Color.RED = new Color(0xFFFF0000);
-    Color.GREEN = new Color(0xFF00FF00);
-    Color.BLUE = new Color(0xFF0000FF);
-    Color.YELLOW = new Color(0xFFFFFF00);
-    Color.CYAN = new Color(0xFF00FFFF);
-    Color.MAGENTA = new Color(0xFFFF00FF);
-    Color.TRANSPARENT = new Color(0);
-    return Color;
-}());
-exports.GradientOrientation = void 0;
-(function (GradientOrientation) {
-    /** draw the gradient from the top to the bottom */
-    GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
-    /** draw the gradient from the top-right to the bottom-left */
-    GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
-    /** draw the gradient from the right to the left */
-    GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
-    /** draw the gradient from the bottom-right to the top-left */
-    GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
-    /** draw the gradient from the bottom to the top */
-    GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
-    /** draw the gradient from the bottom-left to the top-right */
-    GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
-    /** draw the gradient from the left to the right */
-    GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
-    /** draw the gradient from the top-left to the bottom-right */
-    GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
-})(exports.GradientOrientation || (exports.GradientOrientation = {}));
-
 var __extends$c = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -4086,8 +4166,10 @@ var ModularPanel = /** @class */ (function (_super) {
     return ModularPanel;
 }(Module));
 
+exports.AlphaAnimation = AlphaAnimation;
 exports.AnimationSet = AnimationSet;
 exports.BOTTOM = BOTTOM;
+exports.BackgroundColorAnimation = BackgroundColorAnimation;
 exports.CENTER = CENTER;
 exports.CENTER_X = CENTER_X;
 exports.CENTER_Y = CENTER_Y;

doric-js/bundle/doric-lib.js

@@ -1127,6 +1127,80 @@ __decorate$b([
     __metadata$b("design:returntype", void 0)
 ], Panel.prototype, "__enableSnapshot__", null);
 
+/**
+ *  Store color as format AARRGGBB or RRGGBB
+ */
+class Color {
+    constructor(v) {
+        this._value = 0;
+        this._value = v | 0x0;
+    }
+    static parse(str) {
+        if (!str.startsWith("#")) {
+            throw new Error(`Parse color error with ${str}`);
+        }
+        const val = parseInt(str.substr(1), 16);
+        if (str.length === 7) {
+            return new Color(val | 0xff000000);
+        }
+        else if (str.length === 9) {
+            return new Color(val);
+        }
+        else {
+            throw new Error(`Parse color error with ${str}`);
+        }
+    }
+    static safeParse(str, defVal = Color.TRANSPARENT) {
+        let color = defVal;
+        try {
+            color = Color.parse(str);
+        }
+        catch (e) {
+        }
+        finally {
+            return color;
+        }
+    }
+    alpha(v) {
+        v = v * 255;
+        return new Color((this._value & 0xffffff) | ((v & 0xff) << 24));
+    }
+    toModel() {
+        return this._value;
+    }
+}
+Color.BLACK = new Color(0xFF000000);
+Color.DKGRAY = new Color(0xFF444444);
+Color.GRAY = new Color(0xFF888888);
+Color.LTGRAY = new Color(0xFFCCCCCC);
+Color.WHITE = new Color(0xFFFFFFFF);
+Color.RED = new Color(0xFFFF0000);
+Color.GREEN = new Color(0xFF00FF00);
+Color.BLUE = new Color(0xFF0000FF);
+Color.YELLOW = new Color(0xFFFFFF00);
+Color.CYAN = new Color(0xFF00FFFF);
+Color.MAGENTA = new Color(0xFFFF00FF);
+Color.TRANSPARENT = new Color(0);
+exports.GradientOrientation = void 0;
+(function (GradientOrientation) {
+    /** draw the gradient from the top to the bottom */
+    GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
+    /** draw the gradient from the top-right to the bottom-left */
+    GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
+    /** draw the gradient from the right to the left */
+    GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
+    /** draw the gradient from the bottom-right to the top-left */
+    GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
+    /** draw the gradient from the bottom to the top */
+    GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
+    /** draw the gradient from the bottom-left to the top-right */
+    GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
+    /** draw the gradient from the left to the right */
+    GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
+    /** draw the gradient from the top-left to the bottom-right */
+    GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
+})(exports.GradientOrientation || (exports.GradientOrientation = {}));
+
 /*
  * Copyright [2019] [Doric.Pub]
  *
@@ -1300,6 +1374,9 @@ class TranslationAnimation extends Animation {
         return this.translationYChangeable.toValue;
     }
 }
+/**
+ * Rotation range is [0..2]
+ */
 class RotationAnimation extends Animation {
     constructor() {
         super();
@@ -1323,6 +1400,9 @@ class RotationAnimation extends Animation {
         return this.rotationChaneable.toValue;
     }
 }
+/**
+ * Rotation range is [0..2]
+ */
 class RotationXAnimation extends Animation {
     constructor() {
         super();
@@ -1346,6 +1426,9 @@ class RotationXAnimation extends Animation {
         return this.rotationChaneable.toValue;
     }
 }
+/**
+ * Rotation range is [0..2]
+ */
 class RotationYAnimation extends Animation {
     constructor() {
         super();
@@ -1369,6 +1452,55 @@ class RotationYAnimation extends Animation {
         return this.rotationChaneable.toValue;
     }
 }
+class BackgroundColorAnimation extends Animation {
+    constructor() {
+        super();
+        this.backgroundColorChangeable = {
+            key: "backgroundColor",
+            fromValue: Color.TRANSPARENT._value,
+            toValue: Color.TRANSPARENT._value,
+        };
+        this.changeables.set("backgroundColor", this.backgroundColorChangeable);
+    }
+    set fromColor(color) {
+        this.backgroundColorChangeable.fromValue = color._value;
+    }
+    get fromColor() {
+        return new Color(this.backgroundColorChangeable.fromValue);
+    }
+    set toColor(v) {
+        this.backgroundColorChangeable.toValue = v._value;
+    }
+    get toColor() {
+        return new Color(this.backgroundColorChangeable.toValue);
+    }
+}
+/**
+ * Alpha range is [0..1]
+ */
+class AlphaAnimation extends Animation {
+    constructor() {
+        super();
+        this.opacityChangeable = {
+            key: "alpha",
+            fromValue: 1,
+            toValue: 1,
+        };
+        this.changeables.set("alpha", this.opacityChangeable);
+    }
+    set from(v) {
+        this.opacityChangeable.fromValue = v;
+    }
+    get from() {
+        return this.opacityChangeable.fromValue;
+    }
+    set to(v) {
+        this.opacityChangeable.toValue = v;
+    }
+    get to() {
+        return this.opacityChangeable.toValue;
+    }
+}
 class AnimationSet {
     constructor() {
         this.animations = [];
@@ -1480,80 +1612,6 @@ function text(config) {
     return ret;
 }
 
-/**
- *  Store color as format AARRGGBB or RRGGBB
- */
-class Color {
-    constructor(v) {
-        this._value = 0;
-        this._value = v | 0x0;
-    }
-    static parse(str) {
-        if (!str.startsWith("#")) {
-            throw new Error(`Parse color error with ${str}`);
-        }
-        const val = parseInt(str.substr(1), 16);
-        if (str.length === 7) {
-            return new Color(val | 0xff000000);
-        }
-        else if (str.length === 9) {
-            return new Color(val);
-        }
-        else {
-            throw new Error(`Parse color error with ${str}`);
-        }
-    }
-    static safeParse(str, defVal = Color.TRANSPARENT) {
-        let color = defVal;
-        try {
-            color = Color.parse(str);
-        }
-        catch (e) {
-        }
-        finally {
-            return color;
-        }
-    }
-    alpha(v) {
-        v = v * 255;
-        return new Color((this._value & 0xffffff) | ((v & 0xff) << 24));
-    }
-    toModel() {
-        return this._value;
-    }
-}
-Color.BLACK = new Color(0xFF000000);
-Color.DKGRAY = new Color(0xFF444444);
-Color.GRAY = new Color(0xFF888888);
-Color.LTGRAY = new Color(0xFFCCCCCC);
-Color.WHITE = new Color(0xFFFFFFFF);
-Color.RED = new Color(0xFFFF0000);
-Color.GREEN = new Color(0xFF00FF00);
-Color.BLUE = new Color(0xFF0000FF);
-Color.YELLOW = new Color(0xFFFFFF00);
-Color.CYAN = new Color(0xFF00FFFF);
-Color.MAGENTA = new Color(0xFFFF00FF);
-Color.TRANSPARENT = new Color(0);
-exports.GradientOrientation = void 0;
-(function (GradientOrientation) {
-    /** draw the gradient from the top to the bottom */
-    GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
-    /** draw the gradient from the top-right to the bottom-left */
-    GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
-    /** draw the gradient from the right to the left */
-    GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
-    /** draw the gradient from the bottom-right to the top-left */
-    GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
-    /** draw the gradient from the bottom to the top */
-    GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
-    /** draw the gradient from the bottom-left to the top-right */
-    GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
-    /** draw the gradient from the left to the right */
-    GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
-    /** draw the gradient from the top-left to the bottom-right */
-    GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
-})(exports.GradientOrientation || (exports.GradientOrientation = {}));
-
 var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -3135,8 +3193,10 @@ class ModularPanel extends Module {
     }
 }
 
+exports.AlphaAnimation = AlphaAnimation;
 exports.AnimationSet = AnimationSet;
 exports.BOTTOM = BOTTOM;
+exports.BackgroundColorAnimation = BackgroundColorAnimation;
 exports.CENTER = CENTER;
 exports.CENTER_X = CENTER_X;
 exports.CENTER_Y = CENTER_Y;

doric-js/bundle/doric-vm.js

@@ -2651,6 +2651,80 @@ __decorate$b([
     __metadata$b("design:returntype", void 0)
 ], Panel.prototype, "__enableSnapshot__", null);
 
+/**
+ *  Store color as format AARRGGBB or RRGGBB
+ */
+class Color {
+    constructor(v) {
+        this._value = 0;
+        this._value = v | 0x0;
+    }
+    static parse(str) {
+        if (!str.startsWith("#")) {
+            throw new Error(`Parse color error with ${str}`);
+        }
+        const val = parseInt(str.substr(1), 16);
+        if (str.length === 7) {
+            return new Color(val | 0xff000000);
+        }
+        else if (str.length === 9) {
+            return new Color(val);
+        }
+        else {
+            throw new Error(`Parse color error with ${str}`);
+        }
+    }
+    static safeParse(str, defVal = Color.TRANSPARENT) {
+        let color = defVal;
+        try {
+            color = Color.parse(str);
+        }
+        catch (e) {
+        }
+        finally {
+            return color;
+        }
+    }
+    alpha(v) {
+        v = v * 255;
+        return new Color((this._value & 0xffffff) | ((v & 0xff) << 24));
+    }
+    toModel() {
+        return this._value;
+    }
+}
+Color.BLACK = new Color(0xFF000000);
+Color.DKGRAY = new Color(0xFF444444);
+Color.GRAY = new Color(0xFF888888);
+Color.LTGRAY = new Color(0xFFCCCCCC);
+Color.WHITE = new Color(0xFFFFFFFF);
+Color.RED = new Color(0xFFFF0000);
+Color.GREEN = new Color(0xFF00FF00);
+Color.BLUE = new Color(0xFF0000FF);
+Color.YELLOW = new Color(0xFFFFFF00);
+Color.CYAN = new Color(0xFF00FFFF);
+Color.MAGENTA = new Color(0xFFFF00FF);
+Color.TRANSPARENT = new Color(0);
+exports.GradientOrientation = void 0;
+(function (GradientOrientation) {
+    /** draw the gradient from the top to the bottom */
+    GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
+    /** draw the gradient from the top-right to the bottom-left */
+    GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
+    /** draw the gradient from the right to the left */
+    GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
+    /** draw the gradient from the bottom-right to the top-left */
+    GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
+    /** draw the gradient from the bottom to the top */
+    GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
+    /** draw the gradient from the bottom-left to the top-right */
+    GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
+    /** draw the gradient from the left to the right */
+    GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
+    /** draw the gradient from the top-left to the bottom-right */
+    GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
+})(exports.GradientOrientation || (exports.GradientOrientation = {}));
+
 /*
  * Copyright [2019] [Doric.Pub]
  *
@@ -2824,6 +2898,9 @@ class TranslationAnimation extends Animation {
         return this.translationYChangeable.toValue;
     }
 }
+/**
+ * Rotation range is [0..2]
+ */
 class RotationAnimation extends Animation {
     constructor() {
         super();
@@ -2847,6 +2924,9 @@ class RotationAnimation extends Animation {
         return this.rotationChaneable.toValue;
     }
 }
+/**
+ * Rotation range is [0..2]
+ */
 class RotationXAnimation extends Animation {
     constructor() {
         super();
@@ -2870,6 +2950,9 @@ class RotationXAnimation extends Animation {
         return this.rotationChaneable.toValue;
     }
 }
+/**
+ * Rotation range is [0..2]
+ */
 class RotationYAnimation extends Animation {
     constructor() {
         super();
@@ -2893,6 +2976,55 @@ class RotationYAnimation extends Animation {
         return this.rotationChaneable.toValue;
     }
 }
+class BackgroundColorAnimation extends Animation {
+    constructor() {
+        super();
+        this.backgroundColorChangeable = {
+            key: "backgroundColor",
+            fromValue: Color.TRANSPARENT._value,
+            toValue: Color.TRANSPARENT._value,
+        };
+        this.changeables.set("backgroundColor", this.backgroundColorChangeable);
+    }
+    set fromColor(color) {
+        this.backgroundColorChangeable.fromValue = color._value;
+    }
+    get fromColor() {
+        return new Color(this.backgroundColorChangeable.fromValue);
+    }
+    set toColor(v) {
+        this.backgroundColorChangeable.toValue = v._value;
+    }
+    get toColor() {
+        return new Color(this.backgroundColorChangeable.toValue);
+    }
+}
+/**
+ * Alpha range is [0..1]
+ */
+class AlphaAnimation extends Animation {
+    constructor() {
+        super();
+        this.opacityChangeable = {
+            key: "alpha",
+            fromValue: 1,
+            toValue: 1,
+        };
+        this.changeables.set("alpha", this.opacityChangeable);
+    }
+    set from(v) {
+        this.opacityChangeable.fromValue = v;
+    }
+    get from() {
+        return this.opacityChangeable.fromValue;
+    }
+    set to(v) {
+        this.opacityChangeable.toValue = v;
+    }
+    get to() {
+        return this.opacityChangeable.toValue;
+    }
+}
 class AnimationSet {
     constructor() {
         this.animations = [];
@@ -3004,80 +3136,6 @@ function text(config) {
     return ret;
 }
 
-/**
- *  Store color as format AARRGGBB or RRGGBB
- */
-class Color {
-    constructor(v) {
-        this._value = 0;
-        this._value = v | 0x0;
-    }
-    static parse(str) {
-        if (!str.startsWith("#")) {
-            throw new Error(`Parse color error with ${str}`);
-        }
-        const val = parseInt(str.substr(1), 16);
-        if (str.length === 7) {
-            return new Color(val | 0xff000000);
-        }
-        else if (str.length === 9) {
-            return new Color(val);
-        }
-        else {
-            throw new Error(`Parse color error with ${str}`);
-        }
-    }
-    static safeParse(str, defVal = Color.TRANSPARENT) {
-        let color = defVal;
-        try {
-            color = Color.parse(str);
-        }
-        catch (e) {
-        }
-        finally {
-            return color;
-        }
-    }
-    alpha(v) {
-        v = v * 255;
-        return new Color((this._value & 0xffffff) | ((v & 0xff) << 24));
-    }
-    toModel() {
-        return this._value;
-    }
-}
-Color.BLACK = new Color(0xFF000000);
-Color.DKGRAY = new Color(0xFF444444);
-Color.GRAY = new Color(0xFF888888);
-Color.LTGRAY = new Color(0xFFCCCCCC);
-Color.WHITE = new Color(0xFFFFFFFF);
-Color.RED = new Color(0xFFFF0000);
-Color.GREEN = new Color(0xFF00FF00);
-Color.BLUE = new Color(0xFF0000FF);
-Color.YELLOW = new Color(0xFFFFFF00);
-Color.CYAN = new Color(0xFF00FFFF);
-Color.MAGENTA = new Color(0xFFFF00FF);
-Color.TRANSPARENT = new Color(0);
-exports.GradientOrientation = void 0;
-(function (GradientOrientation) {
-    /** draw the gradient from the top to the bottom */
-    GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
-    /** draw the gradient from the top-right to the bottom-left */
-    GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
-    /** draw the gradient from the right to the left */
-    GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
-    /** draw the gradient from the bottom-right to the top-left */
-    GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
-    /** draw the gradient from the bottom to the top */
-    GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
-    /** draw the gradient from the bottom-left to the top-right */
-    GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
-    /** draw the gradient from the left to the right */
-    GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
-    /** draw the gradient from the top-left to the bottom-right */
-    GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
-})(exports.GradientOrientation || (exports.GradientOrientation = {}));
-
 var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -4900,8 +4958,10 @@ global$1.nativeEmpty = () => {
     }, 0);
 };
 
+exports.AlphaAnimation = AlphaAnimation;
 exports.AnimationSet = AnimationSet;
 exports.BOTTOM = BOTTOM;
+exports.BackgroundColorAnimation = BackgroundColorAnimation;
 exports.CENTER = CENTER;
 exports.CENTER_X = CENTER_X;
 exports.CENTER_Y = CENTER_Y;

doric-js/index.d.ts

@@ -336,8 +336,9 @@ declare module 'doric/lib/src/ui/view' {
 }
 
 declare module 'doric/lib/src/ui/animation' {
+    import { Color } from "doric/lib/src/util/color";
     import { Modeling, Model } from "doric/lib/src/util/types";
-    export type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY" | "rotationX" | "rotationY";
+    export type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY" | "rotationX" | "rotationY" | "backgroundColor" | "alpha";
     export enum RepeatMode {
             RESTART = 1,
             REVERSE = 2
@@ -441,6 +442,9 @@ declare module 'doric/lib/src/ui/animation' {
             set toTranslationY(v: number);
             get toTranslationY(): number;
     }
+    /**
+        * Rotation range is [0..2]
+        */
     export class RotationAnimation extends Animation {
             constructor();
             set fromRotation(v: number);
@@ -448,6 +452,9 @@ declare module 'doric/lib/src/ui/animation' {
             set toRotation(v: number);
             get toRotation(): number;
     }
+    /**
+        * Rotation range is [0..2]
+        */
     export class RotationXAnimation extends Animation {
             constructor();
             set fromRotation(v: number);
@@ -455,6 +462,9 @@ declare module 'doric/lib/src/ui/animation' {
             set toRotation(v: number);
             get toRotation(): number;
     }
+    /**
+        * Rotation range is [0..2]
+        */
     export class RotationYAnimation extends Animation {
             constructor();
             set fromRotation(v: number);
@@ -462,6 +472,23 @@ declare module 'doric/lib/src/ui/animation' {
             set toRotation(v: number);
             get toRotation(): number;
     }
+    export class BackgroundColorAnimation extends Animation {
+            constructor();
+            set fromColor(color: Color);
+            get fromColor(): Color;
+            set toColor(v: Color);
+            get toColor(): Color;
+    }
+    /**
+        * Alpha range is [0..1]
+        */
+    export class AlphaAnimation extends Animation {
+            constructor();
+            set from(v: number);
+            get from(): number;
+            set to(v: number);
+            get to(): number;
+    }
     export class AnimationSet implements IAnimation {
             delay?: number;
             id: string;

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

@@ -1,5 +1,6 @@
+import { Color } from "../util/color";
 import { Modeling, Model } from "../util/types";
-export declare type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY" | "rotationX" | "rotationY";
+export declare type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY" | "rotationX" | "rotationY" | "backgroundColor" | "alpha";
 export declare enum RepeatMode {
     RESTART = 1,
     REVERSE = 2
@@ -107,6 +108,9 @@ export declare class TranslationAnimation extends Animation {
     set toTranslationY(v: number);
     get toTranslationY(): number;
 }
+/**
+ * Rotation range is [0..2]
+ */
 export declare class RotationAnimation extends Animation {
     private rotationChaneable;
     constructor();
@@ -115,6 +119,9 @@ export declare class RotationAnimation extends Animation {
     set toRotation(v: number);
     get toRotation(): number;
 }
+/**
+ * Rotation range is [0..2]
+ */
 export declare class RotationXAnimation extends Animation {
     private rotationChaneable;
     constructor();
@@ -123,6 +130,9 @@ export declare class RotationXAnimation extends Animation {
     set toRotation(v: number);
     get toRotation(): number;
 }
+/**
+ * Rotation range is [0..2]
+ */
 export declare class RotationYAnimation extends Animation {
     private rotationChaneable;
     constructor();
@@ -131,6 +141,25 @@ export declare class RotationYAnimation extends Animation {
     set toRotation(v: number);
     get toRotation(): number;
 }
+export declare class BackgroundColorAnimation extends Animation {
+    private backgroundColorChangeable;
+    constructor();
+    set fromColor(color: Color);
+    get fromColor(): Color;
+    set toColor(v: Color);
+    get toColor(): Color;
+}
+/**
+ * Alpha range is [0..1]
+ */
+export declare class AlphaAnimation extends Animation {
+    private opacityChangeable;
+    constructor();
+    set from(v: number);
+    get from(): number;
+    set to(v: number);
+    get to(): number;
+}
 export declare class AnimationSet implements IAnimation {
     private animations;
     private _duration;

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

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { Color } from "../util/color";
 import { uniqueId } from "../util/uniqueId";
 export var RepeatMode;
 (function (RepeatMode) {
@@ -172,6 +173,9 @@ export class TranslationAnimation extends Animation {
         return this.translationYChangeable.toValue;
     }
 }
+/**
+ * Rotation range is [0..2]
+ */
 export class RotationAnimation extends Animation {
     constructor() {
         super();
@@ -195,6 +199,9 @@ export class RotationAnimation extends Animation {
         return this.rotationChaneable.toValue;
     }
 }
+/**
+ * Rotation range is [0..2]
+ */
 export class RotationXAnimation extends Animation {
     constructor() {
         super();
@@ -218,6 +225,9 @@ export class RotationXAnimation extends Animation {
         return this.rotationChaneable.toValue;
     }
 }
+/**
+ * Rotation range is [0..2]
+ */
 export class RotationYAnimation extends Animation {
     constructor() {
         super();
@@ -241,6 +251,55 @@ export class RotationYAnimation extends Animation {
         return this.rotationChaneable.toValue;
     }
 }
+export class BackgroundColorAnimation extends Animation {
+    constructor() {
+        super();
+        this.backgroundColorChangeable = {
+            key: "backgroundColor",
+            fromValue: Color.TRANSPARENT._value,
+            toValue: Color.TRANSPARENT._value,
+        };
+        this.changeables.set("backgroundColor", this.backgroundColorChangeable);
+    }
+    set fromColor(color) {
+        this.backgroundColorChangeable.fromValue = color._value;
+    }
+    get fromColor() {
+        return new Color(this.backgroundColorChangeable.fromValue);
+    }
+    set toColor(v) {
+        this.backgroundColorChangeable.toValue = v._value;
+    }
+    get toColor() {
+        return new Color(this.backgroundColorChangeable.toValue);
+    }
+}
+/**
+ * Alpha range is [0..1]
+ */
+export class AlphaAnimation extends Animation {
+    constructor() {
+        super();
+        this.opacityChangeable = {
+            key: "alpha",
+            fromValue: 1,
+            toValue: 1,
+        };
+        this.changeables.set("alpha", this.opacityChangeable);
+    }
+    set from(v) {
+        this.opacityChangeable.fromValue = v;
+    }
+    get from() {
+        return this.opacityChangeable.fromValue;
+    }
+    set to(v) {
+        this.opacityChangeable.toValue = v;
+    }
+    get to() {
+        return this.opacityChangeable.toValue;
+    }
+}
 export class AnimationSet {
     constructor() {
         this.animations = [];

doric-js/src/ui/animation.ts

@@ -14,10 +14,11 @@
  * limitations under the License.
  */
 
+import { Color } from "../util/color"
 import { Modeling, Model } from "../util/types"
 import { uniqueId } from "../util/uniqueId"
 
-export type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY" | "rotationX" | "rotationY"
+export type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY" | "rotationX" | "rotationY" | "backgroundColor" | "alpha"
 
 export enum RepeatMode {
     RESTART = 1,
@@ -209,7 +210,9 @@ export class TranslationAnimation extends Animation {
         return this.translationYChangeable.toValue
     }
 }
-
+/**
+ * Rotation range is [0..2]
+ */
 export class RotationAnimation extends Animation {
     private rotationChaneable: Changeable = {
         key: "rotation",
@@ -237,7 +240,9 @@ export class RotationAnimation extends Animation {
         return this.rotationChaneable.toValue
     }
 }
-
+/**
+ * Rotation range is [0..2]
+ */
 export class RotationXAnimation extends Animation {
     private rotationChaneable: Changeable = {
         key: "rotationX",
@@ -265,6 +270,9 @@ export class RotationXAnimation extends Animation {
         return this.rotationChaneable.toValue
     }
 }
+/**
+ * Rotation range is [0..2]
+ */
 export class RotationYAnimation extends Animation {
     private rotationChaneable: Changeable = {
         key: "rotationY",
@@ -292,6 +300,70 @@ export class RotationYAnimation extends Animation {
         return this.rotationChaneable.toValue
     }
 }
+
+export class BackgroundColorAnimation extends Animation {
+    private backgroundColorChangeable: Changeable = {
+        key: "backgroundColor",
+        fromValue: Color.TRANSPARENT._value,
+        toValue: Color.TRANSPARENT._value,
+    }
+
+    constructor() {
+        super()
+        this.changeables.set("backgroundColor", this.backgroundColorChangeable)
+    }
+
+    set fromColor(color: Color) {
+        this.backgroundColorChangeable.fromValue = color._value
+    }
+
+    get fromColor() {
+        return new Color(this.backgroundColorChangeable.fromValue)
+    }
+
+    set toColor(v: Color) {
+        this.backgroundColorChangeable.toValue = v._value
+    }
+
+    get toColor() {
+        return new Color(this.backgroundColorChangeable.toValue)
+    }
+}
+
+/**
+ * Alpha range is [0..1]
+ */
+export class AlphaAnimation extends Animation {
+    private opacityChangeable: Changeable = {
+        key: "alpha",
+        fromValue: 1,
+        toValue: 1,
+    }
+
+    constructor() {
+        super()
+        this.changeables.set("alpha", this.opacityChangeable)
+    }
+
+    set from(v: number) {
+        this.opacityChangeable.fromValue = v
+    }
+
+    get from() {
+        return this.opacityChangeable.fromValue
+    }
+
+    set to(v: number) {
+        this.opacityChangeable.toValue = v
+    }
+
+    get to() {
+        return this.opacityChangeable.toValue
+    }
+}
+
+
+
 export class AnimationSet implements IAnimation {
     private animations: IAnimation[] = []
     private _duration = 0

doric-web/dist/index.js

@@ -2705,6 +2705,80 @@ __decorate$b([
     __metadata$b("design:returntype", void 0)
 ], Panel.prototype, "__enableSnapshot__", null);
 
+/**
+ *  Store color as format AARRGGBB or RRGGBB
+ */
+class Color {
+    constructor(v) {
+        this._value = 0;
+        this._value = v | 0x0;
+    }
+    static parse(str) {
+        if (!str.startsWith("#")) {
+            throw new Error(`Parse color error with ${str}`);
+        }
+        const val = parseInt(str.substr(1), 16);
+        if (str.length === 7) {
+            return new Color(val | 0xff000000);
+        }
+        else if (str.length === 9) {
+            return new Color(val);
+        }
+        else {
+            throw new Error(`Parse color error with ${str}`);
+        }
+    }
+    static safeParse(str, defVal = Color.TRANSPARENT) {
+        let color = defVal;
+        try {
+            color = Color.parse(str);
+        }
+        catch (e) {
+        }
+        finally {
+            return color;
+        }
+    }
+    alpha(v) {
+        v = v * 255;
+        return new Color((this._value & 0xffffff) | ((v & 0xff) << 24));
+    }
+    toModel() {
+        return this._value;
+    }
+}
+Color.BLACK = new Color(0xFF000000);
+Color.DKGRAY = new Color(0xFF444444);
+Color.GRAY = new Color(0xFF888888);
+Color.LTGRAY = new Color(0xFFCCCCCC);
+Color.WHITE = new Color(0xFFFFFFFF);
+Color.RED = new Color(0xFFFF0000);
+Color.GREEN = new Color(0xFF00FF00);
+Color.BLUE = new Color(0xFF0000FF);
+Color.YELLOW = new Color(0xFFFFFF00);
+Color.CYAN = new Color(0xFF00FFFF);
+Color.MAGENTA = new Color(0xFFFF00FF);
+Color.TRANSPARENT = new Color(0);
+exports.GradientOrientation = void 0;
+(function (GradientOrientation) {
+    /** draw the gradient from the top to the bottom */
+    GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
+    /** draw the gradient from the top-right to the bottom-left */
+    GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
+    /** draw the gradient from the right to the left */
+    GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
+    /** draw the gradient from the bottom-right to the top-left */
+    GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
+    /** draw the gradient from the bottom to the top */
+    GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
+    /** draw the gradient from the bottom-left to the top-right */
+    GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
+    /** draw the gradient from the left to the right */
+    GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
+    /** draw the gradient from the top-left to the bottom-right */
+    GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
+})(exports.GradientOrientation || (exports.GradientOrientation = {}));
+
 /*
  * Copyright [2019] [Doric.Pub]
  *
@@ -2878,6 +2952,9 @@ class TranslationAnimation extends Animation {
         return this.translationYChangeable.toValue;
     }
 }
+/**
+ * Rotation range is [0..2]
+ */
 class RotationAnimation extends Animation {
     constructor() {
         super();
@@ -2901,6 +2978,9 @@ class RotationAnimation extends Animation {
         return this.rotationChaneable.toValue;
     }
 }
+/**
+ * Rotation range is [0..2]
+ */
 class RotationXAnimation extends Animation {
     constructor() {
         super();
@@ -2924,6 +3004,9 @@ class RotationXAnimation extends Animation {
         return this.rotationChaneable.toValue;
     }
 }
+/**
+ * Rotation range is [0..2]
+ */
 class RotationYAnimation extends Animation {
     constructor() {
         super();
@@ -2947,6 +3030,55 @@ class RotationYAnimation extends Animation {
         return this.rotationChaneable.toValue;
     }
 }
+class BackgroundColorAnimation extends Animation {
+    constructor() {
+        super();
+        this.backgroundColorChangeable = {
+            key: "backgroundColor",
+            fromValue: Color.TRANSPARENT._value,
+            toValue: Color.TRANSPARENT._value,
+        };
+        this.changeables.set("backgroundColor", this.backgroundColorChangeable);
+    }
+    set fromColor(color) {
+        this.backgroundColorChangeable.fromValue = color._value;
+    }
+    get fromColor() {
+        return new Color(this.backgroundColorChangeable.fromValue);
+    }
+    set toColor(v) {
+        this.backgroundColorChangeable.toValue = v._value;
+    }
+    get toColor() {
+        return new Color(this.backgroundColorChangeable.toValue);
+    }
+}
+/**
+ * Alpha range is [0..1]
+ */
+class AlphaAnimation extends Animation {
+    constructor() {
+        super();
+        this.opacityChangeable = {
+            key: "alpha",
+            fromValue: 1,
+            toValue: 1,
+        };
+        this.changeables.set("alpha", this.opacityChangeable);
+    }
+    set from(v) {
+        this.opacityChangeable.fromValue = v;
+    }
+    get from() {
+        return this.opacityChangeable.fromValue;
+    }
+    set to(v) {
+        this.opacityChangeable.toValue = v;
+    }
+    get to() {
+        return this.opacityChangeable.toValue;
+    }
+}
 class AnimationSet {
     constructor() {
         this.animations = [];
@@ -3058,80 +3190,6 @@ function text(config) {
     return ret;
 }
 
-/**
- *  Store color as format AARRGGBB or RRGGBB
- */
-class Color {
-    constructor(v) {
-        this._value = 0;
-        this._value = v | 0x0;
-    }
-    static parse(str) {
-        if (!str.startsWith("#")) {
-            throw new Error(`Parse color error with ${str}`);
-        }
-        const val = parseInt(str.substr(1), 16);
-        if (str.length === 7) {
-            return new Color(val | 0xff000000);
-        }
-        else if (str.length === 9) {
-            return new Color(val);
-        }
-        else {
-            throw new Error(`Parse color error with ${str}`);
-        }
-    }
-    static safeParse(str, defVal = Color.TRANSPARENT) {
-        let color = defVal;
-        try {
-            color = Color.parse(str);
-        }
-        catch (e) {
-        }
-        finally {
-            return color;
-        }
-    }
-    alpha(v) {
-        v = v * 255;
-        return new Color((this._value & 0xffffff) | ((v & 0xff) << 24));
-    }
-    toModel() {
-        return this._value;
-    }
-}
-Color.BLACK = new Color(0xFF000000);
-Color.DKGRAY = new Color(0xFF444444);
-Color.GRAY = new Color(0xFF888888);
-Color.LTGRAY = new Color(0xFFCCCCCC);
-Color.WHITE = new Color(0xFFFFFFFF);
-Color.RED = new Color(0xFFFF0000);
-Color.GREEN = new Color(0xFF00FF00);
-Color.BLUE = new Color(0xFF0000FF);
-Color.YELLOW = new Color(0xFFFFFF00);
-Color.CYAN = new Color(0xFF00FFFF);
-Color.MAGENTA = new Color(0xFFFF00FF);
-Color.TRANSPARENT = new Color(0);
-exports.GradientOrientation = void 0;
-(function (GradientOrientation) {
-    /** draw the gradient from the top to the bottom */
-    GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
-    /** draw the gradient from the top-right to the bottom-left */
-    GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
-    /** draw the gradient from the right to the left */
-    GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
-    /** draw the gradient from the bottom-right to the top-left */
-    GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
-    /** draw the gradient from the bottom to the top */
-    GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
-    /** draw the gradient from the bottom-left to the top-right */
-    GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
-    /** draw the gradient from the left to the right */
-    GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
-    /** draw the gradient from the top-left to the bottom-right */
-    GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
-})(exports.GradientOrientation || (exports.GradientOrientation = {}));
-
 var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -4713,8 +4771,10 @@ class ModularPanel extends Module {
     }
 }
 
+exports.AlphaAnimation = AlphaAnimation;
 exports.AnimationSet = AnimationSet;
 exports.BOTTOM = BOTTOM;
+exports.BackgroundColorAnimation = BackgroundColorAnimation;
 exports.CENTER = CENTER;
 exports.CENTER_X = CENTER_X;
 exports.CENTER_Y = CENTER_Y;