在iOS开发中,制作动画效果是最让开发者享受的环节之一。一个设计严谨、精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而言是非常重要的。我们总是追求更为酷炫的实现,如果足够仔细,我们不难发现一个好的动画通过步骤分解后本质上不过是一个个简单的动画实现。本文就个人搜集的一些动画相关的理论和实践知识做个小结,不足之处请勿见怪。

理论 UIview VS UIlayer

UIView只是CALyer之上的封装,更准确的来说,UIView是CALyer的简版封装,加上事件处理的集合类。 CALayer是QuartzCore库内的类,是iOS上最基本的绘制单元。其次,我们知道iOS平台的Cocoa Touch 是源于OS X平台的Cocoa),是在Cocoa的基础上添加了适用于移动手机设备的手势识别、动画等特性;但从底层实现上来说,Cocoa Touch与Cocoa共用一套底层的库,其中就包括了QuartCore.framework;但QuartCore.framework一开始就是为OS X设计的,所以其中有部分特性是不适合做移动设备开发的,比如最重要的坐标系统。因此,我们也就不难理解为何UIView/NSView在CALayer上做了一层封装。

基于UIView实现的动画

简单的Block动画

UIView

弹性动画

关键帧动画(中间可以添加合适多的帧来做不同的衔接动画)

CALayer动画

常用属性

duration : 动画的持续时间

beginTime : 动画的开始时间

repeatCount : 动画的重复次数

autoreverses : 执行的动画按照原动画返回执行

timingFunction : 控制动画的显示节奏,系统提供五种值选择, 分别是

  • kCAMediaTimingFunctionLinear 线性动画

  • kCAMediaTimingFunctionEaseIn 先慢后快(慢进快出)

  • kCAMediaTimingFunctionEaseOut 先块后慢(快进慢出)

  • kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢

  • kCAMediaTimingFunctionDefault 默认,也属于中间比较快

path:关键帧动画中的执行路径

type:过渡动画的动画类型,系统提供了四种过渡动画:

  • kCATransitionFade 渐变效果

  • kCATransitionMoveIn 进入覆盖效果

  • kCATransitionPush 推出效果

  • kCATransitionReveal 揭露离开效果

subtype : 过渡动画的动画方向

  • kCATransitionFromRight 从右侧进入

  • kCATransitionFromLeft 从左侧进入

  • kCATransitionFromTop 从顶部进入

  • kCATransitionFromBottom 从底部进入

基础动画主要提供了对于CALayer对象中的可变属性进行简单动画的操作。比如:位移、透明度、缩放、旋转、背景色等等。 重要属性 fromValue : keyPath对应的初始值 toValue : keyPath对应的结束值。

  • 基础动画(CABaseAnimation) 0:1 1:0 实现下拉剪头的展开和收起

  • 关键帧动画(CAKeyframeAnimation) CAKeyframeAnimation和CABaseAnimation都属于CAPropertyAnimatin的子类。CABaseAnimation只能从一个数值(fromValue)变换成另一个数值(toValue),而CAKeyframeAnimation则会使用一个NSArray保存一组关键帧。 重要属性 values : 就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧 path : 可以设置一个CGPathRefCGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path,那么values将被忽略。 keyTimes : 可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的。

  • 组合动画:

  • 过渡动画(CATransition) 多数为私有的API使用后无法上架app。 私有API提供了其他很多非常炫的过渡动画,比如@”cube”、@”suckEffect”、@”oglFlip”、 @”rippleEffect”、@”pageCurl”、@”pageUnCurl”、@”cameraIrisHollowOpen”、@”cameraIrisHollowClose”等。

粒子动画

transform动画

transform是一个非常重要的属性,它在矩阵变换的层面上改变视图的显示效果,完成旋转、形变、平移等等操作。在它被修改的同时,视图的frame也会被真实改变。有两个数据类型用来表示transform,分别是CGAffineTransform和CATransform3D。前者作用于UIView,后者为layer层次的变换类型。基于后者可以实现更加强大的功能。 对于想要了解矩阵变换是如何作用实现的,可以参考这篇博客: CGAffineTransform 放射变换

在开始使用transform实现你的动画之前,我先介绍几个常用的函数:

transform严格的说不是一种动画,而是动画中的一部分操作,我拿出来说是因为它同时出现在了UIView 动画和CALayer动画中。

一些应用

利用上面CALayer 基础动画的代码实现下拉剪头的展开和收起,还可以实现时钟指针的旋转

输入框在输入错误信息时的摇晃效果。

利用CAShapeLayer 和CABasicAnimation 可以实现加载动画。

iOS渲染视图的层级图:

更多内容可以点击 iOS开发UI篇--iOS动画(Core Animation)总结

iOS 开发--动画的更多相关文章

  1. iOS开发--动画篇之layout动画深入

    "不得不说,单单是文章的标题,可能不足以说明本文的内容.因此,在继续讲述约束动画之前,我先放上本文要实现的动画效果." 编辑:Bison投稿:Sindri的小巢 约束动画并不是非常 ...

  2. iOS开发——动画OC篇&知识点总结

    图层与动画知识点总结 1.Core Animation 非娱乐类的软件都会用到的动画,操作简单. 2.Quartz 2D绘图 是一个2D绘图引擎. (1) 绘图Context是一个绘图的目标对象,定义 ...

  3. iOS开发——动画篇Swift篇&动画效果的实现

    Swift - 动画效果的实现   在iOS中,实现动画有两种方法.一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimation ...

  4. iOS开发--动画(Animation)总结

    UIView的,翻转.旋转,偏移,翻页,缩放,取反的动画效果   翻转的动画 //开始动画 [UIView beginAnimations:@"doflip" context:ni ...

  5. iOS开发——动画总结OC篇&所有常用动画总结

    所有常用动画总结 先来装下B,看不懂没关系,其实我也看不懂-

  6. iOS开发——动画编程Swift篇&(五)CAKeyframeAnimation

    CAKeyframeAnimation //CAKeyframeAnimation-关键针动画 @IBAction func cakFly() { let animation = CAKeyframe ...

  7. iOS开发——动画编程Swift篇&(四)CABasicAnimation动画

    CABasicAnimation动画 //CABasicAnimation-不透明度 @IBAction func cabOpacity() { let animation = CABasicAnim ...

  8. iOS开发——动画编程Swift篇&(三)CATransition动画

    CATransition动画 // MARK: - CATransition动画 // /* 动画样式 */ // let kCATransitionFade: NSString! //翻页 // l ...

  9. iOS开发——动画编程Swift篇&(二)UIView转场动画

    UIView转场动画 // MARK: - UIView动画-过度动画 var redView:UIView? var blueView:UIView? // enum UIViewAnimation ...

随机推荐

  1. C#的winform矩阵简单运算

    C#的winform矩阵简单运算 程序截图 关键代码 using System; using System.Collections.Generic; using System.ComponentMod ...

  2. java笔试题(3)

    short a = 1; a = a + 1; 有错吗? short a = 1; a += 1; 有错吗? 对于short a = 1; a = a + 1;由于a + 1 运算时会自动提升表达式的 ...

  3. java设计模式类图大全

    近来在看书实现GoF的23个设计模式,自己一点点地用建模工具按照自己的理解画出类图(是比较符合我个人思考理解的,个人觉得比通用类图更详细些),碰巧找到了一个挺好用的UML建模工具StarUML,也刚好 ...

  4. 【Integer To Roman】cpp

    题目: Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range from ...

  5. php对图片反色处理

    今天有个需求用php对图片进行反色,和转灰,之前不知道可不可行,后来看到了imagefilter()函数,用来转灰绰绰有余,好强大: imagefilter($im, IMG_FILTER_GRAYS ...

  6. python 实现斐波那契数列

    def fib(n): a,b=0,1 while a<n: print(a,end=" ") a,b=b,a+b print() fib(2000) 输出: 0 1 1 2 ...

  7. 待验证的一些IOS问题

    1.images.assert中的图片格式必须是png.(jpg格式的图片不行)

  8. bzoj 1800 暴力枚举

    直接暴力枚举四个点,然后判断是否能组成矩形就行了 注意枚举的点的标号从小到大,保证不重复枚举 /**************************************************** ...

  9. 【BZOJ】【1912】【APIO2010】patrol巡逻

    树形DP 说是树形DP,其实就是求树的最长链嘛…… K=1的时候明显是将树的最长链的两端连起来最优. 但是K=2的时候怎么搞? 考虑第一次找完树的最长链以后的影响:第一次找过的边如果第二次再走,对答案 ...

  10. vertical sync

    these days, I am compelting vertical sync https://msdn.microsoft.com/zh-cn/library/windows/desktop/b ...