第11次课 动画-属性动画与显式动画

《鸿蒙应用安全开发》在线开放课程项目3设计闹钟程序-动画主讲：本课程团队目录Contents项目3设计闹钟程序-动画一、项目导入二、属性动画三、显式动画四、总结与实践一、

项目导入云林科技为了更好地服务员工，将上线一款可以独立使用的在线提醒程序，因此需开发一个闹钟程序，公司经理把任务交给技术部黎工程师来完成，并提出如下需求：首先要有美观的界面，可以方便进行各种操作；其次，要有扩展性，后期可以嵌入公司APP；第三，使用方便，只需手机就可参与。闹钟程序界面设计如图所示。1.2、

动画概念动画是指在一段时间内多次改变用户界面（UserInterface，UI）外观。由于人眼会产生视觉暂留，所以最终看到的就是一个“连续”的画面。UI的一次改变称为一个动画帧，对应一次屏幕刷新，而决定动画流畅度的一个重要指标就是帧率（FramePerSecond，FPS），即每秒的动画帧数，帧率越高则动画就会越流畅。动画可按基础能力分为属性动画、显式动画、转场动画三种。二、

属性动画属性动画是因组件的某些通用属性变化而引起的渐变过渡效果，从而提升了用户体验。属性动画支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。其可选参数如下。duration：设置动画时长，其默认值为1000，单位为毫秒。tempo：动画播放速度。该数值越大，动画播放速度越快。值为0时，表示动画不存在。其默认值为1。curve：设置动画曲线，其默认值为Curve.EaseInOut（平滑的动画曲线）。delay：设置动画延迟执行的时长，其默认值为0，单位为毫秒，取值范围：[0,+∞)。iterations：设置播放次数，其默认值为1，取值范围：[-1,+∞)。当它设置为-1时表示无限次播放，设置为0时表示无动画效果。playMode：设置动画播放模式，默认播放完成后重头开始播放，其默认值为PlayMode.Normal。onFinish：状态回调，动画播放完成时触发。当iterations设置为-1时，动画效果无限循环不会停止，所以不会触发此回调。2.1、属性动画实例实例-通过改变组件的大小实现//AttrAnimationExam.etsbuild(){Column(){Button('改变大小').onClick(()=>{if(this.flag){this.widthSize=150this.heightSize=60}else{this.widthSize=250this.heightSize=100}this.flag=!this.flag})

.margin(30).width(this.widthSize).height(this.heightSize).animation({duration:2000,curve:Curve.EaseOut,iterations:3,playMode:PlayMode.Normal})2.1、属性动画实例实例-通过改变旋转角度来实现实现Button('改变旋转角度').onClick(()=>{this.rotateAngle=1080}).margin(50).rotate({angle:this.rotateAngle}).animation({duration:1200,curve:Curve.Friction,delay:500,iterations:-1,//设置-1表示动画无限循环playMode:PlayMode.Alternate})}.width('100%').margin({top:20})}三、

显式动画显式动画是由闭包内的变化而触发的动画，这些变化包括由数据变化引起的组件的增删、组件属性的变化等。显式动画可以做较为复杂的动画其接口如下：animateTo(value:AnimateParam,event:()=>void):void其必填参数：Value：类型为AnimateParam对象，设置动画效果相关参数。event：指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。AnimateParam对象，与属性动画的可选参数类似。3.1、显式动画实例实例-同时改变按钮的大小和旋转角度

build(){Row(){Column(){Button('同时更改大小和旋转角度').width(this.widthSize).height(this.heightSize).rotate({x:0,y:0,z:1,angle:this.rotateAngle}).onClick(()=>{if(this.flag){animateTo({duration:1200,curve:Curve.Friction,iterations:-1,playMode:PlayMode.Alternate,

onFinish:()=>{('播放结束')}},()=>{this.widthSize=150this.heightSize=60this.rotateAngle=1080})}else{animateTo({},()=>{this.widthSize=300this.heightSize=120this.rotateAngle=2160})}this.flag=!this.flag})}.width('100%')}.height('100%')}}四、总结与实践1.