Function
The status of element A can influence element B. For example, when a user taps element A, an explosion effect is implemented at element B.
XML Specifications
<?xml version="1.0" encoding="utf-8"?>
<Lockscreen version="1" frameRate="30" displayDesktop="true" screenWidth="1080" id="201706169895" xsdVersion="1" >
<!-- Initialization -->
<Var name="move_final_x" expression="0"/>
<Var name="move_final_y" expression="0"/>
<Var name="temp_y" expression="0"/>
<Var name="temp_y" expression="0"/>
<Var name="touch_x" expression="400"/>
<Var name="touch_y" expression="100"/>
<Var name="touch_xx" expression="600"/>
<Var name="touch_yy" expression="300"/>
<!-- Calculate the value of rotationY and translation of the cat's eyes in the X direction based on the X coordinate of the point tapped by the user's finger. -->
<Var name="move_x" expression="#touch_x-#touch_begin_x" threshold="1" >
<Trigger>
<!-- Control the rotation of digit images through condition, and specify the maximum value of touchx_xx in expression. -->
<VariableCommand name="touch_xx" expression="ifelse(le(#touch_x,100),100,ge(#touch_x,900),900,#touch_x)" condition="ge(#touch_x,100)*le(#touch_x,900)*ge(#touch_y,200)*le(#touch_y,600)"/>
<!-- Temporary variable for calculating the coordinates of the cat's eyes that move with the user's finger. 500 is the X coordinate of the eyes when they move to the farthest left or right vertex, and 0.3 is the translation coefficient. -->
<VariableCommand name="temp_x" expression="#move_final_x+(#touch_x-500)*0.3"/>
<!-- Specify the range in which the cat's eyes can move, and calculate the movement distance. -->
<VariableCommand name="move_final_x" expression="ifelse(le(#temp_x,-100),-100,gt(#temp_x,100),100,#temp_x"/>
</Trigger>
</Var>
<!-- Calculate the value of rotationX and the translation of the cat's eyes in the Y direction based on the Y coordinates of the point tapped by the user's finger, which is similar to the calculation in the X direction. -->
<Var name="move_y" expression="#touch_y-#touch_begin_y" threshold="1" >
<Trigger>
<VariableCommand name="touch_yy" expression="ifelse(le(#touch_y,200),200,ge(#touch_y,600),600,#touch_y)" condition="ge(#touch_x,100)*le(#touch_x,900)*ge(#touch_y,200)*le(#touch_y,600)"/>
<VariableCommand name="temp_y" expression="#move_final_y+(#touch_y-950)*0.3"/>
<VariableCommand name="move_final_y" expression="ifelse(le(#temp_y,-50),-50,gt(#temp_y,110),110,#temp_y)"/>
</Trigger>
</Var>
<!-- Background image -->
<Rectangle x="0" y="0" w="#screen_width" h="#screen_height" fillColor="#ffffff"/>
<!-- Cat eyes image -->
<Group x="#move_final_x" y="620+#move_final_y">
<Image src="lefteye.png" x="280" y="250" w="150" h="150"/>
<Image src="righteye.png" x="630" y="250" w="150" h="150"/>
</Group>
<!-- Cat image -->
<Image src="cat.png" x="0" y="500" w="#screen_width" h="1080*#screen_width/734"/>
<!-- Digital time images. Set the rotation center (pivotX, pivotY), with the origin being (x, y). Control the X-axis rotation of the image through touchY, and Y-axis rotation of the image through touchX. -->
<Time src="time.png" space="20" x="150" y="300" pivotX="400" pivotY="100" rotationX="-(#touch_yy-400)*0.1" rotationY="(#touch_xx-#screen_width/2)*0.05"/>
<!-- Fish image. Change the image position as the user's finger slides on the screen. -->
<Image src="fish.png" x="#touch_x-100" y="#touch_y-100" w="300" h="300"/>
<Button w="#screen_width" h="#screen_height">
<Trigger action="double">
<ExternCommand command="unlock"/>
</Trigger>
</Button>
</Lockscreen>