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

工程下载地址点击 这里


转载于:https://www.cnblogs.com/dongfangzan/archive/2012/10/10/5978359.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值