iOS动画之CAAnimation(CoreAnimation框
2017-01-10 本文已影响116人
张不二01
还是先祭出那张图：
CoreAnimation.png
- CAAnimation是一个抽象类，我们按照CABasicAnimation，CAKeyframeAnimation，
CATransition，CAAnimationGroup的顺序依次学习下核心动画框架下的几个类
首先先说一下其使用的大致过程：
1.初始化一个CAAnimation对象，并设置一些动画相关属性
2.通过调用CALayer的addAnimation:forKey:方法增加CAAnimation对象到CALayer中，这样就能开始执行动画了
3.通过调用CALayer的removeAnimationForKey:方法可以停止CALayer中的动画
下面详细的逐一讲解一下各个类：
1，CABasicAnimation
- fromValue --> toValue, 无叠加
- fromValue --> byValue，有叠加
- 代理方法是：<CAAnimationDelegate>
- 这个先提醒一下别忘记：
- (void)CABasicAnimation{
//CABasicAnimation fromValue --> toValue
//从第一个状态变化到第二个状态，toValue没有叠加，byValue则有叠加
//设置动画属性主要设置三个属性：
//第一个是keyPath，也就是决定动画类型
//第二个是fromValue，也就是初始值，可以不设置，默认是layer的初始值
//第三个是toValue或者byValue
//1，创建动画对象
CABasicAnimation *anim = [CABasicAnimation animation];
//2,设置动画对象属性
anim.delegate = self;
//byValue:有叠加
anim.keyPath = @"transform";
anim.byValue = [NSValue valueWithCATransform3D:CATransform3DScale(_imageView.layer.transform, 1.1, 1.1, 1.1)];
anim.duration = 2;
//anim.toValue:没有叠加的
/*缩放02这种动画是没有叠加的
anim.keyPath = @"transform";
anim.toValue = [NSValue valueWithCATransform3D:CATransform3DScale(_imageView.layer.transform, 1.1, 1.1, 1.1)];
anim.duration = 2;
*/
/*缩放01
anim.keyPath = @"bounds";
anim.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
anim.duration = 2;
*/
/*平移02
anim.keyPath = @"transform";
anim.toValue = [NSValue valueWithCATransform3D:CATransform3DTranslate(_imageView.layer.transform, 30, 200, 0)];
anim.duration = 2;
*/
/*平移01
anim.keyPath = @"position";
anim.duration = 3;
anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(_imageView.frame.origin.x+75, _imageView.frame.origin.y+75)];
anim.toValue = [NSValue valueWithCGPoint:CGPointMake(150, 300)];
*/
//保持最新动画�不删除
anim.removedOnCompletion = NO;
anim.fillMode = kCAFillModeForwards;
//3,添加动画
//注意：如果把anim.keyPath = @"transform";这句话删除，而在下面这句话中设置key的话
//那么这个动画是完全基于_imageView，无论如何都不会有叠加效果，即使用了byValue
[_imageView.layer addAnimation:anim forKey:nil];
}
- (void)animationDidStart:(CAAnimation *)anim{
NSLog(@"animationDidStart");
}
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
NSLog(@"animationDidStop");
}
2，CAKeyframeAnimation
- (void)CAKeyframeAnimation{
CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
anim.keyPath = @"position";
//还可以通过代理方法进行监听
anim.delegate = self;
//动画节奏
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//图形路径
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, NULL, CGRectMake(100, 100, 200, 200));
anim.path = path;
CGPathRelease(path);
/*自定义路径
NSValue *v1 = [NSValue valueWithCGPoint:CGPointMake(_imageView.frame.origin.x+75, _imageView.frame.origin.y+75)];
NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(80, 100)];
NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(80, 400)];
NSValue *v4 = [NSValue valueWithCGPoint:CGPointMake(0, 200)];
NSValue *v5 = [NSValue valueWithCGPoint:CGPointMake(50, 400)];
anim.values = @[v1,v2,v3,v4,v5];
// anim.keyTimes = @[@0.1,@0.3,@0.4,@0.1,@0.1];
*/
anim.duration = 5;
anim.repeatCount = 5;
anim.fillMode = kCAFillModeForwards;
anim.removedOnCompletion = NO;
[_imageView.layer addAnimation:anim forKey:nil];
}
- (void)animationDidStart:(CAAnimation *)anim{
NSLog(@"animationDidStart");
}
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
NSLog(@"animationDidStop");
}
3，CATransition
- 使用方法和上面都是类似的，下面是一些常用的属性
/*
// 过渡效果
fade //交叉淡化过渡(不支持过渡方向) kCATransitionFade
push //新视图把旧视图推出去 kCATransitionPush
moveIn //新视图移到旧视图上面 kCATransitionMoveIn
reveal //将旧视图移开,显示下面的新视图 kCATransitionReveal
cube //立方体翻滚效果
oglFlip //上下左右翻转效果
suckEffect //收缩效果，如一块布被抽走(不支持过渡方向)
rippleEffect //滴水效果(不支持过渡方向)
pageCurl //向上翻页效果
pageUnCurl //向下翻页效果
cameraIrisHollowOpen //相机镜头打开效果(不支持过渡方向)
cameraIrisHollowClose //相机镜头关上效果(不支持过渡方向)
//过渡方向
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromBottom
kCATransitionFromTop
*/
//CATransition的使用
CATransition *anim = [CATransition animation];
anim.type = @“cube”; // 动画过渡类型
anim.subtype = kCATransitionFromTop; // 动画过渡方向
anim.duration = 1; // 动画持续1s
// 代理，动画执行完毕后会调用delegate的animationDidStop:finished:
anim.delegate = self;
[layer addAnimation:anim forKey:nil];
- 下面把一个图片浏览器的代码拿过来看一下：
转场动画.gif
- 代码是非常简单的
- (IBAction)change:(UIButton *)btn {
//创建专场动画
CATransition *anim = [CATransition animation];
anim.type = @"pageCurl";
anim.duration = 1;
//根据具体情况设置方向
static int i = 1;
if (btn.tag == 0) {//往上翻图片
NSLog(@"previous");
anim.subtype = kCATransitionFromLeft;
if (i>1) {
i -=1;
}else{
i=4;
}
}else if (btn.tag == 1){//向下翻图片
NSLog(@"next");
anim.subtype = kCATransitionFromRight;
if (i<4) {
i +=1;
}else{
i=1;
}
}
NSString *imageName = [NSString stringWithFormat:@"%0.2d.png",i];
_imImageView.image = [UIImage imageNamed:imageName];
//添加到图层上
[_imImageView.layer addAnimation:anim forKey:nil];
}
4，CAAnimationGroup
- 多个不同类型的动画需要同时执行，如下需要一边翻转一边缩放：
组动画.gif
- (void)CAAnimationGroup{
NSLog(@"group");
CAAnimationGroup *animGroup = [CAAnimationGroup animation];
//创建一个动画
// CABasicAnimation *anim01 = [CABasicAnimation animation];
// anim01.keyPath = @"transform";
// NSValue *byValue = [NSValue valueWithCATransform3D:CATransform3DTranslate(_imageView.layer.transform, 0, 100, 0)];
// anim01.byValue = byValue;
// anim01.duration = 2;
// anim01.removedOnCompletion = NO;
// anim01.fillMode = kCAFillModeForwards;
//再来一个过渡(好像过渡效果是不行的)
// CATransition *anim02 = [CATransition animation];
// anim02.type = @"cube";
// anim02.duration =2;
//创建一个动画
CABasicAnimation *anim03 = [CABasicAnimation animation];
anim03.keyPath = @"transform.rotation";
anim03.byValue = @(M_PI);
//创建一个动画
CABasicAnimation *anim04 = [CABasicAnimation animation];
anim04.keyPath = @"transform.scale";
anim04.toValue = @0;
animGroup.animations = @[anim03,anim04];
animGroup.duration = 5;
//如果想要叠加那么必须设置组的下面这两个属性，至于单个的动画设置或者不设置都OK的
animGroup.removedOnCompletion = NO;
animGroup.fillMode = kCAFillModeForwards;
[_imageView.layer addAnimation:animGroup forKey:nil];
}
