|
一行代码一场梦，大家好我是阿达，今天要讨论的是本 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 里面剩下的功能，阿达会在入学考之后再继续跟大家分享，后面还有很多关于 资料库，搜寻列，云端，社群分享。。。。更多功能敬请期待。十篇技术文一路走来感觉很累，也学习了很多，感谢小伙伴们的各种宝贵意见，更开心的是有小伙伴们愿意跟着阿达一起实作，让我们用一行一行的代码，一步一步的实现我们的梦想！ 我是阿达，我们一定会再见！
| 
收藏
淘帖
踩
