再谈CAAnimation动画

首页 > 代码库 > 再谈CAAnimation动画

2024-08-30 18:34:33 217人阅读

CAAnimaton动画分为CABasicAnimation & CAKeyframeAnimation

CABasicAnimation动画，

顾名思义就是最基本的动画，老规矩先上代码：

//1.先创建一个要执行动画的View
    UIView *actView = ({
    
        UIView *view         = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
        view.backgroundColor = [UIColor redColor];
        
        view;
    });
    
    [self.view addSubview:actView];

//2 创建CABasicAnimation位移动画
    CABasicAnimation *basicAnimation = ({
    
        CABasicAnimation *animation   = [CABasicAnimation animationWithKeyPath:@"position"];
        animation.removedOnCompletion = NO;
        animation.fillMode            = kCAFillModeForwards;
        animation.duration            = 2;
        animation.repeatCount         = 10;
        animation.beginTime           = CACurrentMediaTime() + 5;
        animation.toValue             = [NSValue valueWithCGPoint:CGPointMake(400, 400)];
        
        animation;
    });

//3. 将动画添加到view的layer层
    [actView.layer addAnimation:basicAnimation forKey:@"first"];

技术分享

gif是抄的老司机的

首先创建动画的时候我们直接指定keypath为“position”位移动画，还有哪些动画可以设定呢？

可以查看CALayer的源码

/* The bounds of the layer. Defaults to CGRectZero. Animatable. */

@property CGRect bounds;

只要有标注Animatable的属性都可以做动画，我们罗列下做个记录方便以后查看

@property CGRect bounds;

@property CGPoint position;

@property CGFloat zPosition;

@property CGPoint anchorPoint;

@property CGFloat anchorPointZ;

@property CATransform3D transform;

@property(getter=isHidden) BOOL hidden;

@property(getter=isDoubleSided) BOOL doubleSided;

@property CATransform3D sublayerTransform;

@property BOOL masksToBounds;

@property(nullable, strong) id contents;

@property CGRect contentsRect;

@property CGFloat contentsScale；

@property CGRect contentsCenter;

@property float minificationFilterBias;

@property(nullable) CGColorRef backgroundColor;

@property CGFloat cornerRadius;

@property CGFloat borderWidth;

@property(nullable) CGColorRef borderColor;

@property float opacity;

@property(nullable, copy) NSArray *filters;

@property(nullable, copy) NSArray *backgroundFilters;

@property BOOL shouldRasterize;

@property CGFloat rasterizationScale;

@property(nullable) CGColorRef shadowColor;

@property float shadowOpacity;

@property CGSize shadowOffset;

@property CGFloat shadowRadius;

@property(nullable) CGPathRef shadowPath;

虽然是取名字是BasicAnimation，但能实现到动画还是挺多的，后面有空再逐个试验下

removedOnCompletion ＝ NO，是否在播放完成后移除。这是一个非常重要的属性，有的时候我们希望动画播放完成，但是保留最终的播放效果是，这个属性一定要改为NO，否则无效。

fillMode，是播放结束后的状态。他有四个枚举值

kCAFillModeForwards//保持结束时状态
kCAFillModeBackwards//保持开始时状态
kCAFillModeBoth//保持两者，我没懂两者是什么概念，实际使用中与kCAFillModeBackwards相同
kCAFillModeRemoved//移除

这个属性使用的时候要设置removedOnCompletion = NO，

duration，是动画持续时间

repeatCount，动画重复次数，默认不重复

beginTime，动画延时

toValue，动画最后的位置注意时NSValue封装

还有一个fromValue，动画开始的位置，不设置的话就是View当前的位置

下面时用CABasicAnimation写的动画修改圆角的动画，把一个正方形慢慢变成圆形

CABasicAnimation *basicAnimation2 = ({
        
        CABasicAnimation *animation   = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
        animation.removedOnCompletion = NO;
        animation.fillMode            = kCAFillModeForwards;
        animation.duration            = 2;
        animation.toValue             = @50;
        
        animation;
    });

大家可以复制到Xcode中去试试效果

CAKeyframeAnimation关键帧动画

相比BasicAnimation， KeyframeAnimation更为灵活，可以设置多段动画

一样上代码先

CAKeyframeAnimation *keyframeAnimation = ({
    
        CAKeyframeAnimation *animation   = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        animation.removedOnCompletion    = NO;
        animation.fillMode               = kCAFillModeForwards;
        animation.duration               = 2;
        animation.repeatCount            = 10;
        animation.beginTime              = CACurrentMediaTime() + 5;
        animation.calculationMode        = kCAAnimationCubicPaced;
        animation.keyTimes               = @[@0, @0.25, @0.5];
        animation.values                 = @[[NSValue valueWithCGPoint:CGPointMake(0, 0)],
                                             [NSValue valueWithCGPoint:CGPointMake(200, 200)],
                                             [NSValue valueWithCGPoint:CGPointMake(0,400)]];
        
        animation;
    });

技术分享

大部分根CABasicAnimation差不多，我说说不一样的地方

calculationMode，设置为kCAAnimationCubicPaced后动画在转角更加平滑，否则会有明显的停顿

大家可以注销这行代码试试看

keyTime饰设置每一段动画的速度，不设置的话默认为匀速，这个地方注意有几段动画就要设置段数＋1个速度，第一个一般是0，如果有少写后面的漏掉的部分动画就不会执行

values，就是设置动画线路内容是NSValue封装的CGpoint

还有一个变量Path可以设置，这个属性可以用UIBezierPath来设定特殊形状的路径，如果有设置path属性， values属性就不会生效了

上代码

    CAKeyframeAnimation *keyframeAnimation = ({
    
        CAKeyframeAnimation *animation   = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        animation.removedOnCompletion    = NO;
        animation.fillMode               = kCAFillModeForwards;
        animation.duration               = 2;
        animation.repeatCount            = 10;
        animation.beginTime              = CACurrentMediaTime() + 5;
        animation.calculationMode        = kCAAnimationCubicPaced;
        animation.keyTimes               = @[@0, @0.25, @0.5, @0.75, @1];
        animation.values                 = @[[NSValue valueWithCGPoint:CGPointMake(0, 0)],
                                             [NSValue valueWithCGPoint:CGPointMake(200, 200)],
                                             [NSValue valueWithCGPoint:CGPointMake(0,400)]];
        animation.path                   = [UIBezierPath bezierPathWithOvalInRect:                                            CGRectMake(100, 100, 100, 100)].CGPath;
        
        animation;
    });

技术分享

关于UIBezierPath后面会再单独

然后我们说下动画组， CAAnimation是可以几个动画合并在一起的

上代码：

//2.2 创建CABasicAnimation动画
    CABasicAnimation *basicAnimation2 = ({
        
        CABasicAnimation *animation   = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
        animation.removedOnCompletion = NO;
        animation.fillMode            = kCAFillModeForwards;
        animation.duration            = 2;
        animation.toValue             = @50;
        
        animation;
    });
    
    //2.3 创建CAKeyframeAnimation动画
    CAKeyframeAnimation *keyframeAnimation = ({
    
        CAKeyframeAnimation *animation   = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        animation.removedOnCompletion    = NO;
        animation.fillMode               = kCAFillModeForwards;
        animation.duration               = 2;
        animation.calculationMode        = kCAAnimationCubicPaced;
        animation.keyTimes               = @[@0, @0.25, @0.5, @0.75, @1];
        animation.path                   = [UIBezierPath bezierPathWithOvalInRect:                                            CGRectMake(100, 100, 100, 100)].CGPath;
        
        animation;
    });
    
    //3. 创建动画组
    CAAnimationGroup *group = ({
    
        CAAnimationGroup *group   = [CAAnimationGroup animation];
        group.duration            = 2;
        group.fillMode            = kCAFillModeForwards;
        group.removedOnCompletion = NO;
        group.animations          = @[basicAnimation2, keyframeAnimation];
        
        group;
    });
    
    //4. 将动画添加到view的layer层
    [actView.layer addAnimation:group forKey:@"first"];

技术分享

这里我们把上面创建的一个动画修改圆角跟沿着正方形路线走的动画加入到一个CAAnimationGroup中

这里在要加入组中的动画最后不要设置延迟时间，可能会出问题

老司机说animations数组中你的所有CAAnimaiton对象请安beginTime进行升序排列

但海没明白怎么回事这部分后面找时间看下

利用缓动函数配合关键帧动画实现比较复杂的物理性动画

先说说什么是缓动函数, 就是有高人写了一个库可以计算出模拟物理性动画(比如弹簧效果)所要的路径

Github地址: https://github.com/YouXianMing/EasingAnimation

具体有哪些动画效果可看库中的缓动函数查询表, 简单举个小球落地的效果

上代码:

//设置原始画面
    UIView *showView               = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    showView.layer.masksToBounds   = YES;
    showView.layer.cornerRadius    = 50.f;
    showView.layer.backgroundColor = [UIColor redColor].CGColor;
    
    [self.view addSubview:showView];
    
    //创建关键帧动画
    CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
    
    //设置动画属性
    keyFrameAnimation.keyPath              = @"position";
    keyFrameAnimation.duration             = 4.0f;
    
　　　　//关键处, 在这里使用的缓动函数计算点路径
    keyFrameAnimation.values = [YXEasing calculateFrameFromPoint:showView.center
                                                         toPoint:CGPointMake(50, 300)
                                                            func:BounceEaseOut
                                                      frameCount:4.0f * 30];
    
    //设置动画结束位置
    showView.center = CGPointMake(50, 300);
    
    //添加动画到layer层
    [showView.layer addAnimation:keyFrameAnimation forKey:nil];

最后还有

CATransition

专场动画，我们再后面一篇中来讲

再谈CAAnimation动画

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 再谈CAAnimation动画

再谈CAAnimation动画

CATransition

看完仍有疑问？有类似问题直接问程序猿