详解鸿蒙Next仓颉开发语言中的动画-CSDN博客

合集 - 仓颉教程(16)

1.详解鸿蒙仓颉开发语言中的日志打印问题05-21 2.鸿蒙仓颉开发语言实战教程：实现商城应用首页05-22 3.鸿蒙仓颉开发语言实战教程：页面跳转和传参05-25 4.鸿蒙仓颉语言开发教程：页面和组件的生命周期05-28 5.鸿蒙仓颉语言开发实战教程：购物车页面06-03 6.鸿蒙仓颉语言开发实战教程：商城登录页06-04 7.鸿蒙仓颉语言开发实战教程：商城搜索页06-05 8.鸿蒙仓颉语言开发教程：仓颉语言中的状态存储06-06 9.鸿蒙仓颉语言开发实战教程：商城应用个人中心页面06-07

10. 详解鸿蒙Next仓颉开发语言中的动画 06-08

11.鸿蒙Next仓颉语言开发实战教程：店铺详情页06-09 12.鸿蒙Next仓颉语言开发实战教程：下拉刷新和上拉加载更多06-10 13.鸿蒙Next仓颉语言开发实战教程：订单列表06-11 14.详解HarmonyOS NEXT系统中ArkTS和仓颉的混合开发06-12 15.鸿蒙Next仓颉语言开发实战教程：订单详情06-13 16.鸿蒙Next仓颉语言开发实战教程：设置页面06-15

大家上午好，今天来聊一聊仓颉开发语言中的动画开发。

仓颉中的动画通常有两种方式，分别是属性动画和显示动画，我们今天以下面的加载动画为例，使用显示动画和属性动画分别实现一下，看看他们有什么区别。

显示动画

显示动画是幽蓝君比较习惯使用的方式，它主要依赖animateTo方法来实现。

首先我要现在页面上添加加载图片，并且将它的角度设置为变量。仓颉语言这里有一个奇怪的地方，角度属性只设置angle的话是无效的，必须同时设置z和angle：

@State
var angle:Float32 = 0.0
Column{
    Image(@r(app.media.loading))
    .width(70)
    .height(70)
    .rotate(z:this.angle,angle:this.angle)
}
.width(120)
.height(120)
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.backgroundColor(Color(0, 0, 0, alpha: 0.7))
.borderRadius(10)

然后在添加一个按钮，在按钮的点击事件里进行动画开发：

Button('开始动画')
.width(100)
.onClick({evet =>
    animateTo(
            AnimateParam(
                duration: 2000,
                curve: Curve.Linear,
                delay: 0,
                iterations: -1,
                playMode: PlayMode.Normal,
                onFinish: {=>
                    angle = 0.0
                    }
                ),
                {   =>
                    angle = 360.0
                    })
    })

上面代码中，duration表示动画时长，curve表示动画曲线，delay表示延时，iterations表示循环次数，-1表示无限循环，playMode表示动画模式，这些属性在属性动画中也同样适用。

属性动画

属性动画的各个属性个显示动画都是一样的，只是写法上有区别，给大家演示一下同样的动画使用属性动画的写法：

let animate = AnimateParam(
    duration: 2000,
    curve:Curve.Linear,
    delay: 0,
    iterations: -1,
    playMode: PlayMode.Normal,
    onFinish: { => })
Column{
    Image(@r(app.media.loading))
     .animationStart(animate)
    .width(70)
    .height(70)
    .rotate(z:this.angle,angle:this.angle)
    .animationEnd()
}
.width(120)
.height(120)
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.backgroundColor(Color(0, 0, 0, alpha: 0.7))
.borderRadius(10)
Button('开始')
.onClick({eve =>
    this.angle = 360.0
    })

以上就是关于仓颉语言属性动画和显示动画的相关内容，感谢阅读。##HarmonyOS语言##仓颉##购物#

原创作者: youlanjihua 转载于: https://www.cnblogs.com/youlanjihua/p/18919313