iOS UIView动画基础

logo.jpg

>基础部分

---

前言：

一直在想，感觉自己做了这么久开发了，常用的库、UI控件、网络开发等都有一定的经验了，但是为什么自己做出来的东西就少了那么些B格，就是没有人大神做出来的感觉？

其实答案有很多，一定经验，并不等于透彻。再者往往越到后期，越是注重架构、资源节约、性能优化，然而这些不是一天两天能够出来得了的，那么怎么才能让自己的app看上去让人眼前一亮、甚至惊叹呢？那就是动画无疑了。

对于普通用户而言，颜值即正义，这句话不是盖的，满足功能需求后，应当积极追求更精美的UI，更优良的用户体验感。

UIView动画.png

由上图可见，UIView已经囊括了很多动画了，通过 UIView.animate 接口进行使用

一、Position[位置]

position.gif

• 横向移动，改变view的x即可，同理，纵向改变view的y即可

UIView.animate(withDuration: 1) {
    self.pinkSquare.center.x = self.view.bounds.width - self.pinkSquare.center.x
    
}

• 延时操作

UIView.animate(withDuration: 1, delay: 0.5, options: .curveLinear, animations: {
    
    self.purpleSquare.center.y = self.view.bounds.height - self.purpleSquare.center.y
}, completion: nil)

二、Opacity[透明度]

Opacity.gif

• 0 -> 1显示程度一次递增

UIView.animate(withDuration: 1) {
     self.pinkSquare.alpha = 0
}

三、Scale[缩放]

Scale.gif

• >1.0 放大，<1.0 缩小

UIView.animate(withDuration: 1) {
    self.purpleSquare.transform = CGAffineTransform.init(scaleX: 2.0, y: 2.0)
}

四、Color[颜色]

Color.gif

UIView.animate(withDuration: 1) {
    self.greenSquare.backgroundColor = UIColor.orange
    self.colorLab.textColor = UIColor.white
}

五、Rotation[翻转]

rotation.gif

• M_PI -> 180度

UIView.animate(withDuration: 1) {
     self.pinkSquare.transform = CGAffineTransform.init(rotationAngle: CGFloat(M_PI))
}

---

>进阶部分

---

一、UIView动画的Timing

• 各属性的原始状态
• 各属性的结束状态
• 执行时长
• 执行过程
• 执行完毕的处理
  
  

二、UIView动画的重复执行

repeat.gif

• Repeat

UIView.animate(withDuration: 1, delay: 0, options: .repeat, animations: {
    self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x
}, completion: nil)

• Autoreverse

UIView.animate(withDuration: 1, delay: 0, options: [.repeat, .autoreverse], animations: {
    self.purpleSquare.center.x = self.view.bounds.width - self.purpleSquare.center.x
}, completion: nil)

三、UIView Easing动画[变速]

Easing.gif Easing

• 默认为curveLinear[匀速]

UIView.animate(withDuration: 1) {//默认为curveLinear
    self.pinkSquare.center.x = self.view.bounds.width - self.pinkSquare.center.x
}

• curveEaseIn[先慢后快]

UIView.animate(withDuration: 1, delay: 0, options: .curveEaseIn, animations: {
    self.garySquare.center.x = self.view.bounds.width - self.garySquare.center.x
}, completion: nil)

• curveEaseOut[先快后慢]

UIView.animate(withDuration: 1, delay: 0, options: .curveEaseOut, animations: {
    self.purpleSquare.center.x = self.view.bounds.width - self.purpleSquare.center.x
}, completion: nil)

• curveEaseInOut[先慢中快后慢]

UIView.animate(withDuration: 1, delay: 0, options: .curveEaseInOut, animations: {
    self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x
}, completion: nil)

安利一个贝塞尔调整理解的网站、一个函数理解网站，谁用谁知道![对写web的极其友好]

四、UIView Spring动画[弹簧，iOS7.0]

Spring

// 弹簧效果基于物理，之前的基于数学
// usingSpringWithDamping阻力，>1<
// initialSpringVelocity初速度
UIView.animate(withDuration: 3, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 0, options: .curveLinear, animations: {
    self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x
}, completion: nil)

Spring.gif

---

>结束语

---

越写、越看、越学习，发现自己越菜......