美丽的神话 发表于 4 天前

HarmonyOS-ArkUI: animateTo 显式动画

什么是显式动画

啊, 尽管有点糙,但还是表明一下吧, 显式动画内里的“显式”二字, 是步伐员在代码调用的时间,就再三告诫,明明白白调用动画API而创建的动画。 这个API的名字就是: animateTo。这就是显式动画。说白了您可以大致明白为,显式动画,就是调用animateTo来完成的动画。

animateTo API概述

animateTo是common文件中的一个方法,其声明为:
declare function animateTo(value: AnimateParam, event: () => void): void;

好,接下来我们梳理一下这个方法!

https://i-blog.csdnimg.cn/direct/5f4eee25b4d34c8ba9ce299606870234.png
animateTo用法

animateTo由于是一个common的方法,且其声明中并没有指定要改什么组件,那么它是怎么改动相干组件界面的呢?答案是,通过改动状态变量而联动界面变化。改动位置就是animateTo的第二个参数。
declare function animateTo(value: AnimateParam, event: () => void): void;
这个函数内里的event参数。 代表的是一套动画终极的值要酿成的样子。哪个组件和这个值有关联,哪个组件的界面就会变。
如下文中的案例:
@Entry
@Component
struct AnimateToTest1 {
@State widthSize:number = 250
@State heightSize: number = 100
@State rotateAngle: number = 0
private flag: boolean = true
build() {
    Column() {
      Button('Change Size')
      .width(this.widthSize)
      .height(this.heightSize)
      .margin(30)
      .onClick(()=>{
          if (this.flag) {
            this.getUIContext().animateTo({
            duration: 200, //2000毫秒
            curve: Curve.EaseOut, //快速开始,逐渐减速到终点
            iterations: 1, //重复1次
            playMode: PlayMode.Normal, //正常播放从头到尾
            onFinish:()=>{
                console.log('play end')
            }
            },
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: HarmonyOS-ArkUI: animateTo 显式动画