动画

说明： 从API Version 6 开始支持。

导入模块

requestAnimationFrame：无需导入

cancelAnimationFrame：无需导入

createAnimator：

import animator from '@ohos.animator';

权限列表

无

requestAnimationFrame

requestAnimationFrame(handler[, [ ...args]]): number

请求动画帧，逐帧回调JS函数。

• 参数

  参数名	类型	必填	说明
  handler	Function	是	表示要逐帧回调的函数。requestAnimationFrame函数回调handler函数时会在第一个参数位置传入timestamp时间戳。它表示requestAnimationFrame开始去执行回调函数的时刻。
  ...args	Array<any>	否	附加参数，函数回调时，他们会作为参数传递给handler。

• 返回值

  类型	说明
  number	requestID请求的ID。

• 示例

  data: {
    requestId: 0,
    startTime: 0,
  },
  beginAnimation() {
    cancelAnimationFrame(this.requestId);
    this.requestId = requestAnimationFrame(this.runAnimation);
  },
  runAnimation(timestamp) {
    if (this.startTime == 0) {
        this.startTime = timestamp;
    }
    var elapsed = timestamp - this.startTime;
    if (elapsed < 500) {
      console.log('callback handler timestamp: ' + timestamp);
      this.requestId = requestAnimationFrame(this.runAnimation);
    }
  }
  

cancelAnimationFrame

cancelAnimationFrame(requestId: number): void

取消动画帧，取消逐帧回调请求。

• 参数

  参数名	类型	必填	说明
  requestId	number	是	逐帧回调函数的标识id。

• 示例

  data: {
    requestId: 0,
    startTime: 0,
  },
  beginAnimation() {
    cancelAnimationFrame(this.requestId);
    this.requestId = requestAnimationFrame(this.runAnimation);
  },
  runAnimation(timestamp) {
    if (this.startTime == 0) {
      this.startTime = timestamp;
    }
    var elapsed = timestamp - this.startTime;
    if (elapsed < 500) {
      console.log('callback handler timestamp: ' + timestamp);
      this.requestId = requestAnimationFrame(this.runAnimation);
    }
  },
  stopAnimation() {
    cancelAnimationFrame(this.requestId);
  }
  

createAnimator

createAnimator(options[...]): void

创建动画对象。

• 参数

  参数名	类型	必填	说明
  options	Object	是	表示待创建Animator对象的属性，详情见下表options说明。

• options说明

  参数名	类型	必填	说明
  duration	number	否	动画播放的时长，单位毫秒，默认为0。
  easing	string	否	动画插值曲线，默认为' ease '。
  delay	number	否	动画延时播放时长，单位毫秒，默认为0，即不延时。
  fill	string	否	动画启停模式，默认值none，详情见：animation-fill-mode
  direction	string	否	动画播放模式，默认值normal，详情见：animation-direction
  iterations	number	否	动画播放次数，默认值1，设置为0时不播放，设置为-1时无限次播放。
  begin	number	否	动画插值起点，不设置时默认为0。
  end	number	否	动画插值终点，不设置时默认为1。

• animator支持的接口

  参数名	类型	说明
  update	options	过程中可以使用这个接口更新动画参数，入参与createAnimator一致。
  play	-	开始动画。
  finish	-	结束动画。
  pause	-	暂停动画。
  cancel	-	取消动画。
  reverse	-	倒播动画。

• animator支持的事件：

  参数名	类型	说明
  frame	number	逐帧插值回调事件，入参为当前帧的插值
  cancel	-	动画被强制取消
  finish	-	动画播放完成
  repeat	-	动画重新播放

• 示例

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

  // js
  import Animator from "@ohos.animator";
  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();
    }
  }