《iOS动画》读书笔记·转场动画
《iOS动画》读书笔记·前序
《iOS动画》读书笔记·显示层动画
《iOS动画》读书笔记·内容层动画
《iOS动画》读书笔记·转场动画
转场动画
转场动画主要用于不同视图场景之间的切换。
CoreAnimation:CATransition转场动画
CATransition理论初识
CATransition
同CoreAnimation
核心动画中CABasicAnimation
等相关类的使用方法类似。主要分为以下三个步骤:
(1) 实例化CATransition
,并设置相应的转场动画key
(2) 设置合适的转场动画属性,如动画周期、过度方向、动画保持状态等
(3) 将动画效果添加到相应的视图的Layer
图层中
在第一步设置动画效果时需注意,iOS提供了大量的酷炫动画效果。不过总体上来说可以分为公有API和私有API,私有APP制作的APP有被拒的风险,所以在使用时需要尤为注意。
公有API:
-
fade
淡入淡出效果,可用CATransitionType.fade
表示 -
push
推送效果,可用CATransitionType.push
表示 -
reveal
揭开效果,可用CATransitionType.reveal
表示 -
movein
移动效果,可用CATransitionType.movein
表示
私有API:
-
pageCurl
向上翻一页 -
pageUnCurl
向下翻一页 -
rippleEffect
滴水效果 -
suckEffect
收缩效果,如一块布被抽走 -
cube
立方体效果 -
oglFlip
上下翻转效果 -
cameraIrisHollowOpen
相机打开 -
cameraIrisHollowClose
相机关闭
动画效果简单示例
1、先来看一下示例的动画效果
2、代码实现部分
具体代码点击这里👉https://github.com/SPIREJ/AnimationTransitionSwift
注:相应的button是在storyboard里面画的
import UIKit
let kScreenW = UIScreen.main.bounds.size.width
let kScreenH = UIScreen.main.bounds.size.height
class ViewController: UIViewController {
var imageView:UIImageView?
var str:String = "aaa.jpg"
override func viewDidLoad() {
super.viewDidLoad()
imageView = UIImageView(frame: CGRect(x: 20, y: 0, width: kScreenW-40, height: 200))
imageView?.center = self.view.center
imageView?.image = UIImage(named: "aaa.jpg")
self.view.addSubview(imageView!)
}
// 淡入淡出效果,可用 CATransitionType.fade 表示
@IBAction func animation_fade(_ sender: UIButton) {
self.animationType("fade")
}
// 推送效果,可用 CATransitionType.push 表示
@IBAction func animation_push(_ sender: UIButton) {
self.animationType("push")
}
// 揭开效果,可用 CATransitionType.reveal 表示
@IBAction func animation_reveal(_ sender: UIButton) {
self.animationType("reveal")
}
// 移动效果,可用 CATransitionType.movein 表示
@IBAction func animation_movein(_ sender: UIButton) {
self.animationType("movein")
}
// 向上翻页效果
@IBAction func animation_pageCurl(_ sender: UIButton) {
self.animationType("pageCurl")
}
// 向下翻页效果
@IBAction func animation_pageUnCurl(_ sender: UIButton) {
self.animationType("pageUnCurl")
}
// 立方体翻转效果
@IBAction func animation_cube(_ sender: UIButton) {
self.animationType("cube")
}
// 翻转效果
@IBAction func animation_oglFlip(_ sender: UIButton) {
self.animationType("oglFlip")
}
// 收缩效果
@IBAction func animation_suckEffect(_ sender: UIButton) {
self.animationType("suckEffect")
}
// 水滴波纹效果
@IBAction func animation_rippleEffect(_ sender: UIButton) {
self.animationType("rippleEffect")
}
// 相机打开效果
@IBAction func animation_cameraIrisHollowOpen(_ sender: UIButton) {
self.animationType("cameraIrisHollowOpen")
}
// 相机关闭效果
@IBAction func animation_cameraIrisHollowClose(_ sender: UIButton) {
self.animationType("cameraIrisHollowClose")
}
func animationType(_ animationType:String) {
if str == "aaa.jpg" {
str = "bbb.jpg"
}else {
str = "aaa.jpg"
}
imageView?.image = UIImage(named: str)
let animation:CATransition = CATransition.init()
animation.duration = 1
animation.type = CATransitionType(rawValue: animationType)
imageView?.layer.add(animation, forKey: nil)
}
}
其他
可以把动画添加到不同的UIView
上,将看到不一样的效果。比如这里把动画添加到控制器view上:
self.view.layer.add(animation, forKey: nil)
看到如下面的效果:
加载到不同视图上的效果.gif
视图过渡动画
在使用视图控制器的时候,除了Push
和Pop
两种操作外,iOS还提供了一套视图控制器过渡动画API,可以允许用户自定义视图过渡动画。
要想自定义视图控制器的过渡动画,首先需要了解以下两个协议:
(1)UINavigationControllerDelegate
(2)UIViewControllerAnimatedTransitioning
UINavigationControllerDelegate
是视图控制器使用的委托代理协议,该协议可以代理视图的以下功能:
(1)拦截导航栏视图控制器
(2)拦截视图控制器目标viewController
和源viewController
在过渡动画中使用第二个功能,即拦截视图控制器目标viewController
和源viewController
。该功能的回调方法如下:
func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationController.Operation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning?
fromVC
: 表明该视图控制器在跳转过程中来自哪个视图控制器
toVC
: 表明该视图控制器在跳转过程中最终跳转到何处去
实际上以上的所有操作都借助于UIViewControllerAnimatedTransitioning
协议,将所有动画效果最终封装成一个对象返回给试图控制,它有两个非常重要的回调方法:
// 返回动画执行周期
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval
// 构建转场动画内容,该方法可以通过transitionContext获取当前的fromVC和toVC,拿到这两个视图控制器后就可以设置当前视图控制器的各种动画效果
func animateTransition(using transitionContext: UIViewControllerContextTransitioning)
视图过渡动画pop.gif
具体可以看代码https://github.com/SPIREJ/AnimationTransitionSwift