组件方法
当组件通过id属性标识后,可以使用该id获取组件对象并调用相关组件方法。
名称
|
参数
|
必填
|
默认值
|
返回值
|
描述
|
animate
|
- Object: keyframes,用于描述动画关键帧参数
- Object: options,用于描述动画参数
|
是
|
-
|
-
|
在组件上创建和运行动画的快捷方式。输入动画所需的keyframes和options,返回animation对象实例。
|
this.$element('id').animate(Object, Object)
通过animate(keyframes, options)方法获得animation对象。该对象支持动画属性,动画方法和动画事件。重复多次调用animate方法时,采用replace策略,最后一次调用时传入的参数生效。
-
keyframes
参数
|
类型
|
说明
|
frames
|
Array<Style>
|
用于设置动画样式属性的对象列表。Style类型说明请见表1 Style类型说明。
|
表 1 Style类型说明
参数
|
类型
|
默认值
|
说明
|
width
|
number
|
-
|
动画执行过程中设置到组件上的宽度值。
|
height
|
number
|
-
|
动画执行过程中设置到组件上的高度值。
|
backgroundColor
|
<color>
|
none
|
动画执行过程中设置到组件上的背景颜色。
|
opacity
|
number
|
1
|
设置到组件上的透明度(介于0到1之间)。
|
backgroundPosition
|
string
|
-
|
格式为"x y",单位为百分号或者px。
第一个值是水平位置,第二个值是垂直位置。
如果仅规定了一个值,另一个值为 50%。
|
transformOrigin
|
string
|
'center center'
|
变换对象的中心点。
第一个参数表示x轴的值,可以设置为left、center、right、长度值或百分比值。
第二个参数表示y轴的值,可以设置为top、center、bottom、长度值或百分比值。
|
transform
|
Transform
|
-
|
设置到变换对象上的类型。
|
offset
|
number
|
-
|
- offset值(如果提供)必须在0.0到1.0(含)之间,并以升序排列。
- 若只有两帧,可以不填offset。
- 若超过两帧,offset必填。
|
-
options
参数
|
类型
|
默认值
|
说明
|
duration
|
number
|
0
|
指定当前动画的运行时长(单位毫秒)。
|
easing
|
string
|
linear
|
描述动画的时间曲线,支持类型见表3 easing有效值说明。
|
delay
|
number
|
0
|
设置动画执行的延迟时间(默认值表示无延迟)。
|
iterations
|
number | string
|
1
|
设置动画执行的次数。number表示固定次数,Infinity枚举表示无限次数播放。
|
fill
|
string
|
none
|
指定动画开始和结束的状态:
none:在动画执行之前和之后都不会应用任何样式到目标上。
forwards:在动画结束后,目标将保留动画结束时的状态(在最后一个关键帧中定义)。
|
表 2 easing有效值说明
值
|
描述
|
linear
|
动画线性变化。
|
ease-in
|
动画速度先慢后快,cubic-bezier(0.42, 0.0, 1.0, 1.0)。
|
ease-out
|
动画速度先快后慢,cubic-bezier(0.0, 0.0, 0.58, 1.0)。
|
ease-in-out
|
动画先加速后减速,cubic-bezier(0.42, 0.0, 0.58, 1.0)。
|
friction
|
阻尼曲线,cubic-bezier(0.2, 0.0, 0.2, 1.0)。
|
extreme-deceleration
|
急缓曲线,cubic-bezier(0.0, 0.0, 0.0, 1.0)。
|
sharp
|
锐利曲线,cubic-bezier(0.33, 0.0, 0.67, 1.0)。
|
rhythm
|
节奏曲线,cubic-bezier(0.7, 0.0, 0.2, 1.0)。
|
smooth
|
平滑曲线,cubic-bezier(0.4, 0.0, 0.4, 1.0)。
|
cubic-bezier(x1, y1, x2, y2)
|
在三次贝塞尔函数中定义动画变化过程,入参的x和y值必须处于0-1之间。
|
steps(number, step-position)
|
Step曲线。
number必须设置,支持的类型为int。
step-position参数可选,支持设置start或end,默认值为end。
|
-
返回值
animation对象支持的属性:
属性
|
类型
|
说明
|
finished
|
boolean
|
只读,用于表示当前动画是否已播放完成。
|
pending
|
boolean
|
只读,用于表示当前动画是否处于等待其他异步操作完成的等待状态(例如启动一个延时播放的动画)。
|
playState
|
string
|
可读可写,动画的执行状态:
- idle:未执行状态,包括已结束或未开始。
- running:动画正在运行。
- paused:动画暂停。
- finished:动画播放完成。
|
startTime
|
number
|
可读可写,动画播放开始的预定时间,用途类似于options参数中的delay。
|
animation对象支持的方法:
方法
|
参数
|
说明
|
play
|
-
|
组件播放动画。
|
finish
|
-
|
组件完成动画。
|
pause
|
-
|
组件暂停动画。
|
cancel
|
-
|
组件取消动画。
|
reverse
|
-
|
组件倒播动画。
|
animation对象支持的事件:
事件
|
说明
|
cancel
|
动画被强制取消。
|
finish
|
动画播放完成。
|
repeat
|
动画重播事件。
|
-
示例代码:
import prompt from '@system.prompt';
export default {
data : {
animation:'',
},
onInit() {
},
onShow() {
var options = {
duration: 1500,
easing: 'friction',
delay: 500,
fill: 'forwards',
iterations: 2,
};
var frames = [
{transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0},
{transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0}
];
this.animation = this.$element('idName').animate(frames, options);
this.animation.onfinish = function() {
prompt.showToast({
message: "The animation is finished."
});
};
this.animation.oncancel = function() {
prompt.showToast({
message: "The animation is canceled."
});
};
this.animation.onrepeat = function() {
prompt.showToast({
message: "The animation is repeated."
});
};
},
start() {
this.animation.play();
},
cancel() {
this.animation.cancel();
}
}
![](figures/AnimationAPI%E8%A3%81%E5%89%AA.gif)