iOS核心动画-属性动画

属性动画 CAPropertyAnimation 基类 不能直接使用
子类:
1.CABasicAnimation 基础动画
2.CAKeyframeAnimation 关键帧动画

通过改变图层或者视图上面的属性值(支持动画的属性)产生的动画
属性动画的常用方法属性
1.初始化

+ (instancetype)animationWithKeyPath:(nullable NSString *)path

path:需要产生动画的属性 如:中心点 -> 移动
2.KeyPath 描述 动画的属性

可以通过改变animationWithKeyPath来改变动画的属性:
改变动画的属性:

 transform.scale = 比例转换
 transform.scale.x
 transform.scale.y
 transform.rotation.z
 opacity   透明度
 zPosition
 backgroundColor 背景颜色
 cornerRadius 拐角
 borderWidth  边框的宽度
 bounds
 contents     内容
 contentsRect
 frame
 hidden
 masksToBounds
 opacity
 position
 shadowColor
 shadowOffset
 shadowOpacity
 shadowRadius

基础动画 CABasicAnimation
介绍:通过改变某个属性的值 到某个值 只能设置两个值 产生的动画
fromValue 开始值 如果不设置不会返回到初始位置
toValue 结束值
byValue 通过哪个值

iOS核心动画-属性动画_第1张图片
心跳效果.gif


#import "ViewController.h"

@interface ViewController ()

//背景
@property(nonatomic,strong)CALayer *layer;
//花瓣
@property(nonatomic,strong)CALayer *petalLayer;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor blackColor];
    [self.view.layer addSublayer:self.layer];
//    [self.view.layer addSublayer:self.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;
}
-(CALayer *)petalLayer{
    
    if (_petalLayer) {
        return _petalLayer;
    }
    _petalLayer = [CALayer layer];
    _petalLayer.position= CGPointMake(self.view.center.x, 50);
    UIImage *image = [UIImage imageNamed:@"2"];
    _petalLayer.bounds = CGRectMake(0, 0, image.size.width, image.size.height);
    _petalLayer.contents = (id)image.CGImage;
    return _petalLayer;
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

//    [self demo1:[[touches anyObject] locationInView:self.view]];
    [self demo2];
}

//移动中心点
-(void)demo1:(CGPoint)toValue{

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
    //CGPoint -> 转id类型
    //CGPoint -> NSValue
    animation.fromValue = [NSValue valueWithCGPoint:self.petalLayer.position];
    //动画的持续时间
    animation.duration = 3;
    //动画执行的总时间 受动画速度的影响
//    animation.speed = 2;
    //设置动画完成的时候  固定在完成的状态
    //这个属性必须把removedOnCompletion 设置为NO 这个属性 才可以有效果
    animation.removedOnCompletion = NO;
    animation.toValue = [NSValue valueWithCGPoint:toValue];
    animation.fillMode = kCAFillModeBoth;
    //timingFunction可以控制动画的速度
    //快进慢出
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    //layer上添加动画效果 addAnimation: forKey:
    //forKey 表示动画的字符串 可以通过key 来找到这个动画
    [self.petalLayer addAnimation:animation forKey:@"可以通过这个key,找到此动画"];
    //查找某个key对应的动画
//    CABasicAnimation *an = (CABasicAnimation *)[self.petalLayer animationForKey:@"可以通过这个key,找到此动画"];
    
}
//心跳
-(void)demo2{
    self.view.backgroundColor = [UIColor whiteColor];
    UIImage *image = [UIImage imageNamed:@"心跳"];
    self.layer.contents = (id)image.CGImage;//为了方便,直接更换self.layer内容
    self.layer.bounds = CGRectMake(0, 0, image.size.width/10, image.size.height/10);
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds"];
    /*
       目标
     1.放大后还原到原来的位置 以动画的方法
     2.先慢后快
     3.一直循环
     */
    animation.fromValue = [NSValue valueWithCGRect:self.layer.bounds];
    animation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, image.size.width/5, image.size.height/5)];
    animation.repeatCount = HUGE;//无限循环
    animation.duration = 0.5;
    animation.autoreverses = YES;//以动画的效果返回到开始的状态
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.layer addAnimation:animation forKey:@"heartJamp"];
}

花瓣飘落,心跳的效果

Demo:https://github.com/AmazingWow/CAPropertyAnimation--DEMO

你可能感兴趣的:(iOS核心动画-属性动画)