专栏首页APP自动化测试再谈CAAnimation动画

再谈CAAnimation动画

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

推荐阅读

  • 日访问百万级微信小程序优化技巧总结

    之前负责的锡慧在线小程序是一款公益性质在线教育类小程序,因疫情影响导致流量暴增,日访问过百万

    薛定喵君
    小程序微信缓存RedisCanvas
  • Spiral: 一个性能卓越的PHP/Golang混合开发框架

    春节期间,了解到一个“全新”的 WEB 开发框架:Spiral, 最开始引起我的兴趣是从同事那里听说了 RoadRunner. 然后去了解 RoadRunner 的时候看到了 Spiral. 之所以把“全新”用双引号引起来,是因为这个框架其实从 2013 年起就在它的开发团队以及一些企业客户中应用了,经历了各种实际应用场景的考验,Spiral 的功能及其丰富,性能与当前主流的 PHP 框架相比也相当出众。但这个框架源自俄国,在国内不算知名,他们团队开始重视和梳理开源,也应该是才开始的事情。

    小李刀刀
    PHPGoSymfony
  • kubernetes系列教程(二十)prometheus提供完备监控系统

    上一个章节中kubernetes系列教程(十九)使用metric-server让HPA弹性伸缩愉快运行介绍了在kubernetes中的监控架构,通过安装和使用metric-server提供kubernetes中的核心监控指标:提供node节点和pod容器CPU和内存的监控能力,核心监控指标提供的监控维度和指标相对有限,需要更好的扩展监控能力,需要使用自定义监控来实现,本文介绍prometheus提供更更加丰富的自定义监控能力。

    HappyLau谈云计算
    Kubernetes容器微服务云监控
  • 如何将设计思维应用到精益初创公司的软件开发

    我们所说的设计思维,是指由 IDEO 公司的 Tim Brown 提出,并且正在改变全世界组织的设计思维,简称 DT。(译者注:IDDO,当代最具影响力的设计公司之一)

    Aceyclee
    Serverless无服务器云函数
  • InnoDB 事务加锁分析

    一般大家对数据库事务的了解可能停留在事务的ACID特性以及事务4种不同的隔离级别层面上,而对于事务 4 种不同隔离级别如何实现了解相对较少。

    2020labs小助手
    MySQLSQL数据库MVCMVCC
  • FutureTask 核心源码解析

    研究源码,一般我们都从整体以及实例先入手,再研究细节,不至于一开始就“深陷其中而"当局者迷".

    JavaEdge
    HTTPJava
  • 200行代码落地人脸识别开锁应用

    2019年国庆,帮朋友实现了一个人脸识别进行开锁的功能,用在他的真人实景游戏业务中。几个月来运行稳定,体验良好,借着这个春节宅家的时间,整理一下这个应用的实现过程。

    高树磊
    人脸识别图像处理
  • 滑动验证码攻防对抗

        在业务安全领域,滑动验证码已经是国内继,传统字符型验证码之后的标配。众所周知,打码平台和机器学习这两种绕过验证码的方式,已经是攻击者很主流的思路,不再阐述。冷渗透介绍的是一个冷门的绕过思路和防御方案。这些积累,均来自于实战之中,希望有用。

    周俊辉
    HTTP网络安全安全网站
  • 程序员进阶必读,万字总结Mysql优化精华篇

    price decimal(8,2)有2位小数的定点数,定点数支持很大的数(甚至是超过int,bigint存储范围的数)

    程序员内点事
    全文检索缓存SQL数据库Python
  • 运维转型 | 运维人不再只是“救火英雄”

    各行各业都开启了数字化转型的进程,运维团队在这种时代的浪潮中又该何去何从?我在帮助一些企业落地了运维技术平台之后,开始反思这个问题,并将所思所想整理成本篇文章。

    嘉为科技
    企业运维自动化云计算

扫码关注云+社区

领取腾讯云代金券