CoreAnimation——类似艺龙客户端首页的撕裂+后台推送效果

今天看了一下艺龙客户端的首页，觉得效果特别不错，就自己手动实现了一下效果

从图中可以看出，首页是有几个大按钮，当点击其中一个按钮时，所有按钮左右散开，相应模块从背后弹出，效果相当不错

其实实现起来也相当容易

使用CABasicAnimation对每一个按钮添加一个动画

- (CAAnimation *)animationWithType:(NSString *)type atPosition:(float)number
{
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:type];
    animation.toValue = [NSNumber numberWithFloat:number];
    animation.fillMode = kCAFillModeForwards;
    animation.duration = 0.25f;
    animation.removedOnCompletion = NO;
    
    return animation;
}

可以自己设定左右或者上下进行挪动

主要是后面推送的相应模块，因为在推送时，不仅有尺度变化，而且还有透明度的变化，这里要用到CAAnimationGroup进行组合

CABasicAnimation *shrinkAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    shrinkAnimation.fromValue = [NSNumber numberWithFloat:0.7f];
    shrinkAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    shrinkAnimation.duration = 0.35f;
    shrinkAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    
    CABasicAnimation *fadeAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    fadeAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    fadeAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    shrinkAnimation.duration = 0.35f;
    
    CAAnimationGroup *animations = [CAAnimationGroup animation];
    animations.animations = [NSArray arrayWithObjects:shrinkAnimation,fadeAnimation, nil];
    [next.view.layer addAnimation:animations forKey:nil];

最后需要注意的是，当你要退回主界面时，要将后面推上来的view给remove掉，但不是马上，而是等动画结束后

[currentView performSelector:@selector(removeFromSuperview) withObject:nil afterDelay:0.35];

编译环境：Xcode4.4.1+mac os x 10.8

工程下载地址点击 这里