add perspective for rotattionX and rotationY
This commit is contained in:
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
|
21
doric-js/index.d.ts
vendored
21
doric-js/index.d.ts
vendored
@@ -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;
|
||||
|
18
doric-js/lib/src/ui/animation.d.ts
vendored
18
doric-js/lib/src/ui/animation.d.ts
vendored
@@ -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;
|
||||
|
@@ -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 = [];
|
||||
|
5
doric-js/lib/src/ui/view.d.ts
vendored
5
doric-js/lib/src/ui/view.d.ts
vendored
@@ -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.
|
||||
|
@@ -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)
|
||||
|
@@ -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
|
||||
|
@@ -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
|
||||
|
@@ -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.
|
||||
|
Reference in New Issue
Block a user