This component is used to play specified images at a certain interval, achieving a frame animation effect. You can use this component to provide the unlock function. When a user taps the lock screen and the number of frames is greater than or equal to the preset value, the unlock operation is triggered. If the user lifts the finger from the lock screen before the sequence number of frame image reaches the preset value, the animation is quickly rolled back to the first frame. This component will preempt memory resources of the operating system, reducing the system running smoothness. Therefore, use this component only when you do not require a highly smooth frame animation effect.
<SourceImage sourceName="" format="" from="" to="" loop="" space="" direction="" unlockTo=""/>
Parameter | Type | Mandatory | Description |
|---|---|---|---|
sourceName | String | Yes | Image file name prefix. For example, if this parameter is set to aa/pic__, images whose names start with pic_ in the aa folder will be used. |
format | String | Yes | Image file name extension, for example, .jpg or .png. This parameter can be used together with the sourceName parameter to form an image file name, for example, aa/pic_0.jpg. |
from | Number | No | Sequence number in the file name of the first frame image. The value is a natural number or expression. The default value is 0. |
to | Number | Yes | Sequence number in the file name of the last frame image. The value is a natural number or expression. The default value is 0. |
space | Number | No | Interval for playing an animation frame, in milliseconds. The value is a positive integer. The default value is 30. |
loop | String | No | Indicates whether loop playback is required for the animation. The options are true (yes) and false (no). The default value is true. If this parameter is set to true, unlocking can be triggered based on the settings of direction and unlockTo. If this parameter is set to false, the animation is played only once. The direction parameter is invalid, that is, unlocking cannot be triggered. The unlockTo parameter is still valid. If a user taps the lock screen before the frame image sequence number reaches the value of unlockTo, the animation is quickly rolled back to the first frame and stops. If the user long presses the lock screen until the frame image sequence number reaches the value of unlockTo, the animation stops at the frame specified by unlockTo. If the user taps the lock screen when the frame image sequence number is greater than or equal to that specified by unlockTo, the animation stops at the current frame. If the user does not tap the lock screen, the animation stops when the frame image sequence number reaches the value of to. |
direction | Number | No | If frame animation is required for unlocking, set this parameter to 0 and loop to true, and specify a value for unlockTo. Otherwise, set this parameter to 1 and loop to true. Then the animation starts loop playback from the first frame to the last frame. The default value is 1. |
unlockTo | Number | No | Sequence number of the frame that triggers unlocking. The value is a positive integer ranging from the value of from to that of to. This parameter is mandatory if frame animation is required for unlocking. Assume that a user taps the screen. When the sequence number of the current image is greater than or equal to the sequence number specified by this parameter minus 1, the screen is unlocked. If this parameter is set to the sequence number of the last frame or a larger sequence number, the sequence number of the current image is directly increased to that of the last frame and the screen is unlocked directly. Note that the unlock function is available only when a button area is configured. |
Example 1: Cyclically play images aa/pic_0.png to aa/pic_30.png at an interval of 500 milliseconds. If a user does not tap the screen, the image sequence number increases one by one. When the last frame arrives, the animation is played based on the decreased image sequence numbers. If the user taps the screen and the current image sequence number is greater than the value of unlockTo minus 1, the screen is unlocked. Otherwise, the animation is rolled back to the first frame at a speed of three frames each time. Use a full-screen button area as the trigger area.
<SourceImage sourceName="aa/pic_" format=".png" from="0" to="30" loop="true" space="500" direction="0" unlockTo="10"/> <Button x="0" y="0" w="#screen_width" h="#screen_height"/>
Example 2: Cyclically play images aa/pic_0.png to aa/pic_30.png at an interval of 500 milliseconds. If the user does not tap the screen, the image sequence number increases one by one. When the last frame arrives, the animation is played from the first frame again. If the user taps the screen, the animation is rolled back to the first frame at a speed of three frames each time. If the user long presses the screen and the current image sequence number is less than or equal to that specified by unlockTo, the animation is played cyclically from the first frame to the frame specified by unlockTo. If the current image sequence number is greater than that specified by unlockTo, the animation cyclically starts from the first frame again. Use a full-screen button area as the trigger area.
<SourceImage sourceName="aa/pic_" format=".png" from="0" to="30" loop="true" space="500" direction="1" unlockTo="10"/> <Button x="0" y="0" w="#screen_width" h="#screen_height"/>
Example 3: Start playback from the first frame image aa/pic_0.png at an interval of 500 milliseconds and stop playback when the last frame image aa/pic_30.png arrives. After the playback stops, the last frame image is always displayed. If the user taps the screen before the tenth frame is played, the animation is rolled back to the first frame at a speed of three frames each time. If the user long presses the screen before the tenth frame is played, the animation stops at the tenth frame. If the user taps the screen when the tenth or a later frame is played, the animation stops at the current frame. Use a full-screen button area as the trigger area.
<SourceImage sourceName="aa/pic_" format=".png" from="0" to="30" loop="false" space="500" unlockTo="10"/> <Button x="0" y="0" w="#screen_width" h="#screen_height"/>