add perspective for rotattionX and rotationY

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

@@ -23,7 +23,6 @@ import android.animation.ObjectAnimator;
 import android.content.Context;
 import android.graphics.Color;
 import android.graphics.LinearGradient;
-import android.graphics.Matrix;
 import android.graphics.Shader;
 import android.graphics.drawable.ColorDrawable;
 import android.graphics.drawable.ShapeDrawable;
@@ -33,11 +32,9 @@ import android.view.View;
 import android.view.ViewGroup;
 import android.view.animation.AccelerateDecelerateInterpolator;
 import android.view.animation.AccelerateInterpolator;
-import android.view.animation.Animation;
 import android.view.animation.DecelerateInterpolator;
 import android.view.animation.Interpolator;
 import android.view.animation.LinearInterpolator;
-import android.view.animation.Transformation;
 import android.widget.FrameLayout;
 import android.widget.LinearLayout;
 
@@ -514,6 +511,11 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
                     mFlexConfig = prop.asObject();
                 }
                 break;
+            case "perspective":
+                if (prop.isNumber()) {
+                    getNodeView().setCameraDistance(getContext().getResources().getDisplayMetrics().densityDpi * prop.asNumber().toFloat() / 25);
+                }
+                break;
             default:
                 break;
         }
@@ -1055,18 +1057,4 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
                 .put("y", DoricUtils.px2dp(position[1]))
                 .toJSONObject();
     }
-
-    private static class MyAnimation extends Animation {
-        private Matrix matrix;
-
-        public MyAnimation(Matrix matrix) {
-            this.matrix = matrix;
-        }
-
-        @Override
-        protected void applyTransformation(float interpolatedTime, Transformation t) {
-            super.applyTransformation(interpolatedTime, t);
-            t.getMatrix().set(matrix);
-        }
-    }
 }

doric-demo/src/ComplicatedAnimations.ts

@@ -1,4 +1,4 @@
-import { Group, Panel, gravity, Color, AnimationSet, vlayout, layoutConfig, modal, stack, hlayout, text, TranslationAnimation, ScaleAnimation, RotationAnimation, TimingFunction } from "doric";
+import { Group, Panel, gravity, Color, AnimationSet, vlayout, layoutConfig, modal, stack, hlayout, text, TranslationAnimation, ScaleAnimation, RotationAnimation, TimingFunction, RotationXAnimation, RotationYAnimation, image } from "doric";
 import { title, colors, box } from "./utils";
 
 function thisLabel(str: string) {
@@ -17,7 +17,9 @@ function thisLabel(str: string) {
 class AnimationDemo extends Panel {
     build(rootView: Group): void {
         const view = box(2)
-        const view2 = box(3)
+        const view2 = image({
+            imageUrl: "https://pic3.zhimg.com/v2-5847d0813bd0deba333fcbe52435e83e_b.jpg"
+        })
         view.onClick = () => {
             modal(context).toast('Clicked')
         }
@@ -130,6 +132,28 @@ class AnimationDemo extends Panel {
                                         view.doAnimation(context, animationSet)
                                     }
                                 }),
+                                thisLabel('rotationX').apply({
+                                    onClick: () => {
+                                        const rotation = new RotationXAnimation
+                                        rotation.duration = 5000
+                                        rotation.fromRotation = 0
+                                        rotation.toRotation = 0.5
+                                        const animationSet = new AnimationSet
+                                        animationSet.addAnimation(rotation)
+                                        view2.doAnimation(context, animationSet)
+                                    }
+                                }),
+                                thisLabel('rotationY').apply({
+                                    onClick: () => {
+                                        const rotation = new RotationYAnimation
+                                        rotation.duration = 5000
+                                        rotation.fromRotation = 0
+                                        rotation.toRotation = 4
+                                        const animationSet = new AnimationSet
+                                        animationSet.addAnimation(rotation)
+                                        view2.doAnimation(context, animationSet)
+                                    }
+                                }),
                             ],
                             { space: 10 }
                         ),
@@ -202,7 +226,7 @@ class AnimationDemo extends Panel {
                         view2.also(v => {
                             v.x = v.y = 20
                             v.y = 40
-                            v.scaleX = 1.5
+                            //v.scaleX = 1.5
                         })
                     ],
                     {

doric-iOS/Pod/Classes/Plugin/DoricPromise.m

@@ -41,6 +41,9 @@ - (instancetype)initWithContext:(DoricContext *)context callbackId:(NSString *)c
 
 - (void)resolve:(id)result {
     __weak typeof(self) __self = self;
+    if (self.context == nil) {
+        return;
+    }
     [[self.context.driver invokeDoricMethod:DORIC_BRIDGE_RESOLVE
                              argumentsArray:result
                                      ? @[self.context.contextId, self.callbackId, result]

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

@@ -108,6 +108,7 @@ @interface DoricViewNode ()
 @property(nonatomic, copy) NSNumber *pivotY;
 @property(nonatomic, strong) NSDictionary *gradientProps;
 @property(nonatomic, assign) CGSize gradientSize;
+@property(nonatomic, assign) CGFloat perspective;
 @end
 
 @implementation DoricViewNode
@@ -115,6 +116,7 @@ @implementation DoricViewNode
 - (instancetype)initWithContext:(DoricContext *)doricContext {
     if (self = [super initWithContext:doricContext]) {
         _callbackIds = [[NSMutableDictionary alloc] init];
+        _perspective = 200;
     }
     return self;
 }
@@ -163,8 +165,7 @@ - (void)transformProperties {
 
     if (self.rotationX || self.rotationY) {
         CATransform3D transform3D = CATransform3DMakeAffineTransform(transform);
-        transform3D.m34 = -1.0 / 500;
+        transform3D.m34 = -1.0 / self.perspective;
-
         if (self.rotationX) {
             transform3D = CATransform3DRotate(transform3D, (self.rotationX.floatValue ?: 0) * M_PI, 1, 0, 0);
         }
@@ -274,6 +275,8 @@ - (void)blendView:(UIView *)view forPropName:(NSString *)name propValue:(id)prop
         self.rotationX = prop;
     } else if ([name isEqualToString:@"rotationY"]) {
         self.rotationY = prop;
+    } else if ([name isEqualToString:@"perspective"]) {
+        self.perspective = [prop floatValue];
     } else if ([name isEqualToString:@"padding"]) {
         view.doricLayout.paddingLeft = 0;
         view.doricLayout.paddingRight = 0;
@@ -733,6 +736,12 @@ - (NSNumber *)getAnimatedValue:(NSString *)key {
     if ([@"rotation" isEqualToString:key]) {
         return self.rotation;
     }
+    if ([@"rotationX" isEqualToString:key]) {
+        return self.rotationX;
+    }
+    if ([@"rotationY" isEqualToString:key]) {
+        return self.rotationY;
+    }
     return nil;
 }
 
@@ -747,6 +756,10 @@ - (void)setAnimatedValue:(NSString *)key value:(NSNumber *)value {
         self.scaleY = value;
     } else if ([@"rotation" isEqualToString:key]) {
         self.rotation = value;
+    } else if ([@"rotationX" isEqualToString:key]) {
+        self.rotationX = value;
+    } else if ([@"rotationY" isEqualToString:key]) {
+        self.rotationY = value;
     }
 }
 
@@ -765,6 +778,14 @@ - (CABasicAnimation *)parseChangeable:(NSDictionary *)params fillMode:(NSNumber
         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 = params[@"fromValue"];

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

@@ -473,6 +473,10 @@ var View = /** @class */ (function () {
         Property,
         __metadata("design:type", Number)
     ], View.prototype, "rotationY", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Number)
+    ], View.prototype, "perspective", void 0);
     __decorate([
         Property,
         __metadata("design:type", Object)
@@ -1533,6 +1537,74 @@ var RotationAnimation = /** @class */ (function (_super) {
     });
     return RotationAnimation;
 }(Animation));
+var RotationXAnimation = /** @class */ (function (_super) {
+    __extends$2(RotationXAnimation, _super);
+    function RotationXAnimation() {
+        var _this = _super.call(this) || this;
+        _this.rotationChaneable = {
+            key: "rotationX",
+            fromValue: 1,
+            toValue: 1,
+        };
+        _this.changeables.set("rotationX", _this.rotationChaneable);
+        return _this;
+    }
+    Object.defineProperty(RotationXAnimation.prototype, "fromRotation", {
+        get: function () {
+            return this.rotationChaneable.fromValue;
+        },
+        set: function (v) {
+            this.rotationChaneable.fromValue = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RotationXAnimation.prototype, "toRotation", {
+        get: function () {
+            return this.rotationChaneable.toValue;
+        },
+        set: function (v) {
+            this.rotationChaneable.toValue = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return RotationXAnimation;
+}(Animation));
+var RotationYAnimation = /** @class */ (function (_super) {
+    __extends$2(RotationYAnimation, _super);
+    function RotationYAnimation() {
+        var _this = _super.call(this) || this;
+        _this.rotationChaneable = {
+            key: "rotationY",
+            fromValue: 1,
+            toValue: 1,
+        };
+        _this.changeables.set("rotationY", _this.rotationChaneable);
+        return _this;
+    }
+    Object.defineProperty(RotationYAnimation.prototype, "fromRotation", {
+        get: function () {
+            return this.rotationChaneable.fromValue;
+        },
+        set: function (v) {
+            this.rotationChaneable.fromValue = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RotationYAnimation.prototype, "toRotation", {
+        get: function () {
+            return this.rotationChaneable.toValue;
+        },
+        set: function (v) {
+            this.rotationChaneable.toValue = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return RotationYAnimation;
+}(Animation));
 var AnimationSet = /** @class */ (function () {
     function AnimationSet() {
         this.animations = [];
@@ -3423,6 +3495,8 @@ exports.RIGHT = RIGHT;
 exports.Refreshable = Refreshable;
 exports.Root = Root;
 exports.RotationAnimation = RotationAnimation;
+exports.RotationXAnimation = RotationXAnimation;
+exports.RotationYAnimation = RotationYAnimation;
 exports.ScaleAnimation = ScaleAnimation;
 exports.Scroller = Scroller;
 exports.SlideItem = SlideItem;

doric-js/bundle/doric-lib.js

@@ -390,6 +390,10 @@ let View = /** @class */ (() => {
         Property,
         __metadata("design:type", Number)
     ], View.prototype, "rotationY", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Number)
+    ], View.prototype, "perspective", void 0);
     __decorate([
         Property,
         __metadata("design:type", Object)
@@ -1144,6 +1148,52 @@ class RotationAnimation extends Animation {
         return this.rotationChaneable.toValue;
     }
 }
+class RotationXAnimation extends Animation {
+    constructor() {
+        super();
+        this.rotationChaneable = {
+            key: "rotationX",
+            fromValue: 1,
+            toValue: 1,
+        };
+        this.changeables.set("rotationX", this.rotationChaneable);
+    }
+    set fromRotation(v) {
+        this.rotationChaneable.fromValue = v;
+    }
+    get fromRotation() {
+        return this.rotationChaneable.fromValue;
+    }
+    set toRotation(v) {
+        this.rotationChaneable.toValue = v;
+    }
+    get toRotation() {
+        return this.rotationChaneable.toValue;
+    }
+}
+class RotationYAnimation extends Animation {
+    constructor() {
+        super();
+        this.rotationChaneable = {
+            key: "rotationY",
+            fromValue: 1,
+            toValue: 1,
+        };
+        this.changeables.set("rotationY", this.rotationChaneable);
+    }
+    set fromRotation(v) {
+        this.rotationChaneable.fromValue = v;
+    }
+    get fromRotation() {
+        return this.rotationChaneable.fromValue;
+    }
+    set toRotation(v) {
+        this.rotationChaneable.toValue = v;
+    }
+    get toRotation() {
+        return this.rotationChaneable.toValue;
+    }
+}
 class AnimationSet {
     constructor() {
         this.animations = [];
@@ -2702,6 +2752,8 @@ exports.RIGHT = RIGHT;
 exports.Refreshable = Refreshable;
 exports.Root = Root;
 exports.RotationAnimation = RotationAnimation;
+exports.RotationXAnimation = RotationXAnimation;
+exports.RotationYAnimation = RotationYAnimation;
 exports.ScaleAnimation = ScaleAnimation;
 exports.Scroller = Scroller;
 exports.SlideItem = SlideItem;

doric-js/bundle/doric-vm.js

@@ -1849,6 +1849,10 @@ let View = /** @class */ (() => {
         Property,
         __metadata("design:type", Number)
     ], View.prototype, "rotationY", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Number)
+    ], View.prototype, "perspective", void 0);
     __decorate([
         Property,
         __metadata("design:type", Object)
@@ -2603,6 +2607,52 @@ class RotationAnimation extends Animation {
         return this.rotationChaneable.toValue;
     }
 }
+class RotationXAnimation extends Animation {
+    constructor() {
+        super();
+        this.rotationChaneable = {
+            key: "rotationX",
+            fromValue: 1,
+            toValue: 1,
+        };
+        this.changeables.set("rotationX", this.rotationChaneable);
+    }
+    set fromRotation(v) {
+        this.rotationChaneable.fromValue = v;
+    }
+    get fromRotation() {
+        return this.rotationChaneable.fromValue;
+    }
+    set toRotation(v) {
+        this.rotationChaneable.toValue = v;
+    }
+    get toRotation() {
+        return this.rotationChaneable.toValue;
+    }
+}
+class RotationYAnimation extends Animation {
+    constructor() {
+        super();
+        this.rotationChaneable = {
+            key: "rotationY",
+            fromValue: 1,
+            toValue: 1,
+        };
+        this.changeables.set("rotationY", this.rotationChaneable);
+    }
+    set fromRotation(v) {
+        this.rotationChaneable.fromValue = v;
+    }
+    get fromRotation() {
+        return this.rotationChaneable.fromValue;
+    }
+    set toRotation(v) {
+        this.rotationChaneable.toValue = v;
+    }
+    get toRotation() {
+        return this.rotationChaneable.toValue;
+    }
+}
 class AnimationSet {
     constructor() {
         this.animations = [];
@@ -4296,6 +4346,8 @@ exports.RIGHT = RIGHT;
 exports.Refreshable = Refreshable;
 exports.Root = Root;
 exports.RotationAnimation = RotationAnimation;
+exports.RotationXAnimation = RotationXAnimation;
+exports.RotationYAnimation = RotationYAnimation;
 exports.ScaleAnimation = ScaleAnimation;
 exports.Scroller = Scroller;
 exports.SlideItem = SlideItem;

doric-js/index.d.ts

@@ -233,6 +233,11 @@ declare module 'doric/lib/src/ui/view' {
                 * In Y
                 */
             rotationY?: number;
+            /**
+                * Determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.
+                * Default is 200
+                */
+            perspective?: number;
             /**
                 * Only affected when its superview or itself is FlexLayout.
                 */
@@ -279,7 +284,7 @@ declare module 'doric/lib/src/ui/panel' {
 
 declare module 'doric/lib/src/ui/animation' {
     import { Modeling, Model } from "doric/lib/src/util/types";
-    export type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY";
+    export type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY" | "rotationX" | "rotationY";
     export enum RepeatMode {
             RESTART = 1,
             REVERSE = 2
@@ -387,6 +392,20 @@ declare module 'doric/lib/src/ui/animation' {
             set toRotation(v: number);
             get toRotation(): number;
     }
+    export class RotationXAnimation extends Animation {
+            constructor();
+            set fromRotation(v: number);
+            get fromRotation(): number;
+            set toRotation(v: number);
+            get toRotation(): number;
+    }
+    export class RotationYAnimation extends Animation {
+            constructor();
+            set fromRotation(v: number);
+            get fromRotation(): number;
+            set toRotation(v: number);
+            get toRotation(): number;
+    }
     export class AnimationSet implements IAnimation {
             delay?: number;
             addAnimation(anim: IAnimation): void;

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

@@ -1,5 +1,5 @@
 import { Modeling, Model } from "../util/types";
-export declare type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY";
+export declare type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY" | "rotationX" | "rotationY";
 export declare enum RepeatMode {
     RESTART = 1,
     REVERSE = 2
@@ -112,6 +112,22 @@ export declare class RotationAnimation extends Animation {
     set toRotation(v: number);
     get toRotation(): number;
 }
+export declare class RotationXAnimation extends Animation {
+    private rotationChaneable;
+    constructor();
+    set fromRotation(v: number);
+    get fromRotation(): number;
+    set toRotation(v: number);
+    get toRotation(): number;
+}
+export declare class RotationYAnimation extends Animation {
+    private rotationChaneable;
+    constructor();
+    set fromRotation(v: number);
+    get fromRotation(): number;
+    set toRotation(v: number);
+    get toRotation(): number;
+}
 export declare class AnimationSet implements IAnimation {
     private animations;
     private _duration;

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

@@ -192,6 +192,52 @@ export class RotationAnimation extends Animation {
         return this.rotationChaneable.toValue;
     }
 }
+export class RotationXAnimation extends Animation {
+    constructor() {
+        super();
+        this.rotationChaneable = {
+            key: "rotationX",
+            fromValue: 1,
+            toValue: 1,
+        };
+        this.changeables.set("rotationX", this.rotationChaneable);
+    }
+    set fromRotation(v) {
+        this.rotationChaneable.fromValue = v;
+    }
+    get fromRotation() {
+        return this.rotationChaneable.fromValue;
+    }
+    set toRotation(v) {
+        this.rotationChaneable.toValue = v;
+    }
+    get toRotation() {
+        return this.rotationChaneable.toValue;
+    }
+}
+export class RotationYAnimation extends Animation {
+    constructor() {
+        super();
+        this.rotationChaneable = {
+            key: "rotationY",
+            fromValue: 1,
+            toValue: 1,
+        };
+        this.changeables.set("rotationY", this.rotationChaneable);
+    }
+    set fromRotation(v) {
+        this.rotationChaneable.fromValue = v;
+    }
+    get fromRotation() {
+        return this.rotationChaneable.fromValue;
+    }
+    set toRotation(v) {
+        this.rotationChaneable.toValue = v;
+    }
+    get toRotation() {
+        return this.rotationChaneable.toValue;
+    }
+}
 export class AnimationSet {
     constructor() {
         this.animations = [];

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

@@ -116,6 +116,11 @@ export declare abstract class View implements Modeling {
      * In Y
      */
     rotationY?: number;
+    /**
+     * Determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.
+     * Default is 200
+     */
+    perspective?: number;
     /**----------transform----------*/
     /**
      * Only affected when its superview or itself is FlexLayout.

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

@@ -275,6 +275,10 @@ let View = /** @class */ (() => {
         Property,
         __metadata("design:type", Number)
     ], View.prototype, "rotationY", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Number)
+    ], View.prototype, "perspective", void 0);
     __decorate([
         Property,
         __metadata("design:type", Object)

doric-js/src/ui/animation.ts

@@ -16,7 +16,7 @@
 
 import { Modeling, Model } from "../util/types"
 
-export type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY"
+export type AnimatedKey = "translationX" | "translationY" | "scaleX" | "scaleY" | "rotation" | "pivotX" | "pivotY" | "rotationX" | "rotationY"
 
 export enum RepeatMode {
     RESTART = 1,
@@ -234,6 +234,60 @@ export class RotationAnimation extends Animation {
     }
 }
 
+export class RotationXAnimation extends Animation {
+    private rotationChaneable: Changeable = {
+        key: "rotationX",
+        fromValue: 1,
+        toValue: 1,
+    }
+    constructor() {
+        super()
+        this.changeables.set("rotationX", this.rotationChaneable)
+    }
+
+    set fromRotation(v: number) {
+        this.rotationChaneable.fromValue = v
+    }
+
+    get fromRotation() {
+        return this.rotationChaneable.fromValue
+    }
+
+    set toRotation(v: number) {
+        this.rotationChaneable.toValue = v
+    }
+
+    get toRotation() {
+        return this.rotationChaneable.toValue
+    }
+}
+export class RotationYAnimation extends Animation {
+    private rotationChaneable: Changeable = {
+        key: "rotationY",
+        fromValue: 1,
+        toValue: 1,
+    }
+    constructor() {
+        super()
+        this.changeables.set("rotationY", this.rotationChaneable)
+    }
+
+    set fromRotation(v: number) {
+        this.rotationChaneable.fromValue = v
+    }
+
+    get fromRotation() {
+        return this.rotationChaneable.fromValue
+    }
+
+    set toRotation(v: number) {
+        this.rotationChaneable.toValue = v
+    }
+
+    get toRotation() {
+        return this.rotationChaneable.toValue
+    }
+}
 export class AnimationSet implements IAnimation {
     private animations: IAnimation[] = []
     private _duration = 0

doric-js/src/ui/view.es5.ts

@@ -310,6 +310,12 @@ export abstract class View implements Modeling {
      */
     @Property
     rotationY?: number
+
+    /**
+     * Determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.
+     */
+    @Property
+    perspective?: number
     /**----------transform----------*/
 
     @Property

doric-js/src/ui/view.ts

@@ -311,6 +311,13 @@ export abstract class View implements Modeling {
      */
     @Property
     rotationY?: number
+
+    /**
+     * Determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.
+     * Default is 200
+     */
+    @Property
+    perspective?: number
     /**----------transform----------*/
     /**
      * Only affected when its superview or itself is FlexLayout.

doric-web/dist/index.js

@@ -1907,6 +1907,10 @@ let View = /** @class */ (() => {
         Property,
         __metadata("design:type", Number)
     ], View.prototype, "rotationY", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Number)
+    ], View.prototype, "perspective", void 0);
     __decorate([
         Property,
         __metadata("design:type", Object)
@@ -2661,6 +2665,52 @@ class RotationAnimation extends Animation {
         return this.rotationChaneable.toValue;
     }
 }
+class RotationXAnimation extends Animation {
+    constructor() {
+        super();
+        this.rotationChaneable = {
+            key: "rotationX",
+            fromValue: 1,
+            toValue: 1,
+        };
+        this.changeables.set("rotationX", this.rotationChaneable);
+    }
+    set fromRotation(v) {
+        this.rotationChaneable.fromValue = v;
+    }
+    get fromRotation() {
+        return this.rotationChaneable.fromValue;
+    }
+    set toRotation(v) {
+        this.rotationChaneable.toValue = v;
+    }
+    get toRotation() {
+        return this.rotationChaneable.toValue;
+    }
+}
+class RotationYAnimation extends Animation {
+    constructor() {
+        super();
+        this.rotationChaneable = {
+            key: "rotationY",
+            fromValue: 1,
+            toValue: 1,
+        };
+        this.changeables.set("rotationY", this.rotationChaneable);
+    }
+    set fromRotation(v) {
+        this.rotationChaneable.fromValue = v;
+    }
+    get fromRotation() {
+        return this.rotationChaneable.fromValue;
+    }
+    set toRotation(v) {
+        this.rotationChaneable.toValue = v;
+    }
+    get toRotation() {
+        return this.rotationChaneable.toValue;
+    }
+}
 class AnimationSet {
     constructor() {
         this.animations = [];
@@ -4219,6 +4269,8 @@ exports.RIGHT = RIGHT;
 exports.Refreshable = Refreshable;
 exports.Root = Root;
 exports.RotationAnimation = RotationAnimation;
+exports.RotationXAnimation = RotationXAnimation;
+exports.RotationYAnimation = RotationYAnimation;
 exports.ScaleAnimation = ScaleAnimation;
 exports.Scroller = Scroller;
 exports.SlideItem = SlideItem;