HUAWEI.gif
HUAWEI (1).gif
主要分3個(gè)小塊: 發(fā)射器, 氣泡, 圓環(huán)
思路:
一.發(fā)射器(完全不透明):
位于屏幕最下方, 取圓弧上的3點(diǎn), 用3階貝塞爾曲線構(gòu)成path
二.氣泡(不完全透明):
1.發(fā)射器處隨機(jī)產(chǎn)生氣泡,氣泡的數(shù)量默認(rèn)為10;
2.氣泡未離開發(fā)射器的部分會(huì)被發(fā)射器遮擋;
3.氣泡剛離開發(fā)射器,會(huì)有一個(gè)黏性的變化效果, 使用3階貝塞爾曲線,將多個(gè)變化的點(diǎn)連接起來(lái),構(gòu)成path;
4.氣泡在往上移動(dòng)中,半徑會(huì)變小, 小于一定值,氣泡會(huì)消失;
5.氣泡靠近圓環(huán)到一定距離,也會(huì)有一個(gè)黏性變化效果,并且速度變慢, 使用方式類似于3
6.氣泡與圓環(huán)的零距離時(shí),氣泡消失
三.圓環(huán)(不完全透明):
1.由多個(gè)長(zhǎng)度不一的片段構(gòu)成, 圓弧上的3個(gè)點(diǎn)構(gòu)成一個(gè)片段,采用的也是3階貝塞爾曲線;
2.每個(gè)片段都圍繞圓環(huán)中心旋轉(zhuǎn),透明度在某個(gè)區(qū)間不斷變化; 旋轉(zhuǎn)速度在某幾個(gè)值之間也不斷改變,從而影響片段之間的開口大小
3.如果手機(jī)電量發(fā)生改變，顯示的電量百分比也發(fā)生改變；拖動(dòng)進(jìn)度條可改變電量百分比和 發(fā)射器,氣泡,圓環(huán)的顏色
