今天看了一下艺龙客户端的首页,觉得效果特别不错,就自己手动实现了一下效果
从图中可以看出,首页是有几个大按钮,当点击其中一个按钮时,所有按钮左右散开,相应模块从背后弹出,效果相当不错
其实实现起来也相当容易
使用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
工程下载地址点击 这里