When a user moves (including tilting, panning, and rolling) the phone, this animation allows them to look into the background-layer image with a specified Z value from the foreground-layer image, with the help of a sensor. Note that default wallpapers stored in the wallpaper directory must be pure-color images.
Implement the <WindowParallax> animation when a user moves the phone to simulate, for example:
<WindowParallax posZ="">
<!-- Background-layer image -->
<LayerInfo src="" x="" y="" w="" h=""/>
<!-- Foreground-layer image -->
<LayerInfo src="" x="" y="" w="" h=""/>
</WindowParallax> Parameter | Type | Mandatory | Description |
posZ | Number | No | A pair of Z values of the background-layer and foreground-layer images, which are separated by a semicolon (;). For example, –3;–1.5, in which the value –3 indicates the Z value of the background-layer image, and –1.5 indicates that of the foreground-layer image. For each layer, the Z value ranges from –5 to 0. A smaller value indicates a longer distance away from the screen and a larger motion range when the phone moves. When the Z value of a layer is set to 0, the layer does not move along with the phone. The default value is –3;0. |
Parameters in the <LayerInfo> tag
Parameter | Type | Mandatory | Description |
src | String | Yes | Image name. |
x | Number | No | X coordinate of an image's upper left vertex relative to the screen's upper-left vertex, in pixels. The default value is 0. |
y | Number | No | Y coordinate of an image's upper left vertex relative to the screen's upper-left vertex, in pixels. The default value is 0. |
w | Number | Yes | Image display width, in pixels. |
h | Number | Yes | Image display height, in pixels. Expressions are supported. |
Set the Z value of the background-layer image bg.jpg to –1. Set the height and the width of the image respectively to a value larger than that of the screen to eliminate the error caused by offset. Implement a parallax animation that allows users to look into the background-layer image from the foreground-layer image in different angles.
<WindowParallax posZ="-1">
<LayerInfo src="bg.jpg" x="-#screen_width/4" y="-#screen_height/4" w="#screen_width*1.5" h="#screen_height*1.5"/>
<LayerInfo src="glass.png" x="0" y="0" w="#screen_width" h="#screen_height"/>
</WindowParallax>