在項目過程中所涉及到的一個需求,效果和天貓京東等的那種控制器下沉,然后具體商品型號類型等的展示view彈出的效果差不多,經(jīng)過一些研究查閱之后做了一個非常簡單的實現(xiàn),大體效果如下:
record2.gif
實現(xiàn)方式是通過 ViewController+Category 的方式實現(xiàn)的,用分類的方式來實現(xiàn)不會對原有類產(chǎn)生任何影響.
動畫過程全都是以CATransform3D類來實現(xiàn)的,大體想法是以z軸為主要劃分軸,在x軸上來繞z軸轉(zhuǎn)動,將下沉和上升的動畫都區(qū)分成了兩段動畫,以下沉為例來分析:
第一段動畫為視圖繞x軸在z軸上的下沉過程:
record4.gif
動畫過程核心代碼:
- (CATransform3D)firstTransformType:(TransformType)type{
CATransform3D t1 = CATransform3DIdentity;
CGFloat m = 1.0/-900;
switch (type) {
case TransformTypeM32:
t1.m32 = m;
break;
default:
t1.m34 = m;
break;
}
//縮放
t1 = CATransform3DScale(t1, 0.95, 0.95, 1);
//繞x軸旋轉(zhuǎn)
t1 = CATransform3DRotate(t1, 15.0 * M_PI/180.0, 1, 0, 0);
return t1;
}
第二段動畫為視圖繞x軸在z軸上的上升過程,與第一段連起來做就是如下效果:
record6.gif
動畫過程核心代碼:
- (CATransform3D)secondTransformType:(TransformType)type{
CATransform3D t2 = CATransform3DIdentity;
switch (type) {
case TransformTypeM32:
t2.m32 = [self firstTransformType:type].m32;
break;
default:
t2.m34 = [self firstTransformType:type].m34;
break;
}
//向上移
t2 = CATransform3DTranslate(t2, 0, self.view.frame.size.height * (-0.08), 0);
//第二次縮放
t2 = CATransform3DScale(t2, 0.8, 0.8, 1);
return t2;
}
這樣的話一個下沉的效果就完成了,還原的做法正好是把這兩段動畫反過來,所以就不需要多說了..
PS: 如果不處理導(dǎo)航條的話,在實際應(yīng)用過程中會出現(xiàn)非常low的當(dāng)前控制器下沉了,但是導(dǎo)航條沒有變化的效果,所以在這里也已經(jīng)把當(dāng)前控制器有沒有在navigationBar上做了處理
最后效果:
record8.gif
做了一份完整的demo,放在了github上,有興趣的同學(xué)可以去看一下:傳送門 ,如果能幫忙點個贊就更好了,謝謝??
