[Swift通天遁地]八、媒体与动画-(9)快速实现复合、Label、延续、延时、重复、缓冲、弹性动画
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号:山青咏芝(shanqingyongzhi)
➤博客园地址:山青咏芝(https://www.cnblogs.com/strengthen/)
➤GitHub地址:https://github.com/strengthen/LeetCode
➤原文地址:https://www.cnblogs.com/strengthen/p/10354616.html
➤如果链接不是山青咏芝的博客园地址,则可能是爬取作者的文章。
➤原文已修改更新!强烈建议点击原文地址阅读!支持作者!支持原创!
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
本文将演示多种动画类型效果。
首先确保已经安装了所需的第三方类库。双击查看安装配置文件【Podfile】
1 platform :ios, '8.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'Cheetah' 7 end
根据配置文件中的相关设置,安装第三方类库。
安装完成之后,双击打开项目文件【DemoApp.xcodeproj】
在左侧的项目导航区,打开视图控制器的代码文件【ViewController.swift】
1 import UIKit 2 //引入已经安装的第三方类库 3 import Cheetah 4 5 class ViewController: UIViewController { 6 7 //初始化一个视图对象,作为动画的载体。 8 var box : UIView! 9 override func viewDidLoad() { 10 super.viewDidLoad() 11 // Do any additional setup after loading the view, typically from a nib. 12 13 //对视图对象进行初始化操作 14 box = UIView(frame:CGRect(x: 0, y: 100, width: 100, height: 100)) 15 //设置视图对象的背景颜色为橙色 16 box.backgroundColor = UIColor.orange 17 //将视图对象添加到根视图 18 self.view.addSubview(box) 19 //创建复合动画 20 parallelExecution() 21 //创建标签动画 22 labelAnimation() 23 //创建一组k刚性动画 24 serialExecution() 25 //创建一个无限循环的动画 26 repeatingAnimation() 27 //创建一个缓冲动画 28 easingsAnimation() 29 //创建弹性动画 30 springAnimation() 31 } 32 33 //添加一个方法,用来创建复合动画 34 func parallelExecution() 35 { 36 //将视图对象向右移动100点到距离 37 box.cheetah.move(100, 0) 38 //同时旋转360度 39 .rotate(.pi * 2) 40 //将视图对象放大1.5倍 41 .scale(1.5) 42 //将视图对象设置为半透明 43 .alpha(0.5) 44 //更改视图对象的背景颜色 45 .backgroundColor(UIColor.cyan) 46 //给视图对象添加宽度为10的边框 47 .borderWidth(10) 48 //设置边框的颜色为蓝色 49 .borderColor(UIColor.blue) 50 //给视图添加半径为30的圆角 51 .cornerRadius(30) 52 //通过调用运行命令,开始动画的播放。 53 .run() 54 } 55 56 //添加一个方法,用来创建标签动画 57 func labelAnimation() 58 { 59 //初始化一个指定显示区域的标签控件 60 let label = UILabel(frame: CGRect(x: 100, y: 100, width: 200, height: 40)) 61 //设置标签控件的文字内容 62 label.text = "HELLO Strengthen!" 63 //将标签控件添加到根视图 64 view.addSubview(label) 65 66 //给标签控件添加一个向下的位移动画 67 label.cheetah 68 //设置动画的时长和缓冲属性 69 .move(0, 30).duration(0.5).easeOutBack 70 //更改文字的颜色 71 .textColor(UIColor.red) 72 //动画播放到当前位置时,暂停一秒钟,然后再执行之后的动画。 73 .wait(1) 74 //给标签控件添加一个向上的位移动画,并设置动画的时长和缓冲属性 75 .move(0, -30).duration(0.5).easeOutBack 76 //再次调整文字的颜色 77 .textColor(UIColor.blue) 78 //继续暂停一秒钟 79 .wait(1) 80 //通过调用运行命令,开始动画的播放。 81 .run() 82 } 83 84 //添加一个方法,用来创建一组刚性动画 85 func serialExecution() 86 { 87 //将视图移动一定距离,并旋转180度。 88 box.cheetah.move(100, 100).rotate(M_PI) 89 //添加一个等待方法,然后开始第二段动画。 90 .wait() 91 //将视图移动至原来的位置,并旋转负180度。 92 .move(-100, -100).rotate(-M_PI) 93 //添加一个等待方法,1秒钟后开始第三段动画。 94 .wait(1.0) 95 //在0.4秒的时间里,将视图对象下移一段距离。 96 .move(0, -40).duration(0.4) 97 //添加一个等待方法,开始第四段动画。 98 .wait() 99 //在0.4秒的时间里,将视图对象返回至原来的位置 100 .move(0, 40).duration(0.4) 101 //调用运行命令,开始动画的播放。 102 .run() 103 } 104 105 //添加一个方法,用来创建一个无限循环的动画 106 func repeatingAnimation() 107 { 108 //将视图对象移动到根视图的中心位置。 109 box.center = self.view.center 110 //给视图对象添加一个y旋转动画,并设置动画的播放模式为无限循环。 111 _ = box.cheetah.rotate(M_PI_2).run().forever 112 } 113 114 //添加一个方法,用来创建一个缓冲动画 115 func easingsAnimation() 116 { 117 //初始化一个缓冲类型的数组对象, 118 //作为六个视图的动画类型。 119 let easeIns = [ 120 Easings.linear, 121 Easings.easeInSine, 122 Easings.easeInQuad, 123 Easings.easeInQuart, 124 Easings.easeInQuint, 125 Easings.easeInCirc 126 ] 127 //初始化另一个缓冲类型的数组对象 128 let easeOuts = [ 129 Easings.linear, 130 Easings.easeOutSine, 131 Easings.easeOutQuad, 132 Easings.easeOutQuart, 133 Easings.easeOutQuint, 134 Easings.easeOutCirc 135 ] 136 //创建另一个颜色数组对象,作为视图的背景颜色。 137 let colors = [ 138 UIColor.orange, 139 UIColor.brown, 140 UIColor.red, 141 UIColor.purple, 142 UIColor.magenta, 143 UIColor.cyan 144 ] 145 //添加一个循环语句,用来创建视图对象, 146 //以及设置视图的动画属性。 147 for i in 0..<6 148 { 149 //初始化一个视图对象,并根据循环语句的索引,设置视图对象的坐标。 150 let ebox = UIView(frame: CGRect(x: 20, y: 240 + 35 * CGFloat(i), width: 30, height: 30)) 151 //设置视图对象的背景颜色 152 ebox.backgroundColor = colors[i] 153 //将视图对象添加到根视图 154 self.view.addSubview(ebox) 155 156 //给视图对象添加一个缓冲动画,并设置动画的缓冲方式。 157 _ = ebox.cheetah.move(200, 0).ease(easeOuts[i]) 158 //设置位移动画的时长为2秒 159 .duration(2) 160 //将视图对象旋转一周 161 .rotate(M_PI*2) 162 //设置旋转动画的缓冲方式 163 .ease(easeOuts[i]) 164 //设置旋转动画的时长同样为2秒 165 .duration(2) 166 //添加一个等待语句,接着再执行下一个动画。 167 .wait() 168 //将视图对象移动至原来的位置。 169 .move(-200, 0) 170 //设置位移动画的缓冲方式 171 .ease(easeIns[i]) 172 //设置位移动画的时长为2秒 173 .duration(2) 174 //将视图对象倒转一周 175 .rotate(-M_PI*2) 176 //同样设置旋转动画的缓冲方式 177 .ease(easeIns[i]) 178 //设置旋转动画的时长同样为2秒 179 .duration(2) 180 //添加一个等待语句 181 .wait() 182 //通过调用运行命令,开始动画的播放 183 .run() 184 //给动画添加无限循环的属性。 185 .forever 186 } 187 } 188 189 //添加一个方法,用来创建弹性动画 190 func springAnimation() 191 { 192 //给视图对象添加一个位移动画 193 box.cheetah 194 .move(200, 0) 195 //添加位移动画的弹簧属性, 196 //设置弹簧的张力为20,摩擦力为4。 197 .spring(tension: 20, friction: 4) 198 //调用运行命令,开始动画的播放。 199 .run() 200 } 201 202 override func didReceiveMemoryWarning() { 203 super.didReceiveMemoryWarning() 204 // Dispose of any resources that can be recreated. 205 } 206 }