add perspective for rotattionX and rotationY

This commit is contained in:
pengfei.zhou
2020-06-03 14:53:32 +08:00
committed by osborn
parent c14ec1954e
commit 9b181830fc
17 changed files with 449 additions and 26 deletions

View File

@@ -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;

View File

@@ -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;

View File

@@ -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
View File

@@ -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;

View File

@@ -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;

View File

@@ -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 = [];

View File

@@ -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.

View File

@@ -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)

View File

@@ -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

View File

@@ -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

View File

@@ -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.