HarmonyOS API:@ohos.animator (动画)

joytrian
发布于 2023-4-2 10:17
浏览
0收藏

版本:v3.1 Beta

@ohos.animator (动画)

更新时间: 2023-02-17 09:19


本模块提供组件动画效果,包括定义动画、启动动画和以相反的顺序播放动画等。


说明

本模块首批接口从API version 6开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。

导入模块

import animator from '@ohos.animator';
  • 1.

create9+

create(options: AnimatorOptions): AnimatorResult

定义Animator类。

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

参数:

参数名

类型

必填

说明

options

​AnimatorOptions​

定义动画选项。

返回值:

类型

说明

​AnimatorResult​

Animator结果接口。

示例:

let options = {
  duration: 1500,
  easing: 'friction',
  delay: 0,
  fill: 'forwards',
  direction: 'normal',
  iterations: 3,
  begin: 200.0,
  end: 400.0
};
animator.create(options);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

AnimatorResult

定义Animator结果接口。

reset9+

reset(options: AnimatorOptions): void

更新当前动画器。

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

参数:

参数名

类型

必填

说明

options

​AnimatorOptions​

定义动画选项。

错误码:

以下错误码的详细介绍请参见​​ohos.animator(动画)​​错误码。

错误码ID

错误信息

100001

if no page is found for pageId or fail to get object property list.

示例:

let options = {
  duration: 1500,
  easing: 'friction',
  delay: 0,
  fill: 'forwards',
  direction: 'normal',
  iterations: 3,
  begin: 200.0,
  end: 400.0
};
try {
  animator.reset(options);
} catch(error) {
  console.error(`Animator reset failed, error code: ${error.code}, message: ${error.message}.`);
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

play

play(): void

启动动画。动画会保留上一次的播放状态,比如播放状态设置reverse后,再次播放会保留reverse的播放状态。

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

示例:

animator.play();
  • 1.

finish

finish(): void

结束动画。

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

示例:

animator.finish();
  • 1.

pause

pause(): void

暂停动画。

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

示例:

animator.pause();
  • 1.

cancel

cancel(): void

删除动画。

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

示例:

animator.cancel();
  • 1.

reverse

reverse(): void

以相反的顺序播放动画。

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

示例:

animator.reverse();
  • 1.

onframe

onframe: (progress: number) => void

接收到帧时回调。

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

参数:

参数名

类型

必填

说明

progress

number

动画的当前进度。

示例:

let animatorResult = animator.create(options)
animatorResult.onframe = function(value) {
  console.info("onframe callback")
}
  • 1.
  • 2.
  • 3.
  • 4.

onfinish

onfinish: () => void

动画完成时回调。

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

示例:

let animatorResult = animator.create(options)
animatorResult.onfinish = function() {
  console.info("onfinish callback")
}
  • 1.
  • 2.
  • 3.
  • 4.

oncancel

oncancel: () => void

动画被取消时回调。

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

示例:

let animatorResult = animator.create(options)
animatorResult.oncancel = function() {
  console.info("oncancel callback")
}
  • 1.
  • 2.
  • 3.
  • 4.

onrepeat

onrepeat: () => void

动画重复时回调。

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

示例:

let animatorResult = animator.create(options)
animatorResult.onrepeat = function() {
  console.info("onrepeat callback")
}
  • 1.
  • 2.
  • 3.
  • 4.

AnimatorOptions

定义动画选项。

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

名称

类型

必填

说明

duration

number

动画播放的时长,单位毫秒。

easing

string

动画插值曲线。

delay

number

动画延时播放时长,单位毫秒,即不延时。

fill

"none" | "forwards" | "backwards" | "both"

动画执行后是否恢复到初始状态。动画执行后,动画结束时的状态(在最后一个关键帧中定义)将保留。

direction

"normal" | "reverse" | "alternate" | "alternate-reverse"

动画播放模式。

iterations

number

动画播放次数。设置为0时不播放,设置为-1时无限次播放。

begin

number

动画插值起点。

end

number

动画插值终点。

完整示例

基于JS扩展的类Web开发范式

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

export default {
  data: {
    divWidth: 200,
    divHeight: 200,
    animator: null
  },
  onInit() {
    let options = {
      duration: 1500,
      easing: "friction",
      delay: 0,
      fill: "forwards",
      direction: "normal",
      iterations: 2,
      begin: 200.0,
      end: 400.0
    };
    this.animator = animator.create(options);
  },
  Show() {
    let options1 = {
      duration: 1500,
      easing: "friction",
      delay: 0,
      fill: "forwards",
      direction: "normal",
      iterations: 2,
      begin: 0,
      end: 400.0,
    };
    try {
      this.animator.reset(options1);
    } catch(error) {
      console.error(`Animator reset failed, error code: ${error.code}, message: ${error.message}.`);
    }
    let _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.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.

HarmonyOS API:@ohos.animator (动画)-鸿蒙开发者社区

基于TS扩展的声明式开发范式

import animator from '@ohos.animator';

@Entry
@Component
struct AnimatorTest {
  private TAG: string = '[AnimatorTest]'
  private backAnimator: any = undefined
  private flag: boolean = false
  @State wid: number = 100
  @State hei: number = 100

  create() {
    let _this = this
    this.backAnimator = animator.create({
      duration: 2000,
      easing: "ease",
      delay: 0,
      fill: "none",
      direction: "normal",
      iterations: 1,
      begin: 100,
      end: 200
    })
    this.backAnimator.onfinish = function () {
      _this.flag = true
      console.info(_this.TAG, 'backAnimator onfinish')
    }
    this.backAnimator.onrepeat = function () {
      console.info(_this.TAG, 'backAnimator repeat')
    }
    this.backAnimator.oncancel = function () {
      console.info(_this.TAG, 'backAnimator cancel')
    }
    this.backAnimator.onframe = function (value) {
      _this.wid = value
      _this.hei = value
    }
  }

  build() {
    Column() {
      Column() {
        Column()
          .width(this.wid)
          .height(this.hei)
          .backgroundColor(Color.Red)
      }
      .width('100%')
      .height(300)

      Column() {
        Row() {
          Button('create')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              this.create()
            })
        }
        .padding(10)

        Row() {
          Button('play')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              this.flag = false
              this.backAnimator.play()
            })
        }
        .padding(10)

        Row() {
          Button('pause')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              this.backAnimator.pause()
            })
        }
        .padding(10)

        Row() {
          Button('finish')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              this.flag = true
              this.backAnimator.finish()
            })
        }
        .padding(10)

        Row() {
          Button('reverse')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              this.flag = false
              this.backAnimator.reverse()
            })
        }
        .padding(10)

        Row() {
          Button('cancel')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              this.backAnimator.cancel()
            })
        }
        .padding(10)

        Row() {
          Button('reset')
            .fontSize(30)
            .fontColor(Color.Black)
            .onClick(() => {
              if (this.flag) {
                this.flag = false
                this.backAnimator.reset({
                  duration: 5000,
                  easing: "ease-in",
                  delay: 0,
                  fill: "none",
                  direction: "normal",
                  iterations: 4,
                  begin: 100,
                  end: 300
                })
              } else {
                console.info(this.TAG, 'Animation not ended')
              }
            })
        }
        .padding(10)
      }
    }
  }
}
  • 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.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.
  • 136.
  • 137.
  • 138.
  • 139.
  • 140.
  • 141.

update(deprecated)

update(options: AnimatorOptions): void

更新当前动画器。

从API version9开始不再维护,建议使用​​reset9+

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

参数:

参数名

类型

必填

说明

options

​AnimatorOptions​

定义动画选项。

示例:

animator.update(options);
  • 1.

createAnimator(deprecated)

createAnimator(options: AnimatorOptions): AnimatorResult

定义Animator类。

从API version9开始不再维护,建议使用​​create9+

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

参数:

参数名

类型

必填

说明

options

​AnimatorOptions​

定义动画选项。

返回值:

类型

说明

​AnimatorResult​

Animator结果接口。

示例:

let options = {
  duration: 1500,
  easing: "friction",
  delay: 0,
  fill: "forwards",
  direction: "normal",
  iterations: 3,
  begin: 200.0,
  end: 400.0,
};
this.animator = animator.createAnimator(options);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.


文章转载自:​​https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-apis-animator-0000001428061932-V3?catalogVersion=V3#ZH-CN_TOPIC_0000001428061932__导入模块​

已于2023-4-2 10:17:54修改
收藏
回复
举报
回复