动画

About 14 min

动画

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

导入模块

requestAnimationFrame:无需导入

cancelAnimationFrame:无需导入

createAnimator:

import animator from '@ohos.animator';
1

权限列表

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);
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

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);
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21

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>
    
    1
    2
    3
    4
    5
    // 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();
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37