From 444dbe5d943fbbcdb0f36f7f4a2e288ba1598f9a Mon Sep 17 00:00:00 2001 From: "zxs.zl" Date: Tue, 15 Jun 2021 19:45:43 +0800 Subject: [PATCH] =?UTF-8?q?0.1.0=20=20=E6=9B=B4=E6=96=B0transform=20demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/demo/TransformPage.ts | 253 +++++++++++++++++++++++++---- src/zlkit/zlview/ZLCSSAnimation.ts | 9 +- src/zlkit/zlview/ZLUIDef.ts | 6 +- src/zlkit/zlview/ZLView.ts | 14 +- 4 files changed, 244 insertions(+), 38 deletions(-) diff --git a/src/demo/TransformPage.ts b/src/demo/TransformPage.ts index b39ad66..1ba0864 100644 --- a/src/demo/TransformPage.ts +++ b/src/demo/TransformPage.ts @@ -8,26 +8,100 @@ export class TransformPage extends zl.ViewPage super.viewDidLoad?.(); let transView = new zl.View(); this.view.addSubview(transView); + + let startTransform = new zl.Transform(); if(true) { - transView.width = 150; - transView.height = 150; + // https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective + transView.backgroudColor = "rgb(240,230,210,0.2)"; + transView.width = 200; + transView.height = 200; transView.center = this.view.center; - transView.backgroudColor = "yellow"; - - let shadow = new zl.BoxShadow(); - shadow.blur = 10; - shadow.hShadow = 15; - shadow.vShadow = 15; - transView.boxShadow = shadow; - - let lb = new zl.Label(); - lb.text = "ZLView"; - let sz = lb.sizeThatWidthHeight(100,100); - lb.width = sz.width; - lb.height = sz.height; - lb.backgroudColor = "red"; - transView.addSubview(lb); + startTransform.backfaceVisibility = true; + startTransform.perspectiveOrigin(1.5,1.5); + startTransform.preserve3d = true; + startTransform.perspective(250); + transView.transform = startTransform; + + let font = new zl.Font(50,"sans-serif"); + + let tr = new zl.Transform(); + tr.translateZ(50); + let face_front = new zl.Label(); + face_front.width = 100; + face_front.height = 100; + face_front.textAlign = zl.TextAlignMode.Center; + face_front.text = "A"; + face_front.font = font; + face_front.color = "white"; + face_front.backgroudColor = "rgba(0, 0, 0, 0.3)"; + face_front.transform = tr; + transView.addSubview(face_front); + + tr = new zl.Transform(); + tr.translateZ(50); + tr.rotateY(Math.PI); + let face_back = new zl.Label(); + face_back.setFrameSameAs(face_front); + face_back.textAlign = zl.TextAlignMode.Center; + face_back.text = "B"; + face_back.font = font; + face_back.color = "black"; + face_back.backgroudColor = "rgba(0, 255, 0, 0.6)"; + face_back.transform = tr; + transView.addSubview(face_back); + + tr = new zl.Transform(); + tr.translateZ(50); + tr.rotateY(Math.PI/2); + let face_right = new zl.Label(); + face_right.setFrameSameAs(face_front); + face_right.textAlign = zl.TextAlignMode.Center; + face_right.text = "C"; + face_right.font = font; + face_right.color = "white"; + face_right.backgroudColor = "rgba(196, 0, 0, 0.7)"; + face_right.transform = tr; + transView.addSubview(face_right); + + tr = new zl.Transform(); + tr.translateZ(50); + tr.rotateY(-Math.PI/2); + let face_left = new zl.Label(); + face_left.setFrameSameAs(face_front); + face_left.textAlign = zl.TextAlignMode.Center; + face_left.text = "D"; + face_left.font = font; + face_left.color = "white"; + face_left.backgroudColor = "rgba(0, 0, 196, 0.7)"; + face_left.transform = tr; + transView.addSubview(face_left); + + tr = new zl.Transform(); + tr.translateZ(50); + tr.rotateX(Math.PI/2); + let face_top = new zl.Label(); + face_top.setFrameSameAs(face_front); + face_top.textAlign = zl.TextAlignMode.Center; + face_top.text = "E"; + face_top.font = font; + face_top.color = "white"; + face_top.backgroudColor = "rgba(196, 196, 0, 0.7)"; + face_top.transform = tr; + transView.addSubview(face_top); + + tr = new zl.Transform(); + tr.translateZ(50); + tr.rotateX(-Math.PI/2); + let face_bottom = new zl.Label(); + face_bottom.setFrameSameAs(face_front); + face_bottom.textAlign = zl.TextAlignMode.Center; + face_bottom.text = "F"; + face_bottom.font = font; + face_bottom.color = "white"; + face_bottom.backgroudColor = "rgba(196, 0, 196, 0.7)"; + face_bottom.transform = tr; + transView.addSubview(face_bottom); } let btn = new zl.Button(); @@ -38,6 +112,8 @@ export class TransformPage extends zl.ViewPage btn.width = 80; btn.height = 20; btn.onClick = ()=>{ + transView.transform = startTransform; + let trans = new zl.Transform(); trans.translate(100,100); transView.cssAnimation({ @@ -56,7 +132,8 @@ export class TransformPage extends zl.ViewPage btn.setFrameSameAs(view); btn.left = view.right + 10; btn.onClick = ()=>{ - transView.transform?.resumeIdentityMatrix(); + transView.transform = startTransform; + let trans = new zl.Transform(); trans.rotate(45/Math.PI); transView.cssAnimation({ @@ -75,7 +152,8 @@ export class TransformPage extends zl.ViewPage btn.setFrameSameAs(view); btn.left = view.right + 10; btn.onClick = ()=>{ - transView.transform?.resumeIdentityMatrix(); + transView.transform = startTransform; + let trans = new zl.Transform(); trans.skew(75/Math.PI,75/Math.PI); transView.cssAnimation({ @@ -90,13 +168,35 @@ export class TransformPage extends zl.ViewPage view = btn; btn = new zl.Button(); this.view.addSubview(btn); - btn.title = "reflect2d"; + btn.title = "translateX"; + btn.setFrameSameAs(view); + btn.left = 10; + btn.top = view.bottom + 10; + btn.onClick = ()=>{ + transView.transform = startTransform; + + let trans = new zl.Transform(); + trans.translateX(100); + transView.cssAnimation({ + to:()=>{ + transView.transform = trans; + }, + duration:3000, + iterationCount:"infinite" + }); + }; + + view = btn; + btn = new zl.Button(); + this.view.addSubview(btn); + btn.title = "translateY"; btn.setFrameSameAs(view); btn.left = view.right + 10; btn.onClick = ()=>{ - transView.transform?.resumeIdentityMatrix(); + transView.transform = startTransform; + let trans = new zl.Transform(); - trans.reflectX(true); + trans.translateY(100); transView.cssAnimation({ to:()=>{ transView.transform = trans; @@ -106,6 +206,36 @@ export class TransformPage extends zl.ViewPage }); }; + view = btn; + btn = new zl.Button(); + this.view.addSubview(btn); + btn.title = "translateZ"; + btn.setFrameSameAs(view); + btn.left = view.right + 10; + btn.onClick = ()=>{ + transView.transform = startTransform; + + let sub = transView.subViews?.getElementAt(0); + if (sub) + { + let old = sub.transform; + + let trans = new zl.Transform(); + trans.translateZ(-100); + sub.cssAnimation({ + to:()=>{ + sub!.transform = trans; + }, + duration:3000, + iterationCount:"infinite", + end:()=>{ + sub!.transform = old; + sub!.refresh(); + } + }); + } + }; + view = btn; btn = new zl.Button(); this.view.addSubview(btn); @@ -114,7 +244,8 @@ export class TransformPage extends zl.ViewPage btn.left = 10; btn.top = view.bottom + 10; btn.onClick = ()=>{ - transView.transform?.resumeIdentityMatrix(); + transView.transform = startTransform; + let trans = new zl.Transform(); trans.rotateX(Math.PI/4); transView.cssAnimation({ @@ -133,7 +264,8 @@ export class TransformPage extends zl.ViewPage btn.setFrameSameAs(view); btn.left = view.right + 10; btn.onClick = ()=>{ - transView.transform?.resumeIdentityMatrix(); + transView.transform = startTransform; + let trans = new zl.Transform(); trans.rotateY(Math.PI/4); transView.cssAnimation({ @@ -152,7 +284,8 @@ export class TransformPage extends zl.ViewPage btn.setFrameSameAs(view); btn.left = view.right + 10; btn.onClick = ()=>{ - transView.transform?.resumeIdentityMatrix(); + transView.transform = startTransform; + let trans = new zl.Transform(); trans.rotateZ(Math.PI/4); transView.cssAnimation({ @@ -172,7 +305,8 @@ export class TransformPage extends zl.ViewPage btn.left = 10; btn.top = view.bottom + 10; btn.onClick = ()=>{ - transView.transform?.resumeIdentityMatrix(); + transView.transform = startTransform; + let trans = new zl.Transform(); trans.skewX(Math.PI/4); transView.cssAnimation({ @@ -191,7 +325,8 @@ export class TransformPage extends zl.ViewPage btn.setFrameSameAs(view); btn.left = view.right + 10; btn.onClick = ()=>{ - transView.transform?.resumeIdentityMatrix(); + transView.transform = startTransform; + let trans = new zl.Transform(); trans.skewY(Math.PI/4); transView.cssAnimation({ @@ -210,7 +345,8 @@ export class TransformPage extends zl.ViewPage btn.setFrameSameAs(view); btn.left = view.right + 10; btn.onClick = ()=>{ - transView.transform?.resumeIdentityMatrix(); + transView.transform = startTransform; + let trans = new zl.Transform(); trans.skew3d(0,0,0,0,Math.PI/3 ,Math.PI/4) transView.cssAnimation({ @@ -221,6 +357,67 @@ export class TransformPage extends zl.ViewPage iterationCount:"infinite" }); }; + + view = btn; + btn = new zl.Button(); + this.view.addSubview(btn); + btn.title = "reflectX"; + btn.setFrameSameAs(view); + btn.left = 10; + btn.top = view.bottom + 10; + btn.onClick = ()=>{ + transView.transform = startTransform; + + let trans = new zl.Transform(); + trans.reflectX(true); + transView.cssAnimation({ + to:()=>{ + transView.transform = trans; + }, + duration:3000, + iterationCount:"infinite" + }); + }; + + view = btn; + btn = new zl.Button(); + this.view.addSubview(btn); + btn.title = "reflectY"; + btn.setFrameSameAs(view); + btn.left = view.right + 10; + btn.onClick = ()=>{ + transView.transform = startTransform; + + let trans = new zl.Transform(); + trans.reflectY(true); + transView.cssAnimation({ + to:()=>{ + transView.transform = trans; + }, + duration:3000, + iterationCount:"infinite" + }); + }; + + view = btn; + btn = new zl.Button(); + this.view.addSubview(btn); + btn.title = "reflectZ"; + btn.setFrameSameAs(view); + btn.left = view.right + 10; + btn.onClick = ()=>{ + transView.transform = startTransform; + + let trans = new zl.Transform(); + trans.reflectZ(true); + transView.cssAnimation({ + to:()=>{ + transView.transform = trans; + }, + duration:3000, + iterationCount:"infinite" + }); + }; } viewDidMount() { diff --git a/src/zlkit/zlview/ZLCSSAnimation.ts b/src/zlkit/zlview/ZLCSSAnimation.ts index c7a8ae5..87462af 100644 --- a/src/zlkit/zlview/ZLCSSAnimation.ts +++ b/src/zlkit/zlview/ZLCSSAnimation.ts @@ -16,6 +16,7 @@ export class ZLCSSAnimation extends ZLObject super(); this.__keyFrames__ = keyFrames; this.__is_css_created__ = false; + this.__is_end__ = false; this.__zl_view__ = new WeakRef(view); view.addListenViewWillRender(this.__onViewWillRender__,this); @@ -63,7 +64,7 @@ export class ZLCSSAnimation extends ZLObject } return `${name} ${duration}ms ${timingFunction} ${delay}ms ${iterationCount} ${direction}`; } - public onViewReactRefCallback? : ()=>void; + public get isEnd () { return this.__is_end__;} private __onViewWillRender__ = ()=> { @@ -81,7 +82,6 @@ export class ZLCSSAnimation extends ZLObject e.addEventListener("animationstart",this.__onViewAnimationStart__); } } - this.onViewReactRefCallback?.(); } private __onViewWillUnmount__ = () => @@ -104,6 +104,7 @@ export class ZLCSSAnimation extends ZLObject private clearresource() { + this.__is_end__ = true; if (this.__zl_view__) { this.removeCSS(); @@ -186,6 +187,7 @@ export class ZLCSSAnimation extends ZLObject } } + private __is_end__: boolean; private __is_css_created__ : boolean; private __keyFrames__ : ZLCSSAnimationKeyFrame[]; private __zl_view__? : WeakRef; @@ -315,7 +317,8 @@ export class ZLCSSAnimationKeyFrame } } else { ///此处为了使动画过程中的transform状态不完全相同 - s += `transform:none;`; + // s += "transform:matrix(1,0,0,1,0,0);"; + s += "transform:none;"; } this.__key_frame_str__ = `${this.progress}% {${s}}`; } diff --git a/src/zlkit/zlview/ZLUIDef.ts b/src/zlkit/zlview/ZLUIDef.ts index de3099a..c1e43a0 100644 --- a/src/zlkit/zlview/ZLUIDef.ts +++ b/src/zlkit/zlview/ZLUIDef.ts @@ -458,8 +458,8 @@ export class ZLTransform } /** * 指定了观察者的位置，用作 perspective 属性的消失点 - * @param x 指定消失点的横坐标 取值范围[0,1] - * @param y 指定消失点的纵坐标 取值范围[0,1] + * @param x 指定消失点的横坐标 最终将转换为百分数(x * 100)% + * @param y 指定消失点的纵坐标 最终将转换为百分数(y * 100)% */ public perspectiveOrigin(x:number,y:number) { @@ -606,7 +606,7 @@ export class ZLTransform } if(this._pz) { - style.perspective = this._pz.toString(); + style.perspective = this._pz.toString() + ZLCurrentSizeUnit; if (this._pox) { let x = (this._pox*100).toString().split(".")[0]; diff --git a/src/zlkit/zlview/ZLView.ts b/src/zlkit/zlview/ZLView.ts index 4d5f87e..9dd4688 100644 --- a/src/zlkit/zlview/ZLView.ts +++ b/src/zlkit/zlview/ZLView.ts @@ -327,10 +327,8 @@ export class ZLView extends ZLObject an.params = p; let style = this.__zl_cssStyle__; - an.onViewReactRefCallback = ()=>{ - this.__zl_cssStyle__.animation = undefined; - } style.animation = an.toAnimationStr(); + this.__zl_animation__ = new WeakRef(an); this.refresh(); } @@ -450,6 +448,14 @@ export class ZLView extends ZLObject if (this.y !== undefined) { style.top = this.y.toString()+ ZLCurrentSizeUnit; } + // 动画处理 + let zlAn = this.__zl_animation__?.deref(); + if (zlAn && zlAn.isEnd === false){ + ; + } else { + style.animation = undefined; + this.__zl_animation__ = undefined; + } // 获取Dom的回调 let refCb = undefined; let OnRefCallbackMap = this.__zl_lifeCycleEventCblist__?.getEventCallbackList(ZLViewEventName.OnRefCallback); @@ -531,7 +537,7 @@ export class ZLView extends ZLObject private __zl_cssStyle__: CSSProperties; private __zl_boxShadow__?:ZLBoxShadow; private __zl_transform__?:ZLTransform; - + private __zl_animation__?:WeakRef; ///padding border private __zl_padding__? :ZLEdgeInset; private __zl_borderWidth__? : number;