[MIUI Theme Design] Add Bubble Animation to Lockscreen

Introduction:

This tutorial will tell you how to add bubble animation falling from top to buttom in the lockscreen as shown in the video. just follow the below 2 steps.


Video:




Code:

Code:

<!-- Bubble down Animation -->
    
    <Image x="388" y="0" src="1.png" >
      <PositionAnimation>
      <Position x="0" y="0" time="0"/>
      <Position x="100" y="640" time="7000"/>
      <Position x="-30" y="1280" time="12000"/>
      </PositionAnimation>
    </Image>
    
    <Image x="320" y="-100" src="2.png" >
      <PositionAnimation>
      <Position x="0" y="0" time="0"/>
      <Position x="-50" y="640" time="5000"/>
      <Position x="50" y="1280" time="9000"/>
      </PositionAnimation>
    </Image>
    
    <Image x="260" y="-50" src="1.png" >
      <PositionAnimation>
      <Position x="0" y="0" time="0"/>
      <Position x="-50" y="640" time="10000"/>
      <Position x="50" y="1280" time="15000"/>
      </PositionAnimation>
    </Image>
    
    <Image x="240" y="0" src="2.png" >
      <PositionAnimation>
      <Position x="0" y="0" time="0"/>
      <Position x="100" y="400" time="4000"/>
      <Position x="0" y="1280" time="10000"/>
      </PositionAnimation>
    </Image>
    
    <Image x="220" y="0" src="2.png" >
      <PositionAnimation>
      <Position x="0" y="0" time="0"/>
      <Position x="-50" y="500" time="9000"/>
      <Position x="50" y="1280" time="18000"/>
      </PositionAnimation>
    </Image>
    
    <Image x="500" y="-60" src="1.png" >
      <PositionAnimation>
      <Position x="0" y="0" time="0"/>
      <Position x="-50" y="500" time="10000"/>
      <Position x="50" y="1280" time="17000"/>
      </PositionAnimation>
    </Image>
    
    <Image x="0" y="-1280" src="3.png"  >
      <PositionAnimation>
      <Position x="0" y="0" time="0"/>
      
      <Position x="-60" y="2600" time="24000"/>
      <Position x="-60" y="2600" time="36000"/>
      </PositionAnimation>
    </Image>
  
    <Image x="0" y="-1280" src="3.png"  >
      <PositionAnimation>
      <Position x="0" y="0" time="12000"/>
      <Position x="-20" y="2600" time="36000"/>
      </PositionAnimation>
    </Image>

Steps:

1. Register an account at miui.co.in, otherwise you can't download the below attached zip file.
2. In "\lockscreen\advance" folder open "manifest.xml" and paste the above code in the last but before </Lockscreen>;.
3. Extract the zip file from attachment below and paste the three .png files in the "\lockscreen\advance" folder.
4. Done!! Simple is not it?

Credits:

helloansuman

Attached Files

•  Bobble Animation.zip (10.5 KB, 1 view)