动画

About 3 min

动画

icon-note.gif 说明: 本模块首批接口从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。
  • 示例

    <!-- xxx.hml -->
    <div class="container">
      <button type="capsule" class="btn" onclick="beginAnimation">beginAnimation</button>
    </div>
    
    1
    2
    3
    4
    /* xxx.css */
    .container {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }
    .btn{
      width: 300px;
      margin-top: 40px;
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* xxx.js */
    export default {
      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
    19
    20
    21

cancelAnimationFrame

cancelAnimationFrame(requestId: number): void

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

  • 参数

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

    <!-- xxx.hml -->
    <div class="container">
      <button type="capsule" class="btn" onclick="beginAnimation">beginAnimation</button>
      <button type="capsule" class="btn" onclick="stopAnimation">stopAnimation</button>
    </div>
    
    1
    2
    3
    4
    5
    /* xxx.css */
    .container {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }
    .btn{
      width: 300px;
      margin-top: 40px;
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* xxx.js */
    export default {
      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
    22
    23
    24

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
    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