Component Methods
After a component is assigned the id attribute, you can use the ID to obtain the component objects and call functions.
Name
|
Parameter
|
Mandatory
|
Default Value
|
Return Value
|
Description
|
animate
|
- Object: keyframes is used to describe key frame parameters of the animation.
- Object: options is used to describe animation parameters.
|
Yes
|
-
|
-
|
Creates and runs an animation shortcut on the component. Specify the keyframes and options required for the animation. This method returns the animation object.
|
this.$element('id').animate(Object, Object)
You can use the animate(keyframes, options) method to obtain an animation object. This object supports properties, methods, and events of the animation component. If animate is called for multiple times and the replace policy is used, parameters passed to the last call will take effect.
-
keyframes
Parameter
|
Type
|
Description
|
frames
|
Array<Style>
|
Array of objects used to set animation style attributes. For details about style attributes, see Style attributes.
|
Table 1 Style attributes
Parameter
|
Type
|
Default Value
|
Description
|
width
|
number
|
-
|
Width set for the component during playback of the animation.
|
height
|
number
|
-
|
Height set for the component during playback of the animation.
|
backgroundColor
|
<color>
|
none
|
Background color set for the component during playback of the animation.
|
opacity
|
number
|
1
|
Opacity set for the component. The value ranges from 0 to 1.
|
backgroundPosition
|
string
|
-
|
The value format is x y, in percentage or pixels.
The first value indicates the horizontal position, and the second value indicates the vertical position.
If only one value is specified, the other value is 50% by default.
|
transformOrigin
|
string
|
'center center'
|
Origin position of the transformed element.
The first value indicates the x-axis position. The value can be left, center, right, a length, or a percentage.
The second value indicates the y-axis position. The value can be top, center, bottom, a length, or a percentage.
|
transform
|
Transform
|
-
|
Transformation type set for a transformed element.
|
offset
|
number
|
-
|
- The value of offset must be within (0.0,1.0] and sorted in ascending order if it is provided.
- If there are only two frames, offset can be left empty.
- If there are more than two frames, offset is mandatory.
|
-
options attributes
Parameter
|
Type
|
Default Value
|
Description
|
duration
|
number
|
0
|
Duration for playing the animation, in milliseconds.
|
easing
|
string
|
linear
|
Time curve of the animation. For details about the supported types, see Available values of the easing attribute.
|
delay
|
number
|
0
|
Delay for the animation start. The default value indicates no delay.
|
iterations
|
number | string
|
1
|
Number of times the animation will be played. number indicates a fixed number of playback operations, and Infinity indicates an unlimited number of playback operations.
|
fill
|
string
|
none
|
Start and end styles of the animation
none: No style is applied to the target before or after the animation is executed.
forwards: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.
|
Table 2 Available values of the easing attribute
Type
|
Description
|
linear
|
The animation speed keeps unchanged.
|
ease-in
|
The animation starts at a low speed. cubic-bezier(0.42, 0.0, 1.0, 1.0).
|
ease-out
|
The animation ends at a low speed. cubic-bezier(0.0, 0.0, 0.58, 1.0).
|
ease-in-out
|
The animation starts and ends at a low speed. cubic-bezier(0.42, 0.0, 0.58, 1.0).
|
friction
|
Damping curve, cubic-bezier(0.2, 0.0, 0.2, 1.0).
|
extreme-deceleration
|
Extreme deceleration curve, cubic-bezier(0.0, 0.0, 0.0, 1.0).
|
sharp
|
Sharp curve, cubic-bezier(0.33, 0.0, 0.67, 1.0).
|
rhythm
|
Rhythm curve, cubic-bezier(0.7, 0.0, 0.2, 1.0).
|
smooth
|
Smooth curve, cubic-bezier(0.4, 0.0, 0.4, 1.0).
|
cubic-bezier(x1, y1, x2, y2)
|
You can customize an animation speed curve in the cubic-bezier() function. The x and y values of each input parameter must be between 0 and 1.
|
steps(number, step-position)
|
Step curve.
The number must be set and only an integer is supported.
step-position is optional. It can be set to start or end. The default value is end.
|
-
Return value
Attributes supported by the animation object
Attribute
|
Type
|
Description
|
finished
|
boolean
|
Read-only attribute, which indicates whether the animation playback is complete.
|
pending
|
boolean
|
Read-only attribute, which indicates whether the animation is waiting for the completion of other asynchronous operations (for example, start an animation with a delay).
|
playState
|
string
|
Read-write attribute, which indicates the playback status of the animation:
- idle: The animation is not running (playback ended or not started).
- running: The animation is running.
- paused: The animation is paused.
- finished: Animation playback ends.
|
startTime
|
number
|
Read-write attribute, which indicates the animation start time. This attribute is similar to delay in the options attribute.
|
Methods supported by the animation object
Method
|
Parameter
|
Description
|
play
|
-
|
Plays the animation.
|
finish
|
-
|
Ends the animation.
|
pause
|
-
|
Pauses the animation.
|
cancel
|
-
|
Cancels the animation.
|
reverse
|
-
|
Plays the animation in reverse.
|
Events supported by the animation object
Event
|
Description
|
cancel
|
The animation is forcibly canceled.
|
finish
|
The animation playback is complete.
|
repeat
|
The animation repeats.
|
-
Example code:
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();
}
}