如何通过鸿蒙ArkTS使用属性动画

最新推荐文章于 2024-07-13 10:21:33 发布

不入流HarmonyOS开发

最新推荐文章于 2024-07-13 10:21:33 发布

阅读量540

点赞数 11

分类专栏：鸿蒙 OpenHarmony HarmonyOS 文章标签： harmonyos 华为 OpenHarmony 鸿蒙应用开发鸿蒙开发鸿蒙鸿蒙工程师

本文链接：https://blog.csdn.net/m0_70749039/article/details/139423643

版权

鸿蒙同时被 3 个专栏收录

661 篇文章 3 订阅

订阅专栏

HarmonyOS

654 篇文章 4 订阅

订阅专栏

OpenHarmony

648 篇文章 6 订阅

订阅专栏

1.属性动画

通过可动画属性改变引起UI上产生的连续视觉效果，即为属性动画。属性动画是最基础易懂的动画

ArkUI提供两种属性动画接口animateTo和animation驱动组件属性按照动画曲线等动画参数进行连续的变化，产生属性动画。

属性动画接口	作用域	原理	使用场景
animateTo	闭包内改变属性引起的界面变化。作用于出现消失转场。	通用函数，对闭包前界面和闭包中的状态变量引起的界面之间的差异做动画。支持多次调用，支持嵌套。	适用对多个可动画属性配置相同动画参数的动画。需要嵌套使用动画的场景。
animation	组件通过属性接口绑定的属性变化引起的界面变化。	识别组件的可动画属性变化，自动添加动画。组件的接口调用是从下往上执行，animation只会作用于在其之上的属性调用。组件可以根据调用顺序对多个属性设置不同的animation。	适用于对多个可动画属性配置不同参数动画的场景。

使用animateTo产生属性动画

animateTo(value: AnimateParam, event: () => void): void animateTo接口参数中

• value指定动画参数（包括时长、曲线等）
• event为动画的闭包函数，闭包内变量改变产生的属性动画将遵循相同的动画参数。

2.示例

三个小动画示例：旋转，平稳，放缩

    @Builder
    buildPage() {
        List() {
            ListItem() {

                Column({ space: 10 }) {


                    Text('通过可动画属性改变引起UI上产生的连续视觉效果，即为属性动画。属性动画是最基础易懂的动画，ArkUI提供两种属性动画接口animateTo和animation驱动组件属性按照动画曲线等动画参数进行连续的变化，产生属性动画')
                        .width('80%')
                    Column() {
                        Text('ArkUI')
                            .fontSize(25)
                            .fontColor(Color.White)
                    }
                    .justifyContent(FlexAlign.Center)
                    .width(100)
                    .height(100)
                    .borderRadius(10)
                    .rotate({ angle: this.rotateValue })
                    .backgroundColor(Color.Green)

                    Column() {
                        Text('ArkUI')
                            .fontSize(25)
                            .fontColor(Color.White)

                    }
                    .justifyContent(FlexAlign.Center)
                    .width(100)
                    .height(100)
                    .backgroundColor(Color.Red)
                    .borderRadius(10)
                    .opacity(this.opacityValue)
                    .translate({ x: this.translateX })

                    Column() {
                        Text('ArkUI')
                            .fontSize(25)
                            .fontColor(Color.White)

                    }
                    .justifyContent(FlexAlign.Center)
                    .width(100)
                    .height(100)
                    .backgroundColor(Color.Blue)
                    .borderRadius(10)
                    .scale({ x: this.scaleX, y: this.scaleY })

                    Button('测试属性动画')
                        .margin({ top: 50 })
                        .onClick(() => {
                            this.handleStartAimationEvent()
                        })

                }.width('100%')
                .alignItems(HorizontalAlign.Center)
                .justifyContent(FlexAlign.Center)
            }

        }.width('100%')
        .height('100%')
    }