动画
说明: 本模块首批接口从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
名称HarmonyOS与OpenHarmony鸿蒙文档籽料:mau123789是v直接拿 | 参数类型 | 必填 | 说明 |
---|---|---|---|
duration | number | 是 | 动画播放的时长,单位毫秒,默认为0。 |
easing | string | 是 | 动画插值曲线,默认为ease'。 |
delay | number | 是 | 动画延时播放时长,单位毫秒,默认为0,即不延时。 |
fill | "none" | "forwards" | "backwards" |
direction | "normal" | "reverse" | "alternate" |
iterations | number | 是 | 动画播放次数,默认值1。设置为0时不播放,设置为-1时无限次播放。 |
begin | number | 是 | 动画插值起点,不设置时默认为0。 |
end | number | 是 | 动画插值终点,不设置时默认为1。 |
审核编辑 黄宇
-
接口
+关注
关注
33文章
8580浏览量
151029 -
鸿蒙
+关注
关注
57文章
2345浏览量
42822
发布评论请先 登录
相关推荐
评论