動畫效果仿自國外**readme.io的登入介面,超萌可愛的貓頭鷹,具體效果如下圖所示.
動畫實現核心:
動畫核心的是用到了ios中uiview的transform屬性,然後根據尺寸座標對四張進行平移以及縮放.
具體的圖層結構如圖所示:
注意點:
核心**:
//相對於初始位置的平移步驟1:主要檢視在storyborad中建立self.greenview.transform= cgaffinetransformmaketranslation(100,0);
//相對於上次位置的平移
self.greenview.transform= cgaffinetransformtranslate(self.greenview.transform,100,0);
//相對於初始尺寸的縮放,2是倍數
self.greenview.transform= cgaffinetransformmakescale(2,2);
//相對於上次的尺寸縮放0.5倍
self.greenview.transform= cgaffinetransformscale(self.greenview.transform,0.5,0.5);
1.將兩個小點手臂和頭部放到乙個view中.
2.將那兩個長的手臂放到乙個view中,然後將這個view堆疊到1中的view上,位置要對應,手正好能蒙住眼睛,這個view的屬性要設定為超出部分自動裁剪.view的顏色為透明.
3.最後的檢視效果是這樣的.
步驟2:
考慮到**的封裝性,我們可以這整個view關聯到乙個uiview的類中.
1.對圖中的4張拖線到剛剛新建的類中,建立4個uiimageview屬性.對一整個view進行拖線
//arm是長長的手臂2.在awakefromnib方法中對控制項進行初始化@property(weak,nonatomic)iboutletuiimageview*leftarm;
@property(weak,nonatomic)iboutletuiimageview*rightarm;
//hand是那兩個小圓點
@property(weak,nonatomic)iboutletuiimageview*lefthand;
@property(weak,nonatomic)iboutletuiimageview*righthand;
//包含5張的整個view
@property(weak,nonatomic)iboutletuiview*viewframe;
獲得手臂相對於一整個view的位置,以及整個view的寬高
//當前左手的位置根據以上資料計算得出,在初始狀態手臂的位置(注意:設定時手臂是蒙住眼睛的,初始狀態手臂是看不到的,只有兩個小點(hand))cgfloatleftarmx= self.leftarm.frame.origin.x;
cgfloatleftarmy= self.leftarm.frame.origin.y;
//當前右手的位置
cgfloatrightarmx= self.rightarm.frame.origin.x;
cgfloatrightarmy= self.rightarm.frame.origin.y;
//viewframe的寬高
cgfloatviewframeh= self.viewframe.frame.size.height;
cgfloatviewframew= self.viewframe.frame.size.width;
//為了便於以後的計算,將左右手的初始位置設定為屬性新增四個屬性//15為根據顯示的位置作適當調整的尺寸
self.leftarmx= -leftarmx- 15;
self.leftarmy= viewframeh- leftarmy;
self.rightarmx= viewframew- rightarmx- self.rightarm.frame.size.width+15;
self.rightarmy= viewframeh- rightarmy;
//根據計算出的左右手的初始位置,設定初始位置左右手的偏移量
self.rightarm.transform= cgaffinetransformmaketranslation(self.rightarmx,self.rightarmy);
self.leftarm.transform= cgaffinetransformmaketranslation(self.leftarmx,self.leftarmy);
@property(nonatomic,assign)cgfloatleftarmx;3.貓頭鷹的狀態有兩種,蒙住眼以及不矇眼的@property(nonatomic,assign)cgfloatleftarmy;
@property(nonatomic,assign)cgfloatrightarmx;
@property(nonatomic,assign)cgfloatrightarmy;
//方便呼叫,樣式:[self.loginanim startanim:yes];1.矇眼狀態- (void)startanim:(bool)iscoverd
if(iscoverd)];
}else];}
//手臂偏移到蒙住眼睛的位置2.不矇眼self.rightarm.transform= cgaffinetransformtranslate(self.rightarm.transform,-self.rightarmx,-self.rightarmy);
self.leftarm.transform= cgaffinetransformtranslate(self.leftarm.transform,-self.leftarmx,-self.leftarmy);
//小圓點移動到眼睛的位置,30為根據顯示位置手動調整的尺寸
cgaffinetransformrighthand= cgaffinetransformtranslate(self.rightarm.transform,-self.rightarmx,-self.rightarmy+30);
cgaffinetransformlefthand= cgaffinetransformtranslate(self.leftarm.transform,-self.leftarmx,-self.leftarmy+30);
//小圓點在移動的過程中逐漸減小
self.righthand.transform= cgaffinetransformscale(righthand,0.01,0.01);
self.lefthand.transform= cgaffinetransformscale(lefthand,0.01,0.01);
//兩個手臂回到初始化狀態至此萌版貓頭鷹登入動畫就完成了.self.rightarm.transform= cgaffinetransformmaketranslation(self.rightarmx,self.rightarmy);
self.leftarm.transform= cgaffinetransformmaketranslation(self.leftarmx,self.leftarmy);
//兩個小圓點回到預設設定
self.righthand.transform= cgaffinetransformidentity;
self.lefthand.transform= cgaffinetransformidentity;
螃蟹 貓頭鷹和蝙蝠
螃蟹 貓頭鷹和蝙蝠去上惡習糾正班。數年過後，它們都順利畢業並獲得博士學位。不過，螃蟹仍橫行，貓頭鷹仍白天睡覺晚上活動，蝙蝠仍倒懸。這是黃永玉大師的乙個寓言故事，它的寓意很簡單 行動比知識重要。如果一些連珠的妙語打動了你，如果一些文字或新信條啟發了你。那麼，這些別人的文字和經驗都只是乙個開始，更重要的...
螃蟹 貓頭鷹和蝙蝠
螃蟹 貓頭鷹和蝙蝠去上惡習糾正班。數年過後，它們都順利畢業並獲得博士學位。不過，螃蟹仍橫行，貓頭鷹仍白天睡覺晚上活動，蝙蝠仍倒懸。這是黃永玉大師的乙個寓言故事，它的寓意很簡單 行動比知識重要。如果一些連珠的妙語打動了你，如果一些文字或新信條啟發了你。那麼，這些別人的文字和經驗都只是乙個開始，更重要的...
螃蟹 貓頭鷹和蝙蝠
螃蟹 貓頭鷹和蝙蝠去上惡習糾正班。數年過後，它們都順利畢業並獲得博士學位。不過，螃蟹仍橫行，貓頭鷹仍白天睡覺晚上活動，蝙蝠仍倒懸。這是黃永玉大師的乙個寓言故事，它的寓意很簡單 行動比知識重要。如果一些連珠的妙語打動了你，如果一些文字或新信條啟發了你。那麼，這些別人的文字和經驗都只是乙個開始，更重要的...