GitHub傳送門 mars 選擇城市動(dòng)畫
分析動(dòng)畫組成
- 3D旋轉(zhuǎn)
- CATransform3DRotate
CATransform3D transform = CATransform3DIdentity;
//m34 http://www.cnblogs.com/OIMM/p/5205528.html
//m43 z軸平移 由于兩個(gè)view做m34動(dòng)畫的時(shí)候會(huì)出現(xiàn)重疊 調(diào)整兩個(gè)視圖的z軸距離避免重疊
transform.m34 = -1.0/ 500;
if (isPush) {
transform.m43 = isLeft ? 1000:0;
} else {
transform.m43 = isLeft ? 0:1000;
}
//CATransform3D 幀動(dòng)畫
CAKeyframeAnimation *anim_3d = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
CATransform3D begin = CATransform3DRotate(transform, radianFromDegree(0), 0, 1, 0);
CATransform3D middle = CATransform3DRotate(transform, radianFromDegree(isLeft ? 25:-25), 0, 1, 0);
middle.m43 = 0;
CATransform3D end = CATransform3DRotate(transform, radianFromDegree(isLeft ? 10:0), 0, 1, 0);
if (isPush) {
end.m43 = isLeft ? -1000:0;
} else {
end.m43 = isLeft ? 0:-1000;
}
anim_3d.values = @[[NSValue valueWithCATransform3D: begin],[NSValue valueWithCATransform3D:middle] ,[NSValue valueWithCATransform3D:end]];
- 水平移動(dòng)
- transform.translation.x
- 縮小
- transform.scale
動(dòng)畫實(shí)現(xiàn)
- 利用iOS 核心動(dòng)畫 幀動(dòng)畫
動(dòng)畫效果
- 發(fā)現(xiàn)效果不如mars的完美 就當(dāng)是學(xué)習(xí)一下
<img src="http://upload-images.jianshu.io/upload_images/1899979-ff58980be24e69d9.gif?imageMogr2/auto-orient/strip" width="375">
