【鸿蒙实战开发】ArkUI-JS动画组件动画开发指南

在组件上创建和运行动画的快捷方式。具体用法请参考通用方法。

获取动画对象

通过调用animate方法获得animation对象，animation对象支持动画属性、动画方法和动画事件。

<!-- xxx.hml -->
<div class="container">
  <div id="content" class="box" onclick="Show"></div>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.box{
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  margin-top: 30px;
}

/* xxx.js */
export default {
    data: {
        animation: '',
        options: {},
        frames: {}
    },
    onInit() {
        this.options = {
            duration: 1500,
        };
        this.frames = [
            {
                width: 200, height: 200,
            },
            {
                width: 300, height: 300,
            }
        ];
    },
    Show() {
        this.animation = this.$element('content').animate(this.frames, this.options); //获取动画对象
        this.animation.play();
    }
}

说明

• 使用animate方法时必须传入Keyframes和Options参数。
• 多次调用animate方法时，采用replace策略，即最后一次调用时传入的参数生效。

设置动画参数

在获取动画对象后，通过设置参数Keyfra