[Swift通天遁地]8、媒體與動畫-(9)快速實現複合、Label、延續、延時、重複、緩衝、彈性動畫

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公衆號:山青詠芝(shanqingyongzhi)
➤博客園地址:山青詠芝(https://www.cnblogs.com/strengthen/
➤GitHub地址:https://github.com/strengthen/LeetCode
➤原文地址:http://www.javashuo.com/article/p-tnjgwwhr-mc.html 
➤若是連接不是山青詠芝的博客園地址,則多是爬取做者的文章。
➤原文已修改更新!強烈建議點擊原文地址閱讀!支持做者!支持原創!
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★html

目錄:[Swift]通天遁地Swiftios

本文將演示多種動畫類型效果。git

首先確保已經安裝了所需的第三方類庫。雙擊查看安裝配置文件【Podfile】github

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

根據配置文件中的相關設置,安裝第三方類庫。spring

安裝完成以後,雙擊打開項目文件【DemoApp.xcodeproj】swift

在左側的項目導航區,打開視圖控制器的代碼文件【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 }
相關文章
相關標籤/搜索