iOS开发UI篇—核心动画(转场动画和组动画)

浏览数：18 / 时间：2015年06月11日

所谓的动画组就是将一些动画组合起来给layer使其的动画更丰富灵活。

它很简单，就是为其animations属性赋值一个动画数组。

[cpp] view plain copy

- (void)demoAnimationGroup
{
static NSString * const kCAPostionKeyPath = @"position";
static NSString * const kCAOpacityKeyPath = @"opacity";
static NSString * const kCARotationKeyPath = @"transform.rotation";
static NSString * const kCAScaleKeyPath = @"transform.scale";
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:_demoView.layer.position];
[path addCurveToPoint:CGPointMake(260, 400) controlPoint1:CGPointMake(0, 460) controlPoint2:CGPointMake(320, 0)];
//路径动画
CAKeyframeAnimation *posAnimation = [CAKeyframeAnimation animationWithKeyPath:kCAPostionKeyPath];
posAnimation.path = path.CGPath;
posAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//透明度动画
CABasicAnimation *opaAnimation = [CABasicAnimation animationWithKeyPath:kCAOpacityKeyPath];
opaAnimation.duration = 2.0f;
opaAnimation.toValue = @(0.3f);
opaAnimation.autoreverses = YES;
//旋转动画
CABasicAnimation *rotAnimation = [CABasicAnimation animationWithKeyPath:kCARotationKeyPath];
rotAnimation.duration = 2.0f;
rotAnimation.toValue = @(M_PI);
rotAnimation.autoreverses = YES;
//缩放动画
CABasicAnimation *scaAnmaiton = [CABasicAnimation animationWithKeyPath:kCAScaleKeyPath];
scaAnmaiton.duration = 2.0f;
scaAnmaiton.toValue = @(1.5f);
scaAnmaiton.autoreverses = YES;
//设置动画组
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[posAnimation, opaAnimation, rotAnimation, scaAnmaiton];
group.duration = 4.0f;
group.removedOnCompletion = NO;
group.fillMode = kCAFillModeForwards;
[_demoView.layer addAnimation:group forKey:nil];
}

这个动画组对demoView的layer加入了一些同时进行的动画，比如双控制点的贝塞尔路径，透明度的渐隐渐明，旋转以及缩放等。

CATransition

转场动画几乎在所有的APP上都能遇见，经常用于视图控制器的切换或者单视图控制器的页面切换等，也可以在自定义UIStoryboardSegue中来加入动画效果。

它也是CAAnimation的子类，能为图层提供移出屏幕和移入的动画效果。

其常用属性为

type 过渡类型

subtype 过渡类型的子类型，方向设置

其中过渡类型有很多，最初有四个版本，后来又加入了一些，以字符串形式设置。

最初的四个:fade,push,moveIn,reveal

以后加入的效果则更加丰富和炫目，有 cube, oglFlip, suckEffect, rippleEffect, pageCurl, pageUnCurl, cameraIrisHollowOpen, cameraIrisHollowClose。

[cpp] view plain copy

- (void)viewTransition
{
static NSString * const kCATransitionTypeFlip = @"oglFlip"; //翻页效果
CATransition *transition = [CATransition animation];
transition.type = kCATransitionTypeFlip;
transition.subtype = kCATransitionFromRight;
transition.duration = 1.5f;
[_transitionOrangeView.layer addAnimation:transition forKey:nil];
[self.view performSelector:@selector(sendSubviewToBack:) withObject:_transitionOrangeView afterDelay:1.0f];
}