CAAnimation 基本使用总结

2017-01-14 10:24:19来源:http://www.jianshu.com/p/ebbaa58b4722作者:倚楼听风雨wing人点击

第七城市


animation.gif

github地址:https://github.com/wangyansnow/WYAnimationDemo


一序言

众所周知在iOS上做动画很容易,因为系统提供了很强大的api,今天就是给系统的Core Animation做一个总结.


继承结构图



inherit.png

CAPropertyAnimation: 属性动画,是一个基类,一般使用它的两个子类:CABasicAnimationCAKeyframeAnimation.主要作用于CALayer的属性,使其产生动画效果.


CABasicAnimation *positionAnimation = [CABasicAnimation animationWithKeyPath:@"position"]

常用的keyPath: position, transform.rotation, transform.scale
transform.translation.y


二效果和Code

1.位移动画



位移position.gif
CABasicAnimation *positionAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
positionAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 400)];
[self.animationView.layer addAnimation:positionAnimation forKey:@"position"];

3.旋转动画



旋转rotation.gif
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
scaleAnimation.byValue = @1;
[self.animationView.layer addAnimation:scaleAnimation forKey:@"scale"];

4.关键帧动画



关键帧动画position.gif
CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
keyframeAnimation.values = @[NSVALUEPOINT(100, 200), NSVALUEPOINT(150, 200), NSVALUEPOINT(150, 300), NSVALUEPOINT(100, 300)];
keyframeAnimation.duration = 2.0;
[self.animationView.layer addAnimation:keyframeAnimation forKey:@"keyframe"];

5.路径动画



路径动画position.gif
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 200) radius:80.0 startAngle:0 endAngle:M_PI * 2 clockwise:YES].CGPath;
pathAnimation.duration = 2.0;
[self.animationView.layer addAnimation:pathAnimation forKey:@"path"];

6.左右抖动



抖动动画rotation.gif
CAKeyframeAnimation *leftRightAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
leftRightAnimation.values = @[@(-0.2), @0.2, @-0.2];
leftRightAnimation.repeatCount = CGFLOAT_MAX;
leftRightAnimation.duration = 0.5;
[self.animationView.layer addAnimation:leftRightAnimation forKey:@"leftRight"];

7.动画组



动画组.gif
CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
// 1.平移动画
CABasicAnimation *positionAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
positionAnimation.toValue = NSVALUEPOINT(200, 400);
// 2.缩放动画
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.byValue = @1;
// 3.左右抖动动画
CAKeyframeAnimation *leftRightAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
leftRightAnimation.values = @[@-0.2, @0.2, @-0.2];
leftRightAnimation.repeatCount = CGFLOAT_MAX;
leftRightAnimation.duration = 0.25;
groupAnimation.animations = @[positionAnimation, scaleAnimation, leftRightAnimation];
groupAnimation.duration = 2.0;
[self.animationView.layer addAnimation:groupAnimation forKey:@"group"];

8.转场动画



转场动画.gif
CATransition *transition = [CATransition animation];
/**
1.苹果定义的常量
kCATransitionFade 交叉淡化过渡
kCATransitionMoveIn 新视图移到旧视图上面
kCATransitionPush 新视图把旧视图推出去
kCATransitionReveal 将旧视图移开,显示下面的新视图
2.用字符串表示
pageCurl 向上翻一页
pageUnCurl 向下翻一页
rippleEffect 滴水效果
suckEffect 收缩效果,如一块布被抽走
cube 立方体效果
oglFlip 上下翻转效果
*/
transition.type = @"pageCurl";
// transition.type = kCATransitionMoveIn;
transition.subtype = kCATransitionFromLeft;
transition.duration = 1.0;
self.animationView.backgroundColor = [UIColor darkGrayColor];
[self.animationView.layer addAnimation:transition forKey:@"transition"];

三补充

在给layer添加动画addAnimation:forKey:记得带上key,这样在移除动画的时候可以移除指定key的动画.


// 移除所有动画
[self.animationView.layer removeAllAnimations];
// 移除key为position的动画
[self.animationView.layer removeAnimationForKey:@"position"];

使用核心动画是不会更改视图的frame的也就是,当动画结束后视图会回到初始位置.如果不想让视图回到初始位置可以使用


positionAnimation.removedOnCompletion = NO;
positionAnimation.fillMode = kCAFillModeForwards;

这里如果设置了removedOnCompletion为NO,则设置repeatCout将不会生效.




第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台