tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add perspective for rotattionX and rotationY

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
doric-android/doric/src/main/java/pub/doric/shader/ViewNode.java
View File

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

30
doric-demo/src/ComplicatedAnimations.ts
View File

@ -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
})
],
{

3
doric-iOS/Pod/Classes/Plugin/DoricPromise.m
View File

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

25
doric-iOS/Pod/Classes/Shader/DoricViewNode.m
View File

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

74
doric-js/bundle/doric-lib.es5.js
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;

52
doric-js/bundle/doric-lib.js
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;

52
doric-js/bundle/doric-vm.js
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;

18
doric-js/lib/src/ui/animation.d.ts vendored
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;

46
doric-js/lib/src/ui/animation.js
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 = [];

5
doric-js/lib/src/ui/view.d.ts vendored
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.

4
doric-js/lib/src/ui/view.js
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)

56
doric-js/src/ui/animation.ts
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

6
doric-js/src/ui/view.es5.ts
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

7
doric-js/src/ui/view.ts
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.

52
doric-web/dist/index.js vendored
View File

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

2
doric-web/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long