《HarmonyOS应用开发基础》 课件知识点2-14-2 显示动画.pptx

显示动画

显示动画概述提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。接口描述：animateTo(value:AnimateParam,event:()=void):void

显示动画的参数参数说明：参数名参数类型必填参数描述valueAnimateParam是设置动画效果相关参数。event()=void是指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。

显示动画的参数AnimateParam对象说明：名称类型描述durationnumber动画持续时间，单位为毫秒。默认值：1000temponumber动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。默认值：1.0curveCurve动画曲线。默认值：Curve.Lineardelaynumber单位为ms(毫秒)，默认不延时播放。默认值：0iterationsnumber默认播放一次，设置为-1时表示无限次播放。默认值：1playModePlayMode设置动画播放模式，默认播放完成后重头开始播放。默认值：PlayMode.NormalonFinish()=void动效播放完成回调。

显示动画使用示例1-改变宽高?@State?widthSize:?number?=?250?@State?heightSize:?number?=?100??private?flag:?boolean?=?true...省略代码Button(change?width?and?height)??.width(this.widthSize).height(this.heightSize).margin(30)??.onClick(()?=?{????if?(this.flag)?{??????animateTo({????????duration:?2000,????????curve:?Curve.EaseOut,????????iterations:?3,????????playMode:?PlayMode.Normal,????????onFinish:?()?=?{??????????console.info(play?end)????????}??????},?()?=?{????????this.widthSize?=?100????????this.heightSize?=?50??????})????}?else?{??????animateTo({},?()?=?{????????this.widthSize?=?250????????this.heightSize?=?100??????})????}????this.flag?=?!this.flag??})})

显示动画使用示例2-旋转@State?rotateAngle:?number?=?0...省略代码Button(change?rotate?angle)??.margin(50)??.rotate({?x:?0,?y:?0,?z:?1,?angle:?this.rotateAngle?})??.onClick(()?=?{????animateTo({??????duration:?1200,??????curve:?Curve.Friction,??????delay:?500,??????iterations:?-1,?//?设置-1表示动画无限循环??????playMode:?PlayMode.AlternateReverse,??????onFinish:?()?=?{????????console.info(play?end)??????}????},?()?=?{??????this.rotateAngle?=?90????})??})