黑马程序员技术交流社区
标题: swift实作app 交流分項十（動畫特效） [打印本页]
作者: Kuhoku 时间: 2015-6-30 13:09
标题: swift实作app 交流分項十（動畫特效）
一行代码一场梦，大家好我是阿达，今天要讨论的是本 App 里面最狂跩酷炫屌炸天的功能，也就是动画，在 iOS 开发中，想要建立一个成熟的动画，只需要认识一个 UIView 类别方法即可：
UIView.animateWithDuration(1.0,animations)
就是这么简单的一条程式，加入参数变化之后就可以有各式各样的动画效果了，所以我们今天重点放在 UIAView Animation
现在我们准备帮之前的项目加上一个逐渐放大(dialog view)的特效，这个特效原理状态如下：
开始状态：对话视图尺寸为零
终止状态：对话视图尺寸正常
小伙伴们可能会想说，那我要怎么把它缩小啊？ iOS 提供变形的函数，让你可以缩放、旋转、还有移动，这里面我们要做到缩放就是建立一个CGAffineTransformMakeScale 并设定 UIView 的变形属性。
首先我们要在ReviewViewController.swift 中加入一个 Outlet 变数：
@IBOutlet weak var dialogVIew: UIView!
现在我们要在 ReviewVIewController.swift 的 viewDidLoad 中加入下面的程式：
//第一次载入视图的时候，把比例缩小
dialogVIew.transform = CGAffineTransformMakeScale(0.0, 0.0)
之后我们建立一个 UIView.animationWithDuration 方法来使用特效
//动画持续时间 0.7 秒 没有延迟，将视图恢复原来大小
override func viewDidAppear(animated: Bool) {
UIView.animateWithDuration( 0.7,delay:0.0,options:nil, animations: {
self.dialogVIew.transform = CGAffineTransformMakeScale(1, 1)
},completion:nil)
}
没错 接下来就是 Command + R的时间啦
动画很酷吧！现在我们介绍另外一种 UIView Animation 的变化样式，也就是 Spring Animation。Spring Animation 的使用在 iOS7之后的版本都很常见，
接下来我们来试试看向上滑动的特效(Slide Uo Animation) ，首先我们建立一个仿射变换函数(affine transform function) 来建立 slid - up animation:
现在我们再回到 viewDIdLoad 当中加入下面一行程式：
//讓視圖從下而上出現
dialogVIew.transform = CGAffineTransformMakeTranslation(0, 500)
接下来就可以很开心按下 command + R 的来看看成果了
如果小伙伴觉得这样就已经是狂跩酷炫了！那阿达告诉你事情还没完，接下来的绝对让小伙伴感觉狂跩酷炫屌炸天！因为我们要结合两者动画效果！
我们要做的事情很简单的！其实就只是在 viewDidLoad 更新一下：
//結合兩者特效
let socale = CGAffineTransformMakeScale(0.0, 0.0)
let translate = CGAffineTransformMakeTranslation(0, 500)
dialogVIew.transform = CGAffineTransformConcat(socale, translate)
然后我们再更新一下viewDIdAppear 方法：
//動畫持續時間 0.7 秒 沒有延遲，將視圖恢復原來大小
override func viewDidAppear(animated: Bool) {
UIView.animateWithDuration( 0.7,delay:0.0,options:nil, animations: {
let scale = CGAffineTransformMakeScale(1, 1)
let translate = CGAffineTransformMakeTranslation(0, 0)
self.dialogVIew.transform = CGAffineTransformConcat(scale, translate)
},completion:nil)
不要犹豫 不要怀疑！command + R 按下去
当我第一次知道，要写 app 的时后，其实我是拒绝的！因为我不能你叫我写，我就写。我总得试一试啊？当App第一次在我手上照我的意思运行的时候。『当』 这感觉～好极了！ 我也给小伙伴们分享一下，阿达要让你们知道我写起来是这样，你们写一起来也是这样！ 十篇技术文到这篇告一段落，接下来的时间阿达要把心思放在入学考上面，暂时要跟小伙伴们说再见了，App 里面剩下的功能，阿达会在入学考之后再继续跟大家分享，后面还有很多关于 资料库，搜寻列，云端，社群分享。。。。更多功能敬请期待。十篇技术文一路走来感觉很累，也学习了很多，感谢小伙伴们的各种宝贵意见，更开心的是有小伙伴们愿意跟着阿达一起实作，让我们用一行一行的代码，一步一步的实现我们的梦想！ 我是阿达，我们一定会再见！
作者: 18530670911 时间: 2015-6-30 13:15
阿达，加油
作者: 黑妞 时间: 2015-6-30 13:16
:hug:
作者: 深蓝的蓝 时间: 2015-6-30 23:01
感觉很厉害的样子 先收藏下
作者: 离经叛道的女子 时间: 2015-7-1 00:50
最后一篇终于完成了啦
作者: Kuhoku 时间: 2015-7-1 01:04
這不是最後 入學考之後我會繼續寫下去
作者: venn 时间: 2015-7-1 07:53
好好加油，好好思考。。。
作者: peng_gavin 时间: 2015-7-1 08:47
楼主好厉害，学习中……
作者: nsswift 时间: 2015-7-1 09:12
楼主好厉害，继续努力一定能成功
作者: carshoel 时间: 2015-7-1 09:48
很厉害啊、千个赞
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |