服务器之家

服务器之家 > 正文

利用Swift实现各类的CATransition动画详解

时间:2021-01-06 15:22     来源/作者:laona

前言

最近因为工作的需要,打算用swift重构现有项目,实现过程中发现用到了很多系统的动画实现,因为之前的都是用OC实现的,这里主要是把一些动画效果来通过swift实现一下。

这篇文章主要是实现一下CATransition动画的不同效果。

第一步 创建一个swift文件并声明相应的枚举类型

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
enum TransitionAnimType : Int {
case fade = 0,    //淡入淡出
push,      //推挤
reveal,      //揭开
moveIn,      //覆盖
cube,      //立方体
suckEffect,     //吮吸
oglFlip,     //翻转
rippleEffect,    //波纹
pageCurl,     //翻页
pageUnCurl,     //反翻页
cameraIrisHollowOpen,  //开镜头
cameraIrisHollowClose,  //关镜头
curlDown,     //下翻页
curlUp,      //上翻页
flipFromLeft,    //左翻转
flipFromRight,    //右翻转
ramdom      //随机
}
 
enum TransitionSubType : Int {
case top = 0,    //上
left,      //左
bottom,      //下
right,      //右
ramdom      //随机
}
 
enum TransitionCurve : Int {
case Default = 0,   //默认
EaseIn,      //缓进
EaseOut,     //缓出
EaseInEaseOut,    //缓进缓出
Linear,      //线性
Ramdom      //随机
}

上面三个枚举类型分别代表:

  • TransitionAnimType:动画类型
  • TransitionSubType:动画方向
  • TransitionCurve:动画曲线

第二步 自定义函数返回动画类型

?
1
2
3
4
5
6
/// 返回动画类型
private func animationType(animType: TransitionAnimType) -> String {
 /// 设置转场动画类型
 let animTypeArray = ["fade", "push", "reveal", "moveIn", "cube", "suckEffect", "oglFlip", "rippleEffect", "pageCurl", "pageUnCurl", "cameraIrisHollowOpen", "cameraIrisHollowClose", "curlDown", "curlUp", "flipFromLeft", "flipFromRight", "ramdom"]
 return objectFromDataSource(array: animTypeArray, index: animType.rawValue, isRamdom: (TransitionAnimType.ramdom == animType)) as! String
}

第三步 自定义函数返回动画方向

?
1
2
3
4
5
/// 返回动画方向
private func animationSubType(subType: TransitionSubType) -> String {
 let animSubTypeArray = [kCATransitionFromTop, kCATransitionFromLeft, kCATransitionFromBottom, kCATransitionFromRight]
 return objectFromDataSource(array: animSubTypeArray, index: subType.rawValue, isRamdom: (TransitionSubType.ramdom == subType)) as! String
}

第四步 自定义函数返回动画曲线

?
1
2
3
4
5
/// 返回动画曲线
private func animationCurve(curve: TransitionCurve) -> String {
 let animCurveArray = [kCAMediaTimingFunctionDefault, kCAMediaTimingFunctionEaseIn, kCAMediaTimingFunctionEaseOut, kCAMediaTimingFunctionEaseInEaseOut, kCAMediaTimingFunctionLinear]
 return objectFromDataSource(array: animCurveArray, index: curve.rawValue, isRamdom: (TransitionCurve.Ramdom == curve)) as! String
}

第五步 不难发现,上面三个自定义方法中我们都用到了objectFromDataSource这个方法,从我们的传参不难发现,它就是为了返回我们需要的指定数据的,下面我们来实现一下这个方法

?
1
2
3
4
5
6
7
/// 统一从数据返回对象
private func objectFromDataSource(array: Array<Any>, index: Int, isRamdom: Bool) -> AnyObject {
 let count = array.count
 let i = isRamdom ? Int(arc4random_uniform(UInt32(count))) : index
 
 return array[i] as AnyObject
}

第六步 好了,现在所有的准备工作已经做好,接下来我们来看一下具体的动画实现的方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
func layerTransition(animTye: TransitionAnimType, subType: TransitionSubType, curve: TransitionCurve, duration: CGFloat, layer: CALayer) {
let key = "transition"
if layer.animation(forKey: key) != nil {
 layer.removeAnimation(forKey: key)
}
let transition = CATransition()
 
/// 动画时长
transition.duration = CFTimeInterval(duration)
 
/// 动画类型
transition.type = animationType(animType: animTye)
 
/// 动画方向
transition.subtype = animationSubType(subType: subType)
 
/// 缓动函数
transition.timingFunction = CAMediaTimingFunction(name: animationCurve(curve: curve))
 
/// 完成动画删除
transition.isRemovedOnCompletion = true
 
layer.add(transition, forKey: key)
 
}

大功告成!接下来我们去需要使用动画的地方来调取我们第六步实现的方法就好了。so easy !哈哈

?
1
layerTransition(animTye: .ramdom, subType: .ramdom, curve: .Ramdom, duration: 2.0, layer: (self.view.window?.layer)!)

是不是感觉很简单呢,上面的代码组合一下就可以直接用喽,有需要的拿走不谢~~

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对服务器之家的支持。

原文链接:http://www.jianshu.com/p/1f798a171e9a

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享 2020-04-07
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部