Function
This animation displays multiple overlaid layers whose spacial position is specified by the Z value that you configure. Users can slide the screen in various directions to experience the simulated camera angle switching. If you use the sensor tag <VariableBinders>, users can also obtain this experience by shaking their phones. Users can view the animation either by pressing or by tapping the screen. You can select either of the methods as required.
1. As <MultiLayer> uses perspective projection, the position and size of the image of a layer depend on its Z value. For example, the position of a layer configured to be displayed in full screen is the center of the screen when it is far away from the cover layer. When it moves towards the cover layer close enough, it is displayed in full screen. If you want it to be displayed in full screen when the screen is on, set the layer width and height to values larger than those of the screen.
2. Layers are rendered in OpenGL from the bottom one to the cover one in sequence. When configuring the <Layer> tag, please refer to the specifications below.
3. You are advised to set the color of the layer border to the color of the background image.
Scenarios
- Simulate the scene of walking through a forest.
- Simulate the scene of going through a cave to find the sea.
- Simulate the scene of walking through a desert to find an oasis.
- Simulate the scene of traveling through a city.
Demo Video
<MultiLayer gravityX="0" gravityY="0" pitchAngle="5,-5" sidesAngle="8,-8" touchType="3" stepX="0" stepZ="0">
<Layer x="-1080*2.7" y="-2400*2.7" z="-8+not(#kg%2)*max(#sj6,0)+(#kg%2)*(#zzz/50)*8" w="1080*6.4" h="2400*6.4" src="bg_5.jpg"/>
<Layer x="-1080*2.7" y="-2400*2.7" z="-8+not(#kg%2)*max(#sj5,0)+(#kg%2)*(#zzz/50)*20" w="1080*6.4" h="2400*6.4" src="bg_4.png"/>
<Layer x="-1080*2.7" y="-2400*2.7" z="-8+not(#kg%2)*max(#sj4,0)+(#kg%2)*(#zzz/50)*25" w="1080*6.4" h="2400*6.4" src="bg_3.png"/>
<Layer x="-1080*2.7" y="-2400*2.7" z="-8+not(#kg%2)*max(#sj3,0)+(#kg%2)*(#zzz/50)*30" w="1080*6.4" h="2400*6.4" src="bg_2.png"/>
<Layer x="-1080*2.7" y="-2400*2.7" z="-8+not(#kg%2)*max(#sj2,0)+(#kg%2)*(#zzz/50)*40" w="1080*6.4" h="2400*6.4" src="bg_1.png"/>
<Layer x="-1080*2.7" y="-2400*2.7" z="-8+not(#kg%2)*max(#sj1,0)+(#kg%2)*(#zzz/50)*50" w="1080*6.4" h="2400*6.4" src="bg_0.png"/>
</MultiLayer> XML Specifications
<MultiLayer gravityX="" gravityY="" pitchAngle="" sidesAngle="" touchType="" stepX="" stepZ="" blur="" visibility="">
<!-- Bottom layer -->
<Layer x="" y="" z="" w="" h="" src="" staticCondition=""/>
<!-- Middle layer -->
<Layer x="" y="" z="" w="" h="" src=""/>
<!-- Cover layer -->
<Layer x="" y="" z="" w="" h="" src="" delay="" repeat="">
<Source frame="" time=""/>
<Source frame="" time=""/>
<Source frame="" time=""/>
</Layer>
</MultiLayer> Parameters in the <MultiLayer> tag
Parameter | Type | Mandatory | Description |
|---|---|---|---|
gravityX | Number | No | Gravity value in the X direction. This parameter must be used under the <VariableBinders> tag and is valid only when touchType is set to 0 or 2. Expressions are supported. |
gravityY | Number | No | Gravity value in the Y direction. This parameter must be used under the <VariableBinders> tag and is valid only when touchType is set to 0 or 2. Expressions are supported. |
touchType | Number | No | Interaction mode. The options are as follows:
The default value is 0. Expressions are supported. |
pitchAngle | String | No | Tilt angle range. Users can change the tilt angle by sliding the screen upward and downward. The value is in the format of top,-up, in which both top and up are positive numbers, for example, 8,-8. This parameter is valid only when touchType is set to 1 or 2. |
sidesAngle | String | No | Pan angle range. Users can change the pan angle by sliding the screen leftward and rightward. The value is in the format of left,-right, in which both left and right are positive numbers, for example, 8,-8. This parameter is valid only when touchType is set to 1 or 2. |
stepX | Number | No | Step for viewing a layer by sliding left or right. The value is calculated using an expression, for example, #stepX + 0.1. This parameter is valid only when touchType is set to 3. |
stepZ | Number | No | Step for a layer to move towards or away from the cover layer. The value is calculated using an expression, for example, #stepZ + 0.1. This parameter is valid only when touchType is set to 3. |
blur | Number | No | Blur degree when a layer moves towards the cover layer. The value ranges from 0 to 10. The default value is 0, which indicates not blurry. |
visibility | Number | No | Visibility. When this parameter is set to 0, the layer is invisible; when it is set to 1, the layer is visible. The default value is 1. |
Attributes in the <Layer> tag:
When a layer moves away from the cover layer, its Z value decreases, the image gets smaller, and its X and Y values change. To realize the same effect as the image at the original position and with the original size when a layer moves away from the cover layer, use the following formulas to convert the X value, Y value, width, and height of the image.
Assume that the original attributes of an image are as follows: x=X, y=Y, w=W, h=H. The attributes can be calculated as follows when the Z value changes:
(The Z value ranges from –10 to 7.)
x = X x ((10 – Z)/3) - #screen_width/(6/(7 – Z));
y = Y x ((10 – Z)/3) – #screen_height/(6/(7 – Z));
w = W x ((10 – Z)/3);
h = H x ((10 – Z)/3);
When the Z value is 7, the image is displayed at the original position with the original size.
Parameter | Type | Mandatory | Description |
x | Number | No | X coordinate relative to the upper left corner of the screen. The default value is 0 and expressions are supported. The value is subject to the Z value due to the effect of perspective projection. |
y | Number | No | Y coordinate relative to the upper left corner of the screen. The default value is 0 and expressions are supported. The value is subject to the Z value due to the effect of perspective projection. |
z | Number | No | Spacial position of an image. The value is a floating point number ranging from –10 to 7. The default value is 0 and expressions are supported. The outward direction of the screen is the positive direction. Since perspective projection is used, images far away from the screen (cover layer) are smaller than those near the screen. When configuring the <Layer> tag, assign Z values in ascending order, that is, draw the layers from the bottom to the cover in sequence. |
w | Number | Yes | Image width. This parameter can also be named as width. Expressions are supported. |
h | Number | Yes | Image height. This parameter can also be named as height. Expressions are supported. |
src | String | Yes | Image name, for example, bj.png. |
staticCondition | String | No | Indicates whether a layer is static, that is, does not change with the phone position. The options are true (static) and false (not static). The default value is false. |
delay | Number | No | Delay for playing an animation. By default, the playback is not delayed. |
repeat | Number | No | Number of frame animation repetitions. By default, frame animations are repeated infinitely. |
Parameters in the <Source> tag
Parameter | Type | Mandatory | Description |
frame | String | Yes | Frame animation image name, for example, zhen_1.png. |
time | Number | Yes | Number of milliseconds from the start frame, which is also the duration of an animation. The minimum image delay that can be identified by human eyes is about 300 ms. Therefore, the value of this parameter is no less than 0 and is recommended to be smaller than 300. |
Examples
Design a button for switching between interaction modes. Configure the gravity mode under the <VariableBinders> tag. In the screen sliding mode, set pitchAngle and sidesAngle. When a user presses the button, layers move towards the cover layer, and then move away when the user releases the button. When a user slides left or right, the camera angle is switched. Implement frame animations for layers close to the cover layer.
<VariableBinders>
<SensorBinder type="gravity">
<Variable name="x_gra" index="0"/>
<Variable name="y_gra" index="1"/>
</SensorBinder>
</VariableBinders>
<MultiLayer gravityX="-#x_gra" gravityY="#y_gra" pitchAngle="5,-5" sidesAngle="8,-8" touchType="#touchtype" stepX="#stepX" stepZ="#step" blur="1.0" visibility="1">
<Layer x="0" y="0" z="0" w="#screen_width" h="#screen_height" src="gufeng_2.png"/>
<Layer x="0" y="0" z="2" w="#screen_width" h="#screen_height" src="bg.jpg"/>
<Layer x="0" y="0" z="4" w="#screen_width" h="#screen_height" src="gufeng_4.png"/>
<Layer x="200" y="600" z="4.5" w="600" h="750" src="zuida1_1.png" delay="1000" repeat="4">
<Source frame="zuida1_1.png" time="0"/>
<Source frame="zuida1_1.png" time="400"/>
<Source frame="zuida1_2.png" time="800"/>
<Source frame="zuida1_3.png" time="1200"/>
<Source frame="zuida1_4.png" time="1600"/>
<Source frame="zuida1_5.png" time="2000"/>
<Source frame="zuida1_1.png" time="2500"/>
<Source frame="zuida1_1.png" time="3000"/>
<Source frame="zuida1_2.png" time="3500"/>
<Source frame="zuida1_3.png" time="4000"/>
<Source frame="zuida1_4.png" time="4500"/>
<Source frame="zuida1_5.png" time="5000"/>
</Layer>
</MultiLayer>
<!-- Button for switching between interaction modes -->
<Image src="1.png" w="200" h="200" x="0" y="0"/>
<Button x="0" y="0" w="200" h="200">
<Trigger action="up">
<VariableCommand condition="lt(#touchtype,4)" name="touchtype" expression="#touchtype+1"/>
<VariableCommand condition="ge(#touchtype,4)" name="touchtype" expression="0" />
</Trigger>
</Button>
<!-- Layers move towards the cover layer when a user presses the button, and move away when the user releases the button.-->
<Var name="isTouched" expression="0"/>
<Var name="sj">
<VariableAnimation>
<AniFrame value="0" time="0"/>
<AniFrame value="9999999999999999" time="9999999999999999"/>
</VariableAnimation>
</Var>
<Var name="maoy" expression="#sj" threshold="1">
<Trigger>
<VariableCommand name="step" expression="#step+0.1" condition="eq(#isTouched,1)*le(#step,6.9)"/>
<VariableCommand name="step" expression="#step-0.1" condition="eq(#isTouched,2)*ge(#step,0.1)"/>
</Trigger>
</Var>
<Image src="5.png" w="200" h="200" x="0" y="1500"/>
<Button x="0" y="1500" w="200" h="200">
<Trigger action="down">
<VariableCommand name="isTouched" expression="1"/>
</Trigger>
<Trigger action="up">
<VariableCommand name="isTouched" expression="2"/>
</Trigger>
</Button>
<!-- Slide left or right to switch the camera angle. -->
<Slider>
<StartPoint x="0" y="0" w="#screen_width" h="#screen_height">
</StartPoint>
<EndPoint x="-350" y="0" w="50" h="#screen_height">
<Trigger action="up">
<VariableCommand name="stepX" expression="#stepX-0.1"/>
</Trigger>
<Path x="0" y="0">
<Position x="0" y="0"/>
<Position x="-350" y="0"/>
</Path>
</EndPoint>
</Slider>
<Slider>
<StartPoint x="0" y="0" w="#screen_width" h="#screen_height">
</StartPoint>
<EndPoint x="350" y="0" w="50" h="#screen_height">
<Trigger action="up">
<VariableCommand name="stepX" expression="#stepX+0.1"/>
</Trigger>
<Path x="0" y="0">
<Position x="0" y="0"/>
<Position x="350" y="0"/>
</Path>
</EndPoint>
</Slider>