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

来源：互联网发布：听故事的软件编辑：程序博客网时间：2024/04/28 20:33

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

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

其实实现起来也相当容易

使用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

工程下载地址点击这里