• [Swift通天遁地]八、媒体与动画-(9)快速实现复合、Label、延续、延时、重复、缓冲、弹性动画


    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
    ➤微信公众号:山青咏芝(shanqingyongzhi)
    ➤博客园地址:山青咏芝(https://www.cnblogs.com/strengthen/
    ➤GitHub地址:https://github.com/strengthen/LeetCode
    ➤原文地址:https://www.cnblogs.com/strengthen/p/10354616.html 
    ➤如果链接不是山青咏芝的博客园地址,则可能是爬取作者的文章。
    ➤原文已修改更新!强烈建议点击原文地址阅读!支持作者!支持原创!
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

    目录:[Swift]通天遁地Swift

    本文将演示多种动画类型效果。

    首先确保已经安装了所需的第三方类库。双击查看安装配置文件【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,  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,  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),  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 }

  • 相关阅读:
    数据类型
    一些骚操作
    re
    多任务
    监听按钮点击事件
    监听按钮点击事件
    监听按钮点击事件
    将博客搬至博客园
    将博客搬至博客园
    将博客搬至博客园
  • 原文地址:https://www.cnblogs.com/strengthen/p/10354616.html
Copyright © 2020-2023  润新知