HarmonyOS/OpenHarmony应用开发-显示动画

提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。
说明：从API Version 7开始支持。开发语言ets.

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

示例代码：

@Entry@Componentstruct ShowAnimation {  @State widthSize: number = 250  @State heightSize: number = 100  @State rotateAngle: number = 0  private flag: boolean = true  build() {    Column() {      Button('change width and height') .width(this.widthSize) .height(this.heightSize) .margin(30) .onClick(() => {   if (this.flag) {     animateTo({duration: 2000, // 动画时长curve: Curve.EaseOut, // 动画曲线iterations: 2, // 播放次数playMode: PlayMode.Normal,// 动画模式onFinish: () => {  console.info('play end')}     }, () => {this.widthSize = 100;this.heightSize = 50;     })   } else {     animateTo({}, () => {this.widthSize = 250this.heightSize = 100     })   }   this.flag = !this.flag })      Row(){ Text('change rotate angle').fontSize(20)      }      .width(250)      .height(50)      .backgroundColor(0xf45645)      .justifyContent(FlexAlign.Center)      .rotate({ angle: this.rotateAngle})      .onClick(() => { if(this.flag){   animateTo({     duration: 1200,     curve: Curve.Friction,     delay: 500,     iterations: 1, // 设置-1表示动画无限循环     playMode: PlayMode.AlternateReverse,     onFinish: () => {console.info('play end1')     }   }, () => {     this.rotateAngle = 90;   }) }      })    }.width('100%')    .height('100%')    .justifyContent(FlexAlign.Center)    .alignItems(HorizontalAlign.Center)  }}

示例效果：

这里还要说的是的，这里的rotate好像不生效，不知道是不是版本原因，后续会查找原因.

代码地址：https://gitee.com/jltfcloudcn/jump_to/tree/master/AnimationMuster

神唱ktv下载