转场动画实现 mars 城市选择动画

GitHub传送门 mars 选择城市动画

分析动画组成

• 3D旋转
  • CATransform3DRotate

CATransform3D transform = CATransform3DIdentity;
    
    //m34 http://www.cnblogs.com/OIMM/p/5205528.html
    //m43 z轴平移 由于两个view做m34动画的时候会出现重叠 调整两个视图的z轴距离避免重叠
    transform.m34 = -1.0/ 500;
    if (isPush) {
        transform.m43 = isLeft ? 1000:0;
    } else {
        transform.m43 = isLeft ? 0:1000;
    }
    
    //CATransform3D 帧动画
    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]];

• 水平移动
  • transform.translation.x
• 缩小
  • transform.scale

动画实现

• 利用iOS 核心动画 帧动画

动画效果

• 发现效果不如mars的完美 就当是学习一下