动画-组件参考(基于ArkTS的声明式开发范式)-ArkTS API参考 | 华为开发者联盟 (huawei.com)
在HarmonyOS的ArkUI开发框架中,动画主要分为两种类型:属性动画(Property Animation)和显示动画(Explicit Animation)。
属性动画
属性动画 是通过直接修改组件的样式属性并应用animation
属性来实现动画效果。当开发者动态地更改一个组件(如Button、Image等)的尺寸、透明度、背景颜色等样式属性时,如果设置了相应的动画配置,ArkUI会自动填充这些属性变化过程中的每一帧画面,形成平滑的过渡效果。
例如,可以通过设置组件的animation
属性来指定动画的执行方式,比如淡入淡出、大小变化等,并且可以控制动画的执行时长、缓动函数等参数。
TypeScript
// ArkUI示例代码
//btn:动画start//
Button('动画按钮')
.onClick(() => {
if (this.flag) {
this.btnWidth = 200
this.btnHeight = 50
}
else {
this.btnWidth = 100
this.btnHeight = 20
}
this.flag = !this.flag // 调转标志位 实现动画循环
})
.width(this.btnWidth) // 改变宽度
.height(this.btnHeight) // 改变高度
.animation({ // 动画属性
duration:2000,
curve: Curve.EaseOut,
iterations: 1,
playMode: PlayMode.Normal,
tempo:2
})
//btn:动画end//
但是需要注意的是,animation属性最好写在整体属性之后,尤其是设置动画的属性之后,属性动画-动画-组件参考(基于ArkTS的声明式开发范式)-ArkTS API参考 | 华为开发者联盟 (huawei.com)
显式动画
显示动画 则是通过调用全局动画方法如animateTo
来明确指定一组动画操作。这种情况下,开发者需要手动编写动画序列,并明确开始和结束的状态,以及动画的具体行为。
TypeScript
// ArkUI 示例代码(伪代码)
import { animateTo } from '@ohos/anim';
// 使用显式动画改变组件宽度
async function animateWidthChange(elementRef) {
const startSize = elementRef.getWidth();
const endSize = 200;
// 创建动画参数对象
const params = {
duration: 500,
timingFunction: 'linear',
curve: '', // 可选的贝塞尔曲线
delay: 0,
iterations: 1,
fillMode: '',
direction: '',
animations: [{
property: 'width',
value: [startSize, endSize],
}],
};
// 执行动画
await animateTo(elementRef, params);
}
总结来说,在ArkUI中,属性动画主要用于简单直观地处理单个或多个样式属性的变化,而显示动画则提供了更多的自定义选项和精细控制,能够创建更复杂的动画场景。