鸿蒙开发接口UI界面：【@ohos.animator (动画)】

最新推荐文章于 2024-07-21 20:41:58 发布

爱桥代码的程序媛

最新推荐文章于 2024-07-21 20:41:58 发布

阅读量1.2k

点赞数 36

分类专栏：鸿蒙文章标签： harmonyos 鸿蒙开发鸿蒙系统 OpenHarmony 移动开发程序员 ArkUI

本文链接：https://blog.csdn.net/2301_76813281/article/details/139237113

版权

鸿蒙专栏收录该内容

435 篇文章 7 订阅

订阅专栏

动画

说明： 本模块首批接口从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

参数：

参数名	类型	必填	说明
options	[AnimatorOptions]	是	定义动画选项，详细请参考AnimatorOptions。

返回值：

类型	说明
[AnimatorResult]	Animator结果接口。

示例：

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

参数：

参数名	类型	必填	说明
options	[AnimatorOptions]	是	定义动画选项。

示例：

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

参数：

参数名	类型	必填	说明
progress	number	是	动画的当前进度。

示例：

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

搜狗高速浏览器截图20240326151450.png

名称 `HarmonyOS与OpenHarmony鸿蒙文档籽料：mau123789是v直接拿`	参数类型	必填	说明
duration	number	是	动画播放的时长，单位毫秒，默认为0。
easing	string	是	动画插值曲线，默认为ease'。
delay	number	是	动画延时播放时长，单位毫秒，默认为0，即不延时。
fill	"none"	"forwards"	"backwards"	"both"	是	动画执行后是否恢复到初始状态，默认值为"none"。动画执行后，动画结束时的状态（在最后一个关键帧中定义）将保留。
direction	"normal"	"reverse"	"alternate"	"alternate-reverse"	是	动画播放模式，默认值"normal"。
iterations	number	是	动画播放次数，默认值1。设置为0时不播放，设置为-1时无限次播放。
begin	number	是	动画插值起点，不设置时默认为0。
end	number	是	动画插值终点，不设置时默认为1。

鸿蒙开发岗位需要掌握那些核心要领？

目前还有很多小伙伴不知道要学习哪些鸿蒙技术？不知道重点掌握哪些？为了避免学习时频繁踩坑，最终浪费大量时间的。

自己学习时必须要有一份实用的鸿蒙（Harmony NEXT）资料非常有必要。这里我推荐，根据鸿蒙开发官网梳理与华为内部人员的分享总结出的开发文档。内容包含了：【ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。

废话就不多说了，接下来好好看下这份资料。

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。鸿蒙OpenHarmony知识←前往。下面是鸿蒙开发的学习路线图。