属性动画的使用 1.属性动画,是最为基础的动画,其功能强大、使用场景多,应用范围较广。常用于如下场景中: 一、页面布局发生变化。例如添加、删除部分组件元素。 二、页面元素的可见性和位置发生变化。例如显示或者隐藏部分元素,或者将部分元素从一端移动到另外一端。 三、页面中图形图片元素动起来。例如使页面中的静态图片动起来。 简单来说,属性动画是组件的通用属性发生改变时而产生的属性渐变效果。如下图所示,其原理是,当组件的通用属性发生改变时,组件状态由初始状态逐渐变 为结束状态的过程中,会创建多个连续的中间状态,逐帧播放后,就会形成属性渐变效果,从而形成动画。 属性动画的使用方式也非常简单,只需要给组件(包括基础组件和容器组件)添加animation属性,并设置好参数,如下代码所示: Image($r('app.media.image1')) .animation({ duration: 1000, tempo: 1.0, delay: 0, curve: Curve.Linear, playMode: PlayMode.Normal, iterations: 1 }) 2 创建属性动画页面 1、animation属性作用域。animation自身也是组件的一个属性,其作用域为animation之前。即产生属性动画的属性须在animation之前声明,其后声明的将不会产生属性动画。以示例中的五个图标动画为例,我们期望产生动画的属性为Image组件的width属性,故该属性width需在animation属性之前声明。如果将该属性width在animation之后声明,则不会产生动画效果。 2、产生属性动画的属性变化时需触发UI状态更新。在本示例中,产生动画的属性width,其值是通过变量iconWidth从30变为100,故该变量iconWidth的改变需触发UI状态更新。 3、产生属性动画的属性本身需满足一定的要求,并非任何属性都可以产生属性动画。目前支持的属性包括width、height、position、opacity、backgroundColor、scale、rotate、translate等 duration number 1000 动画时长,单位为毫秒,默认时长为1000毫秒。 tempo number 1.0 动画的播放速度,值越大动画播放越快,值越小播放越慢,为0时无动画效果。 curve Curve Curve.Linear动画变化曲线,默认曲线为线性。 delay number 0 延时播放时间,单位为毫秒,默认不延时播放。 iterations number 1 播放次数,默认一次,设置为-1时表示无限次播放。 playMode PlayMode PlayMode.Normal 设置动画播放模式,默认播放完成后重头开始播放。 onFinish function - 动画播放结束时回调该函数。 其中变化曲线curve枚举值为: Linear表示动画从头到尾的速度都是相同的。 Ease表示动画以低速开始,然后加快,在结束前变慢,CubicBezier(0.25, 0.1, 0.25, 1.0)。 EaseIn表示动画以低速开始,CubicBezier(0.42, 0.0, 1.0, 1.0)。 EaseOut表示动画以低速结束,CubicBezier(0.0, 0.0, 0.58, 1.0)。 EaseInOut表示动画以低速开始和结束,CubicBezier(0.42, 0.0, 0.58, 1.0)。 FastOutSlowIn标准曲线,cubic-bezier(0.4, 0.0, 0.2, 1.0)。 LinearOutSlowIn减速曲线,cubic-bezier(0.0, 0.0, 0.2, 1.0)。 FastOutLinearIn加速曲线,cubic-bezier(0.4, 0.0, 1.0, 1.0)。 ExtremeDeceleration急缓曲线,cubic-bezier(0.0, 0.0, 0.0, 1.0)。 Sharp锐利曲线,cubic-bezier(0.33, 0.0, 0.67, 1.0)。 Rhythm节奏曲线,cubic-bezier(0.7, 0.0, 0.2, 1.0)。 Smooth平滑曲线,cubic-bezier(0.4, 0.0, 0.4, 1.0)。 Friction阻尼曲线,CubicBezier(0.2, 0.0, 0.2, 1.0)。 播放模式playMode枚举值为: Normal 动画按正常播放。 Reverse 动画反向播放。 Alternate 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。 AlternateReverse 动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放 onFinish回调函数的使用 参数onFinish与参数iterations有关。当参数iterations播放结束时,会调用onFinish函数来进行后续的业务处理。例如提示动画播放结束。 Image(iconItem.imgRes) .width(this.iconWidth) .position({ x: iconItem.posX }) .objectFit(ImageFit.Contain) .animation({ duration: 2000, tempo: 3.0, delay: iconItem.delay, curve: Curve.Linear, playMode: PlayMode.Normal, iterations: 1, onFinish: () => { prompt.showToast({ message:"动画播放结束!!!" }) } }) @Consume监听其值的变化