iOS 开发之动画篇 - Transform和KeyFrame动画
2016-02-20 10:55
483 查看
序言
追求美好是人的天性,这是猿们无法避免的。我们总是追求更为酷炫的实现,如果足够仔细,我们不难发现一个好的动画通过步骤分解后本质上不过是一个个简单的动画实现,正是这些基本的动画在经过合理的搭配组合后化腐朽为神奇,令人惊艳。因此,掌握最基本的动画是完成酷炫开发之旅的根本。作为动画篇的第二篇文章,我在从UIView动画说起简单介绍了关于UIView的几种基本动画,这几种动画的搭配让我们的登录界面富有灵性生动,但是这几种动画总是无法满足我们对于动画的需求。同样的,本文将从一个小demo开始讲解强大的
transform动画以及关键帧
keyFrame动画。
demo动效图
可以看到两个动画:叶子被风吹落以及左边的文字从
summer变化到
autumn,这两个动画都是基于强大的
transform形变,其中叶子的飘落动画通过关键帧动画实现。demo链接
transform动画
transform是一个非常重要的属性,它在矩阵变换的层面上改变视图的显示效果,完成旋转、形变、平移等等操作。在它被修改的同时,视图的frame也会被真实改变。有两个数据类型用来表示
transform,分别是
CGAffineTransform和
CATransform3D。前者作用于
UIView,后者为
layer层次的变换类型。基于后者可以实现更加强大的功能,但我们需要先掌握
CGAffineTransform类型的使用。同时,本文讲解也是这个变换类型。
对于想要了解矩阵变换是如何作用实现的,可以参考这篇博客:CGAffineTransform 放射变换
talk is cheap show you the code
在开始使用
transform实现你的动画之前,我先介绍几个常用的函数:
文字变形过程
不难看出在文字的动画中做了两个处理:y轴上的形变缩小、透明度的渐变过程。首先在项目中新增两个UILabel,分别命名为label1、label2.然后在viewDidAppear中加入这么一段代码:
运行你的代码,文字的形变过程你已经做出来了,但是demo中的动画不仅仅是形变,还包括位移的过程。很显然,我们可以通过改变
center的位置来实现这个效果,但这显然不是我们今天想要的结果,实现新的动画方式来实现更有意义。
动画开始时形变出现的label高度为0,然后逐渐的的变高变为
height,而label从头到尾基于顶部的位置不发生改变。因此动画开始前这个label在y轴上的位置是0,在完成显示之后的y轴中心点为
height / 2(基于label自身的坐标系而言),那么动画的代码就可以写成这样:
keyframe动画
将文章开头的gif图另存为到本地,然后使用预览打开看看,你会发现预览中的gif图变成了很多张的图片。实际上,无论是动画、电影、CG等动态效果,都可以看做是一张张图片接连渲染实现的,而这些图片切换的速度足够快时我们就会当做是动画。在此之前我们所讲述的平移视图在UIView动画提交之后系统会根据动画时长计算出视图移动的所有帧界面,然后逐个渲染。回到我们demo中的落叶动画来,我总共对叶子的
center进行过五次修改,我将落叶平移的线性路径绘制出来并且标注关键的转折点:
1.png
上面这个平移用UIView动画代码要如何实现呢?毫无疑问,我们需要不断的嵌套UIView动画的使用来实现,具体代码如下:
[UIView animateWithDuration: 4 animations: ^{ _leaf.transform = CGAffineTransformMakeRotation(M_PI); }];
那么ok,运行这段代码看看,落叶的移动非常的生硬,我们可以明显的看到拐角。其次,这段代码中的
duration传入是没有任何意义的(传入一个固定的动画时长无法体现出在落叶飘下这一过程中的层次步骤)
对于这两个问题,UIView也提供了另一种动画方式来帮助我们解决这两个问题 —— keyframe动画:
frameStartTime 表示关键帧动画开始的时刻在整个动画中的百分比
frameDuration 表示这个关键帧动画占用整个动画时长的百分比。
我做了一张图片来表示参数含义:
添加关键帧方法参数说明
对比
UIView动画跟关键帧动画,关键帧动画引入了动画占比时长的概念,这让我们能控制每个关键帧动画的占用比例而不是传入一个无意义的动画时长 —— 这让我们的代码更加难以理解。当然,除了动画占比之外,关键帧动画的
options参数也让动画变得更加平滑,下面是关键帧特有的配置参数:
UIViewKeyframeAnimationOptionCalculationModeCubic,这个参数使用了贝塞尔曲线让落叶的下落动画变得更加平滑。效果可见最开始的gif动画,你可以修改demo传入的不同参数来查看效果。接下来我们就根据新的方法把上面的
UIView动画转换成关键帧动画代码,具体代码如下:
UIView的动画,关键帧动画更加直观的让我们明白每一次平移动画的时间占比,代码也相对的更加简洁。
尾言
本文作为动画篇的第二篇博客,到了这里UIView的所有动画教程已经完成,在之后的文章中将进一步讲解
autolayout动画和图层层次的动画。时值新年,祝愿各位????年快乐,心想事成!本文demo地址
转载请注明地址和原文作者
相关文章推荐
- ios NSInvocation简单使用
- IOS应用提交所需尺寸
- 面向对象3-键值编码(KVC)和键值监听(KVO)
- Tableview详细方法
- IOS基础:retain,copy,assign及autorelease
- iOS Xcode7.2开发时使用SBJson解析时 出现野指针的问题解决
- iOS取证将如漫漫长夜
- iOS-使用代码CGImage调节tabBar上按钮图片的大小
- iOS 调试技巧
- IOS基础之 (八) Foundation框架
- XCode调试中的输出技巧
- iOS部分 理论:
- iOS屏幕适配
- iOS中 简单易懂的秒杀倒计时/倒计时
- iOS中 简单易懂的秒杀倒计时/倒计时
- IOS开发中关于数据的本地化存储
- IOS 开发 证书显示 此证书签发者无效 解决办法
- IOS下集成支付宝RSA签名
- IOS基础之 (九) Foundation框架
- iOS-证书配置