ios属性动画之CASpringAnimation和关键帧动画

CASpringAnimation 弹簧动画
它属于基础动画 CABasicAnimation ->只能设置fromValue toValue
stiffness 刚度（劲度/弹性）刚度越大 形度产生的力就越大 运动越快
damping 阻力 阻力越大 停止越快
initialVelocity 初始速率，动画视图的初始速度大小 速率为正数时 速度方向与运动方向一致 速率为负数时 速度方向与运动方向相反
settlingDuration 获得动画完成的预估时间
案例：
先定义通过图片的属性：

@property (weak, nonatomic) IBOutlet UIImageView *img;

-(void)move:(CGPoint)position{
    /*
     CASpringAnimation -> CABasicAnimation ->CAPropertyAnimation
     初始化：+ (instancetype)animationWithKeyPath:(nullable NSString *)path;
     
     把动画添加到图层 addAnimation:forkey:
     */
    CASpringAnimation *animation = [CASpringAnimation animationWithKeyPath:@"position"];
    
//    CGPoint -> id
//    CGPoint -> NSValue
    animation.fromValue = [NSValue valueWithCGPoint:self.img.center];
    animation.toValue = [NSValue valueWithCGPoint:position];
//    设置fillModel 必须设置 removedOnCompletion
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeBoth;
    
    [self.img.layer addAnimation:animation forKey:@"move"];
    
}
-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    [self move:[[touches anyObject]locationInView:self.view]];
    
}

Untitled.gif

弹簧动画二：

#import "ViewController.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIButton *myButton;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
}

- (IBAction)sender:(id)sender {
    
    UIButton *button = sender;
    button.selected = !button.selected;
    button.backgroundColor = button.selected!=YES?[UIColor redColor]:[UIColor colorWithRed:0.490 green:1.000 blue:0.199 alpha:1.000];
    
    [self jamp];
}
-(void)jamp{
    CASpringAnimation *animation = [CASpringAnimation animationWithKeyPath:@"bounds"];
    animation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, CGRectGetWidth(self.myButton.frame)*1.5, CGRectGetHeight(self.myButton.frame)*1.5)];
    animation.mass = 2;
    //阻力
    animation.damping = 3;
    //初始速率
    animation.initialVelocity = 50;
    //刚度
    animation.stiffness = 100;
    //持续时间
    animation.duration = animation.settlingDuration;
    
    [self.myButton.layer addAnimation:animation forKey:@"jamp"];
}
-(void)move:(CGPoint)toPoint{
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
    animation.toValue = [NSValue valueWithCGPoint:toPoint];
    animation.duration = 3;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeBoth;
    [self.myButton.layer addAnimation:animation forKey:@""];
    
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    NSLog(@"button 改变位置 之前的中心点x:%f y:%f",self.myButton.center.x,self.myButton.center.y);
     NSLog(@"button 改变位置 之前的中心点x:%f y:%f",self.myButton.layer.position.x,self.myButton.layer.position.y);
    
    /*
     CAAnimation 只是改变图层的动画效果 并没有真实的改变 视图、图层的属性值
     */
    
    [self move:[[touches anyObject]locationInView:self.view]];
}

弹簧动画.gif

关键帧动画：
补间动画 两个值发生改变 中间产生的动画效果叫做补间动画

关键帧动画与基础动画的区别：
基础动画 只能是某属性的初始值 到另一个值 产生动画效果
关键帧动画 支持多个值（values）或者一个路径（path）
CAKeyframeAnimation
values：值得数组
path:值得路径
keyTimes：时间值（0，1）
timingFunction：速度控制的数组

calculationMode：动画样式
   KCAAnimationLinear 自定义控制动画的时间（线性）可以设置keyTimes
 
   kCAAnimationDiscrete 离散动画 没有任何补间动画 使用keyTimes@[@0.3,@0.5,@@1.0];
   kCAAnimationPaced 节奏动画 自动计算动画的运动时间
   kCAAnimationCubic 曲线动画 需要设置timingFunctions
   kCAAnimationCubicPaced 节奏曲线动画 自动计算

rotationMode：旋转的样式
  kCAAnimationRotateAuto 自动
  kCAAnimationRotateAutoReverse 自动翻转

关键帧动画可以根据你自己设置的轨迹进行变化
案例：

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor blackColor];
    
    [self.view.layer addSublayer:self.layer];
    [self.view.layer addSublayer:self.petalLayer];
}
-(void)demo1{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.values = @[[NSValue valueWithCGPoint:CGPointMake(100, 50)],[NSValue valueWithCGPoint:CGPointMake(200, 200)],[NSValue valueWithCGPoint:CGPointMake(100, 450)]];
    animation.duration = 3;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeBoth;
//    kCAAnimationCubicPaced 自动计算运动轨迹 补间动画的 时间
    animation.calculationMode = kCAAnimationCubicPaced;
//    旋转的模式 -> 使用的是 paths
//    animation.rotationMode = kCAAnimationRotateAutoReverse;
    [self.petalLayer addAnimation:animation forKey:@""];
    
}
-(void)demo2:(CGPoint)toPoint{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    //初始化
    UIBezierPath *path = [UIBezierPath bezierPath];
    //路径的起始点
    [path moveToPoint:self.petalLayer.position];
    [path addCurveToPoint:toPoint controlPoint1:CGPointMake(200, 200) controlPoint2:CGPointMake(150, 300)];
    
    animation.path = path.CGPath;
    animation.duration = 5;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeBoth;
    //    kCAAnimationCubicPaced 自动计算运动轨迹 补间动画的 时间
//    animation.calculationMode = kCAAnimationCubicPaced;
    //    旋转的模式 -> 使用的是 paths
        animation.rotationMode = kCAAnimationRotateAuto;
    [self.petalLayer addAnimation:animation forKey:@""];
    
}

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
//    [self demo1];
    [self demo2:[[touches anyObject]locationInView:self.view]];
}

- (CALayer *)petalLayer{
    if (_petalLayer) {
        return _petalLayer;
    }
    _petalLayer = [CALayer layer];
    _petalLayer.position = CGPointMake(self.view.center.x, 50);
    UIImage *image =[UIImage imageNamed:@"3"];
    _petalLayer.bounds = CGRectMake(0, 0, image.size.width, image.size.height);
    _petalLayer.contents = (id)image.CGImage;
    
    return _petalLayer;
}
//懒加载
- (CALayer *)layer{
    if (_layer) {
        return _layer;
    }
    _layer = [CALayer layer];
    _layer.position = CGPointMake(self.view.center.x, self.view.center.y+100);
    UIImage *image =[UIImage imageNamed:@"4"];
    _layer.bounds = CGRectMake(0, 0, image.size.width/2, image.size.height/2);
    _layer.contents = (id)image.CGImage;
    
    return _layer;
     
}

关键帧动画.gif

关键帧三：
首先我们要建立一个PatingView的类：

#import <UIKit/UIKit.h>

@interface PatingView : UIView

@property (nonatomic,strong) UIBezierPath *path;
@property (nonatomic,strong) CALayer *pointLayer;

-(void)animation;
@end

#import "PatingView.h"

@implementation PatingView

-(UIBezierPath *)path{
    if (_path !=nil) {
        return _path;
    }
    _path = [UIBezierPath bezierPath];
    return _path;
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    [self.path moveToPoint:[[touches anyObject]locationInView:self]];
    
}
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    [self.path addLineToPoint:[[touches anyObject]locationInView:self]];
//   重绘视图
    [self  setNeedsDisplay];
}
-(void)drawRect:(CGRect)rect{
    [[UIColor colorWithRed:0.403 green:0.197 blue:1.000 alpha:1.000]set];
    self.path.lineWidth = 2;
    [self.path stroke];
}
-(CALayer *)pointLayer{
    if (_pointLayer) {
        return _pointLayer;
    }
   
    _pointLayer = [CALayer layer];
    _pointLayer.frame = CGRectMake(-30, 0, 15, 15);
    _pointLayer.backgroundColor = [UIColor redColor].CGColor;
    _pointLayer.shadowColor = [UIColor yellowColor].CGColor;
    _pointLayer.shadowRadius = 15/2;
    _pointLayer.shadowOpacity = 0.8;
    _pointLayer.cornerRadius = 15/2;
//    [self.layer addSublayer:_pointLayer];
    
    //复制图层
    CAReplicatorLayer *layer = [CAReplicatorLayer layer];
    layer.frame = self.bounds;
    layer.instanceCount = 20;
    
    //instanceDelay 复制副本之间的延迟
    layer.instanceDelay = 0.5;
    layer.instanceColor = [UIColor redColor].CGColor;
    [self.layer addSublayer:layer];
    [layer addSublayer:_pointLayer];
    
    return _pointLayer;
}
-(void)animation{
    CAKeyframeAnimation *an = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    an.path = self.path.CGPath;
    an.repeatCount = HUGE;
    an.duration = 5;
    [self.pointLayer addAnimation:an forKey:@""];
}
@end

#import "ViewController.h"
#import "PatingView.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet PatingView *paintingView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
}
//这里的button是在storyBoard上建立的
- (IBAction)sender:(id)sender {

    [self.paintingView animation];
}

关键帧动画三.gif

《完》