Function
When a user slides their fingers on the lock screen, particles will be generated in the slide track. The particle shape and color are controlled by input particle images, and the particle quantity and size are specified by parameters. In addition, a particle response area can be set through the <Range> tag, so that particles will be generated only if a user slides fingers in the response area.
Scenarios
- A group of fish swims in the sea following a user's finger.
- Stars flicker in the night sky as a user swipes a finger across the screen.
- Leaves and flowers fall off following a user's finger as the wind blows.
XML Specifications
<ParticleView w="" h="" count="" move_radius="" speek_sec="" reduce_size="" src="" set_path=""> <!--You can use multiple <Range> tags to specify several rectangular response areas.--> <PathData> <Range rect=""/> <Range rect=""/> </PathData> </ParticleView>
Parameters
Parameters in the main tag <ParticleView>:
Parameter | Type | Mandatory | Description |
|---|---|---|---|
w | Number | No | Particle width, which is a positive real number. The default value is 60. Numeric expressions are supported. |
h | Number | No | Particle height, which is a positive real number. The default value is 60 and the aspect ratio 1:1 is recommended. Numeric expressions are supported. |
count | Number | No | Number of particles generated during each sliding, which is a positive integer. The recommended value range is [1,30] and default value is 6. If the value is too large, frame freezing will occur. |
move_radius | Number | No | Inverse proportional coefficient of random movement radius of particles on the basis of finger sliding track. A larger value indicates a smaller radius. The value range is (1,screen width) and default value is 16. Numeric expressions are supported. |
speek_sec | Number | No | Particle movement distance in unit time. A larger value indicates that the particle disappears more quickly. The value is a positive real number. The default value is 2.5. Numeric expressions are supported. |
reduce_size | Number | No | Size reduced from the width and height of a particle after each sliding, which is a positive real number. The value range is [0.1,5] and the default value is 3. (If the value is too large, the particle will disappear too quickly.) Numeric expressions are supported. |
set_path | String | No | Indicates whether to set a response area for particles. If so, set this parameter to true (in this case, you need to set a rectangular area in PathData); if not, set this parameter to false (default value). |
src | String | Yes | Particle image resource name, which is used to generate particles. |
The subtag PathData is used to parse rectangular areas in Range. The following table describes Range parameters.
Parameter | Type | Mandatory | Description |
|---|---|---|---|
rect | Number | No | Rectangular area where particles can be generated. The value is in the format of left,top,right,bottom, where left and top respectively indicate X axis and Y axis of the upper-left vertex and right and bottom respectively indicate the X axis and Y axis of the lower-right vertex. Multiple areas can be set in <PathData>. |
If an area is specified, particles are generated only in this area. If the upper-left vertex defined by left and top is <x1,y1> and the lower-right vertex defined by right and bottom is <x2,y2>, the X-axis length of the rectangular area is x1–x2, and Y-axis length is y1–y2.
Examples
Example 1: Do not set a particle response area. That is, particles can be generated in any area of the screen. Set the width and height of particles to 60 pixels, set the number of particles generated upon each sliding to 6, and set the size reduced from the width and height after each sliding to 3 pixels. A particle disappears when its width and height are reduced to 0.
<ParticleView w="60" h="60" count="6" move_radius="16" speek_sec="2.5" reduce_size="3.0" set_path="false" src="snow_flower.png"/>
Example 2: Set four particle response areas. Particles are generated only when a user slides their fingers in one of these response areas.
<!-- To set particle response areas, you must set set_path to true. --> <ParticleView w="60" h="60" count="6" move_radius="16" speek_sec="2.5" reduce_size="3.0" set_path="true" src="snow_flower.png"> <PathData> <Range rect="600,580,650,1230"/> <Range rect="650,1150,950,1230"/> <Range rect="650,580,950,630"/> <Range rect="930,580,970,1230"/> </PathData> </ParticleView>