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
《完》
