动画

说明： 本模块首批接口从API version 6开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 开发前请熟悉鸿蒙开发指导文档 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

导入模块

import animator from '@ohos.animator';

createAnimator

createAnimator(options: AnimatorOptions): AnimatorResult

定义Animator类。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

返回值：

示例：

< !-- hml -- >
< div class="container" >
  < div class="Animation" style="height: {{divHeight}}px; width: {{divWidth}}px; background-color: red;" onclick="Show" >
  < /div >
< /div >

// js
export default {
  data : {
    divWidth: 200,
    divHeight: 200,
    animator: null
  },
  onInit() {
    var options = {
      duration: 1500,
      easing: 'friction',
      fill: 'forwards',
      iterations: 2,
      begin: 200.0,
      end: 400.0
    };
    this.animator = animator.createAnimator(options);
  },
  Show() {
    var options1 = {
      duration: 2000,
      easing: 'friction',
      fill: 'forwards',
      iterations: 1,
      begin: 200.0,
      end: 400.0
    };
    this.animator.update(options1);
    var _this = this;
    this.animator.onframe = function(value) {
      _this.divWidth = value;
      _this.divHeight = value;
    };
    this.animator.play();
  }
}

AnimatorResult

定义Animator结果接口。

update

update(options: AnimatorOptions): void

更新当前动画器。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

示例：

animator.update(options);

play

play(): void

启动动画。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.play();

finish

finish(): void

结束动画。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.finish();

pause

pause(): void

暂停动画。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.pause();

cancel

cancel(): void

删除动画。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.cancel();

reverse

reverse(): void

以相反的顺序播放动画。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.reverse();

onframe

onframe: (progress: number) => void

回调时触发。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

示例：

animator.onframe();

onfinish

onfinish: () => void

动画完成。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.onfinish();

oncancel

oncancel: () => void

动画被取消。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.oncancel();

onrepeat

onrepeat: () => void

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.onrepeat();

动画将重复。

AnimatorOptions

定义动画选项。

系统能力： 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full

审核编辑 黄宇