CAAnimaton动画分为CABasicAnimation & CAKeyframeAnimation

CABasicAnimation动画

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

//1.先创建一个要执行动画的View
UIView *actView = ({ UIView *view = [[UIView alloc] initWithFrame:CGRectMake(, , , )];
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 = ;
animation.repeatCount = ;
animation.beginTime = CACurrentMediaTime() + ;
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(, )]; 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 = ;
animation.toValue = @; animation;
});

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

CAKeyframeAnimation关键帧动画

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

一样上代码先

CAKeyframeAnimation *keyframeAnimation = ({

        CAKeyframeAnimation *animation   = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.duration = ;
animation.repeatCount = ;
animation.beginTime = CACurrentMediaTime() + ;
animation.calculationMode = kCAAnimationCubicPaced;
animation.keyTimes = @[@, @0.25, @0.5];
animation.values = @[[NSValue valueWithCGPoint:CGPointMake(, )],
[NSValue valueWithCGPoint:CGPointMake(, )],
[NSValue valueWithCGPoint:CGPointMake(,)]]; 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 = ;
animation.repeatCount = ;
animation.beginTime = CACurrentMediaTime() + ;
animation.calculationMode = kCAAnimationCubicPaced;
animation.keyTimes = @[@, @0.25, @0.5, @0.75, @];
animation.values = @[[NSValue valueWithCGPoint:CGPointMake(, )],
[NSValue valueWithCGPoint:CGPointMake(, )],
[NSValue valueWithCGPoint:CGPointMake(,)]];
animation.path = [UIBezierPath bezierPathWithOvalInRect:\
CGRectMake(, , , )].CGPath; animation;
});

关于UIBezierPath后面会再单独

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

上代码:

//2.2 创建CABasicAnimation动画
CABasicAnimation *basicAnimation2 = ({ CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.duration = ;
animation.toValue = @; animation;
}); //2.3 创建CAKeyframeAnimation动画
CAKeyframeAnimation *keyframeAnimation = ({ CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.duration = ;
animation.calculationMode = kCAAnimationCubicPaced;
animation.keyTimes = @[@, @0.25, @0.5, @0.75, @];
animation.path = [UIBezierPath bezierPathWithOvalInRect:\
CGRectMake(, , , )].CGPath; animation;
}); //3. 创建动画组
CAAnimationGroup *group = ({ CAAnimationGroup *group = [CAAnimationGroup animation];
group.duration = ;
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(, , , )];
showView.layer.masksToBounds = YES;
showView.layer.cornerRadius = .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(, )
func:BounceEaseOut
frameCount:4.0f * ]; //设置动画结束位置
showView.center = CGPointMake(, ); //添加动画到layer层
[showView.layer addAnimation:keyFrameAnimation forKey:nil];

最后还有

CATransition

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

再谈CAAnimation动画的更多相关文章

  1. 再谈CSS动画 - 说点不知道的(一)贝塞尔曲线

    今天重新翻看<CSS 揭秘>"过渡与动画"一章,并把该章代码重新敲了一遍,代码托管在我的Github,在此总结一些心得. 动画的奥秘 在网页中添加动画的目的是让用户有更 ...

  2. 安卓开发_浅谈Android动画(四)

    Property动画 概念:属性动画,即通过改变对象属性的动画. 特点:属性动画真正改变了一个UI控件,包括其事件触发焦点的位置 一.重要的动画类及属性值: 1.  ValueAnimator 基本属 ...

  3. Unity教程之再谈Unity中的优化技术

    这是从 Unity教程之再谈Unity中的优化技术 这篇文章里提取出来的一部分,这篇文章让我学到了挺多可能我应该知道却还没知道的知识,写的挺好的 优化几何体   这一步主要是为了针对性能瓶颈中的”顶点 ...

  4. mui初级入门教程(四)— 再谈webview,从小白变“大神”!

    文章来源:小青年原创发布时间:2016-06-05关键词:mui,html5+,webview转载需标注本文原始地址: http://zhaomenghuan.github.io/#!/blog/20 ...

  5. [转载]再谈百度:KPI、无人机,以及一个必须给父母看的案例

    [转载]再谈百度:KPI.无人机,以及一个必须给父母看的案例 发表于 2016-03-15   |   0 Comments   |   阅读次数 33 原文: 再谈百度:KPI.无人机,以及一个必须 ...

  6. Support Vector Machine (3) : 再谈泛化误差(Generalization Error)

    目录 Support Vector Machine (1) : 简单SVM原理 Support Vector Machine (2) : Sequential Minimal Optimization ...

  7. 浅谈HTTP中Get与Post的区别/HTTP协议与HTML表单(再谈GET与POST的区别)

    HTTP协议与HTML表单(再谈GET与POST的区别) GET方式在request-line中传送数据:POST方式在request-line及request-body中均可以传送数据. http: ...

  8. Another Look at Events(再谈Events)

    转载:http://www.qtcn.org/bbs/simple/?t31383.html Another Look at Events(再谈Events) 最近在学习Qt事件处理的时候发现一篇很不 ...

  9. C++ Primer 学习笔记_32_STL实践与分析(6) --再谈string类型(下)

    STL实践与分析 --再谈string类型(下) 四.string类型的查找操作 string类型提供了6种查找函数,每种函数以不同形式的find命名.这些操作所有返回string::size_typ ...

随机推荐

  1. js中参数不对应问题

    因为js是一种弱类型的编程语言,对数据类型的要求没有其他编程语言的要求严格,所以在定义函数的时候不需要像java和C#一样对其传入参数的类型进行定义.那么传入参数的个数有没有影响呢?今天小猪就做了个实 ...

  2. C语言 · Anagrams问题

    问题描述 Anagrams指的是具有如下特性的两个单词:在这两个单词当中,每一个英文字母(不区分大小写)所出现的次数都是相同的.例如,"Unclear"和"Nuclear ...

  3. C# 正则表达式大全

    文章导读 正则表达式的本质是使用一系列特殊字符模式,来表示某一类字符串.正则表达式无疑是处理文本最有力的工具,而.NET提供的Regex类实现了验证正则表达式的方法.Regex 类表示不可变(只读)的 ...

  4. EF上下文对象线程内唯一性与优化

    在一次请求中,即一个线程内,若是用到EF数据上下文对象,就创建一个,这也加是很多人的代码中习惯在使用上下文对象时,习惯将对象建立在using中,也是为了尽早释放上下文对象, 但是如果有一个业务逻辑调用 ...

  5. VS2015在创建项目时的一些注意事项

    一.下面是在创建一个新的项目是我最常用的,现在对他们一一做一个详细的介绍: 1.Win32控制台应用程序我平时编写小的C/C++程序都用它,它应该是用的最多的. 2.名称和解决方案名称的区别:名称是项 ...

  6. 使用Expression实现数据的任意字段过滤(1)

    在项目常常要和数据表格打交道. 现在BS的通常做法都是前端用一个js的Grid控件, 然后通过ajax的方式从后台加载数据, 然后将数据和Grid绑定. 数据往往不是一页可以显示完的, 所以要加分页: ...

  7. 后缀数组的倍增算法(Prefix Doubling)

    后缀数组的倍增算法(Prefix Doubling) 文本内容除特殊注明外,均在知识共享署名-非商业性使用-相同方式共享 3.0协议下提供,附加条款亦可能应用. 最近在自学习BWT算法(Burrows ...

  8. iOS - 模态Model视图跳转和Push视图跳转的混合需求实现原理

    在研发中总会遇到一些莫名的需求,本着存在即合理的态度跟大家分享一下"模态Model视图跳转和Push视图跳转的需求实现",本文仅仅传授研发技术不传授产品以及UE的思想,请大家合理对 ...

  9. CentOS7下自定义目录安装mono+jexus教程

    一.阅读前须知: 1.本文属于安装完Centos7之后的步骤 2.如果还不了解mono,请点击mono 3.本篇主要内容是使用自定义目录安装mono+jexus教程,使用默认目录请查看使用默认目录安装 ...

  10. 【腾讯Bugly干货分享】JSPatch 成长之路

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/579efa7083355a9a57a1ac5b Dev Club 是一个交流移动 ...