中国建设银行贵州省分行网站,大站网站建设,百度推广步骤,京东网站推广方式目录
1 - 动画动效
1.1 - 创建动画对象
1.2 - 添加动画事件和调用接口
2 - 动画帧
2.1 - 请求动画帧
2.2 - 取消动画帧 1 - 动画动效
通过设置插值器来实现动画效果。
说明
从API Version 6 开始支持。
1.1 - 创建动画对象
通过cre…目录
1 - 动画动效
1.1 - 创建动画对象
1.2 - 添加动画事件和调用接口
2 - 动画帧
2.1 - 请求动画帧
2.2 - 取消动画帧 1 - 动画动效
通过设置插值器来实现动画效果。
说明
从API Version 6 开始支持。
1.1 - 创建动画对象
通过createAnimator创建一个动画对象通过设置参数options来设置动画的属性。
!-- test.hml --
div classcontainerdiv stylewidth: 300px;height: 300px;margin-top: 100px;background: linear-gradient(pink, purple);transform: translate({{translateVal}});/divdiv classrowbutton typecapsule valueplay onclickplayAnimation/button/div
/div
/* test.css */
.container {width:100%;height:100%;flex-direction: column;align-items: center;justify-content: center;
}
button{width: 200px;
}
.row{width: 65%;height: 100px;align-items: center;justify-content: space-between;margin-top: 50px;margin-left: 260px;
}
/* test.js */
import animator from ohos.animator;
export default {data: {translateVal: 0,animation: null},onInit() {},onShow(){var options {duration: 3000,easing:friction,delay:1000,fill: forwards,direction:alternate,iterations: 2,begin: 0,end: 180};//设置参数this.animation animator.createAnimator(options)//创建动画},playAnimation() {var _this this;this.animation.onframe function(value) {_this.translateVal value};this.animation.play();}
} 说明 使用createAnimator创建动画对象时必须传入options参数。 begin插值起点不设置时默认为0。 end插值终点不设置时默认为1。
1.2 - 添加动画事件和调用接口
animator支持事件和接口可以通过添加frame、cancel、repeat、finish事件和调用update、play、pause、cancel、reverse、finish接口自定义动画效果。animator支持的事件和接口具体见动画中的createAnimator。
!-- test.hml --
div styleflex-direction: column;align-items: center;width: 100%;height: 100%;div stylewidth:200px;height: 200px;margin-top: 100px;background: linear-gradient(#b30d29, #dcac1b);transform: scale({{scaleVal}});/divdiv stylewidth: {{DivWidth}};height: {{DivHeight}};margin-top: 200px;background: linear-gradient(pink, purple);margin-top: 200px;transform:translateY({{translateVal}});/divdiv classrowbutton typecapsule valueplay onclickplayAnimation/buttonbutton typecapsule valueupdate onclickupdateAnimation/button/divdiv classrow1button typecapsule valuepause onclickpauseAnimation/buttonbutton typecapsule valuefinish onclickfinishAnimation/button/divdiv classrow2button typecapsule valuecancel onclickcancelAnimation/buttonbutton typecapsule valuereverse onclickreverseAnimation/button/div
/div
/* test.css */
button{width: 200px;
}
.row{width: 65%;height: 100px;align-items: center;justify-content: space-between;margin-top: 150px;position: fixed;top: 52%;left: 120px;
}
.row1{width: 65%;height: 100px;align-items: center;justify-content: space-between;margin-top: 120px;position: fixed;top: 65%;left: 120px;
}
.row2{width: 65%;height: 100px;align-items: center;justify-content: space-between;margin-top: 100px;position: fixed;top: 75%;left: 120px;
}
/* test.js */
import animator from ohos.animator;
import prompt from system.prompt;
export default {data: {scaleVal:1,DivWidth:200,DivHeight:200,translateVal:0,animation: null},onInit() {var options {duration: 3000,fill: forwards,begin: 200,end: 270};this.animation animator.createAnimator(options);},onShow() {var _this this;//添加动画重放事件this.animation.onrepeat function() {prompt.showToast({message: repeat});var repeatoptions {duration: 2000,iterations: 1,direction: alternate,begin: 180,end: 240};_this.animation.update(repeatoptions);_this.animation.play();};},playAnimation() {var _this this;//添加动画逐帧插值回调事件this.animation.onframe function(value) {_this. scaleVal value/150,_this.DivWidth value,_this.DivHeight value,_this.translateVal value-180};this.animation.play();},updateAnimation() {var newoptions {duration: 5000,iterations: 2,begin: 120,end: 180};this.animation.update(newoptions);this.animation.play();//调用动画播放接口},pauseAnimation() {this.animation.pause();//调用动画暂停接口},finishAnimation() {var _this this;//添加动画完成事件this.animation.onfinish function() {prompt.showToast({message: finish})};this.animation.finish(); //调用动画完成接口},cancelAnimation() {this.animation.cancel(); //调用动画取消接口},reverseAnimation() {this.animation.reverse(); //调用动画倒放接口}
} 说明
在调用update接口的过程中可以使用这个接口更新动画参数入参与createAnimator一致。
2 - 动画帧
2.1 - 请求动画帧
请求动画帧时通过requestAnimationFrame函数逐帧回调在调用该函数时传入一个回调函数。
runframe在调用requestAnimationFrame时传入带有timestamp参数的回调函数step将step中的timestamp赋予起始的startTime。当timestamp与startTime的差值小于规定的时间时将再次调用requestAnimationFrame最终动画将会停止。
!-- test.hml --
div classcontainertabs onchangechangecontenttab-contentdiv classcontainerstack stylewidth: 300px;height: 300px;margin-top: 100px;margin-bottom: 100px;canvas idmycanvas stylewidth: 100%;height: 100%;background-color: coral;/canvasdiv stylewidth: 50px;height: 50px;border-radius: 25px;background-color: indigo;position: absolute;left: {{left}};top: {{top}};/div/stackbutton typecapsule valueplay onclickrunframe/button/div/tab-content/tabs
/div
/* test.css */
.container {flex-direction: column;justify-content: center;align-items: center;width: 100%;height: 100%;
}
button{width: 300px;
}
/* test.js */
export default {data: {timer: null,left: 0,top: 0,flag: true,animation: null,startTime: 0,},onShow() {var test this.$element(mycanvas);var ctx test.getContext(2d);ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(300, 300);ctx.lineWidth 5;ctx.strokeStyle red;ctx.stroke();},runframe() {this.left 0;this.top 0;this.flag true;this.animation requestAnimationFrame(this.step);},step(timestamp) {if (this.flag) {this.left 5;this.top 5;if (this.startTime 0) {this.startTime timestamp;}var elapsed timestamp - this.startTime;if (elapsed 500) {console.log(callback step timestamp: timestamp);this.animation requestAnimationFrame(this.step);}} else {this.left - 5;this.top - 5;this.animation requestAnimationFrame(this.step);}if (this.left 250 || this.left 0) {this.flag !this.flag}},onDestroy() {cancelAnimationFrame(this.animation);}
} 说明
requestAnimationFrame函数在调用回调函数时在第一个参数位置传入timestamp时间戳表示requestAnimationFrame开始去执行回调函数的时刻。
2.2 - 取消动画帧
通过cancelAnimationFrame函数取消逐帧回调在调用cancelAnimationFrame函数时取消requestAnimationFrame函数的请求。
!-- test.hml --
div classcontainertabs onchangechangecontenttab-contentdiv classcontainerstack stylewidth: 300px;height: 300px;margin-top: 100px;margin-bottom: 100px;canvas idmycanvas stylewidth: 100%;height: 100%;background-color: coral;/canvasdiv stylewidth: 50px;height: 50px;border-radius: 25px;background-color: indigo;position: absolute;left: {{left}};top: {{top}};/div/stackbutton typecapsule valueplay onclickrunframe/button/div/tab-content/tabs
/div
/* test.css */
.container {flex-direction: column;justify-content: center;align-items: center;width: 100%;height: 100%;
}
button{width: 300px;
}
/* test.js */
export default {data: {timer: null,left: 0,top: 0,flag: true,animation: null},onShow() {var test this.$element(mycanvas);var ctx test.getContext(2d);ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(300, 300);ctx.lineWidth 5;ctx.strokeStyle red;ctx.stroke();},runframe() {this.left 0;this.top 0;this.flag true;this.animation requestAnimationFrame(this.step);},step(timestamp) {if (this.flag) {this.left 5;this.top 5;this.animation requestAnimationFrame(this.step);} else {this.left - 5;this.top - 5;this.animation requestAnimationFrame(this.step);}if (this.left 250 || this.left 0) {this.flag !this.flag}},onDestroy() {cancelAnimationFrame(this.animation);}
} 说明
在调用该函数时需传入一个具有标识id的参数。 感谢各位大佬支持
互三啦
