【Swift学习ing】之 UIView动画(基础篇)

原创 2015年07月09日 13:57:56

今天给大家分享一下我自学Swift的经验。我不想从最基本的语法说了,我就从最直观最简单的Demo说起吧!

UIView动画实质上是让UIVIew的一些属性在一定的时间内按照一定的规则发生变化。

What?

我们可以动哪些UIView的属性呢?鄙视往下看:

1、Position 位置

2、Opacity 透明度

3、Scale 比例

4、Color 颜色

我们可以设定哪些变化规则呢?鄙视往下看:

1、Rotation 旋转

2、Repeat 重复的

3、Easing  轻缓的

4、Spring  弹跳

How?

        (1)在一定时间内 View 的属性发生改变,动画结束后回调。

    classfunc animateWithDuration(duration:NSTimeInterval, animations: () ->Void, completion: ((Bool) ->Void)?)


    (2)在一定时间内 View 的属性发生改变。无回调。
    classfunc animateWithDuration(duration:NSTimeInterval, animations: () ->Void)


    (3)可以设置动画执行的方式

    classfunc animateWithDuration(duration:NSTimeInterval, delay:NSTimeInterval, options:UIViewAnimationOptions, animations: () ->Void, completion: ((Bool) ->Void)?)


    ->参数说明: 

duration:动画经历时长 

animation:UIView动画结束时的状态(比如UIView移动到另一点,变成某一种颜色,放大(缩小)后的比例,变化到某一透明度)

delay:延迟时间,在该延迟时间后才执行动画

options:系统提供了许多动画执行的方式,比如以下几个

...

重复该动画

staticvar Repeat:UIViewAnimationOptions { get }

然后用一张图解释下面四中Easing

staticvar CurveEaseInOut:UIViewAnimationOptions { get }由慢到快再到慢

   

staticvar CurveEaseIn:UIViewAnimationOptions { get }由慢到快

   

staticvar CurveEaseOut:UIViewAnimationOptions { get }由快到慢


staticvar CurveLinear:UIViewAnimationOptions { get }速度不变



线性动画(匀速)

...

completion:动画结束时的回调(这里可以处理一些事件)


    (4)可设置弹跳效果的动画
    classfunc animateWithDuration(duration:NSTimeInterval, delay:NSTimeInterval, usingSpringWithDamping dampingRatio:CGFloat, initialSpringVelocity velocity:CGFloat, options:UIViewAnimationOptions, animations: () ->Void, completion: ((Bool) ->Void)?)

    

    ->参数说明: 

usingSpringWithDamping:阻尼(弹性系数)

initialSpringVelocity:初始速率

DEMO!

下面就来看几个例子吧:

(1)position:

UIView.animateWithDuration(1, animations: {

            self.greenSquare.center.x = self.view.bounds.width -self.greenSquare.center.x

        })

       UIView.animateWithDuration(1, delay:0.5, options: nil, animations: {

            self.blueSquare.center.y = self.view.bounds.height -self.blueSquare.center.y

        }, completion:nil)

       UIView.animateWithDuration(1, delay:1, options: nil, animations: {

            self.orangeSquare.center.y = self.view.bounds.height -self.orangeSquare.center.y

            self.orangeSquare.center.x = self.view.bounds.width -self.orangeSquare.center.x

            }, completion:nil)

这里时间每个方块的动画时长Duration都设置为1s,但蓝色快延迟delay 0.5s 执行,橙色延迟1s执行


(2)opacity:

UIView.animateWithDuration(1, animations: {

            self.blueSquare.alpha=0

        })

(3)scale:

UIView.animateWithDuration(1, animations: {

              self.orangeSquare.transform = CGAffineTransformMakeScale(2,2)

        })

      

        UIView.animateWithDuration(1, delay:0.5, options: nil, animations: {

            self.orangeSquare.transform = CGAffineTransformMakeScale(0.3,0.3)

        }, completion:nil)




(4)color:

UIView.animateWithDuration(1, animations: {

            self.greenSquare.backgroundColor =UIColor.redColor()

            self.label.textColor=UIColor.whiteColor()

        })

(5)rotation:

UIView.animateWithDuration(1, delay: 0, options: .Repeat | .CurveLinear, animations: {

            self.blueSquare.transform =CGAffineTransformRotate(self.blueSquare.transform,CGFloat(M_PI))

            }) { (finished) ->Void in

        }

这里options Repeat和CurveLinear 才能使之匀速旋转。因为默认是 CurveEaseInOut 先加速后减速

(6)repeat:

UIView.animateWithDuration(1, animations: {

            self.greenSquare.center.x = self.view.bounds.width -self.greenSquare.center.x

        })

      

        UIView.animateWithDuration(1, delay:0, options:.Repeat, animations: {

            self.brownSquare.center.x = self.view.bounds.width -self.brownSquare.center.x

        }, completion:nil)

这里只用了Repeat 所以动画效果总是 从 左到右


        UIView.animateWithDuration(1, delay:0, options: .Repeat | .Autoreverse, animations: {

            self.blueSquare.center.x = self.view.bounds.width -self.blueSquare.center.x

            }, completion:nil)

Repeat和Autoreverse(自动 相反) 相或 的结果 每一次重复上一次相反的动画过程,所以我们看到从左到右,再从右往左如此反复的效果。


(7)easing:

UIView.animateWithDuration(1, animations: {

            self.blueSquare.center.x = self.view.bounds.size.width -self.blueSquare.center.x

        })

      

        UIView.animateWithDuration(1, delay:0, options: .CurveEaseIn, animations: {

            self.greenSquare.center.x = self.view.bounds.size.width -self.greenSquare.center.x

        }, completion:nil)

先慢后快

        UIView.animateWithDuration(1, delay:0, options: .CurveEaseOut, animations: {

            self.orangeSquare.center.x = self.view.bounds.size.width -self.orangeSquare.center.x

            }, completion:nil)

        先快后慢

        UIView.animateWithDuration(1, delay:0, options: .CurveEaseInOut, animations: {

            self.redSquare.center.x = self.view.bounds.size.width -self.redSquare.center.x

            }, completion:nil)

又慢到快再到慢


(8)spring:

//线性(匀速)效果

        UIView.animateWithDuration(1, animations: {

            self.blueSquare.center.x = self.view.bounds.size.width -self.blueSquare.center.x

        })

        /**

        弹簧效果

        */

        /**

        usingSprignWithDamping : 阻尼

        initialSpringVelocity : 初始速度

        */

        UIView.animateWithDuration(5, delay:0, usingSpringWithDamping: 1, initialSpringVelocity: 0, options: nil, animations: {

            self.greenSquare.center.x = self.view.bounds.size.width -self.greenSquare.center.x

        }, completion: nil)

        这里阻尼范围是0-1,如果出事速度较小阻尼为1则没有回弹效果。但是初始速度取值较高而时间较短时,也会出现反弹情况

        UIView.animateWithDuration(5, delay:0, usingSpringWithDamping: 0.1, initialSpringVelocity: 5, options:nil, animations: {

            self.orangeSquare.center.x = self.view.bounds.size.width -self.orangeSquare.center.x

            }, completion: nil)


小结!

回弹效果不仅可以用于位置的回弹,颜色,透明度,大小,旋转,同样适用!灵活运用这些属性和参数,你也可以创造出与众不同的动画效果!但是在实际生产中,动画效果的运用有利也有弊,友好的动画能够使用户感到轻松愉悦,甚至享受其中,相反也会造成灾难性的后果。

苹果系统为何能够讨好绝大多数用户?你可以在其细腻如丝的操作体验和动画效果中感受到。

Demo Github: https://github.com/ly918/UIView-

iOS Swift3.0 UIView动画详解

iOS Swift3.0 UIView动画详解iOS Swift30 UIView动画详解 缩放动画 旋转动画 透明度动画 在IOS开发中为了做一些比较炫的效果有时候免不了使用动画。虽然苹果自带了Co...
  • u012724947
  • u012724947
  • 2017年01月08日 23:52
  • 2146

Swift UIview简单动画

Swift UIView本事自带了一些简单的动画。 如果不是很复杂的需求,可以考虑使用此处的方法。 下面我们简单尝试一下 首先创建三个View 分别设置三中背景色 let view1=...
  • lwjok2007
  • lwjok2007
  • 2015年08月31日 11:24
  • 3551

iOS UIView动画详解(Swift)

现在的iOS开发中,有很多的动画框架可以使用,包括苹果自带的CoreAnimation框架,Facebook的Pop等等,这些的确都是程序员的利器。但是如果我们仅仅是想要实现一些比较简单的动画呢?杀鸡...
  • CHENYUFENG1991
  • CHENYUFENG1991
  • 2015年11月11日 11:39
  • 6373

swift扩展UIView实现动画依次执行

MVC框架下,如果model有连续变化,通过delegate传递给view是可能出现不一致的,因为动画的执行过程不再主线程中完成,所以实际上他是不依次执行,2个动画叠加的结果可能造成M和V的不一致,为...
  • ufo2744
  • ufo2744
  • 2015年05月02日 06:28
  • 547

深度学习word2vec笔记之基础篇

深度学习word2vec笔记之基础篇
  • mytestmy
  • mytestmy
  • 2014年05月25日 16:00
  • 67745

Swift UIview的 层次交换 和部分动画的详解

// //  ViewController.swift //  Swift_004 // //  Created by 周双建 on 15/11/30. //  Copy...
  • zhoushuangjian511
  • zhoushuangjian511
  • 2015年11月30日 11:21
  • 1096

swift2.0 CASpringAnimation 和 UIView.animateWithDuration 分别实现弹性动画

首先我创建了两个view 一个红色的 一个黄色的 分别代表两个方法要实现动画的现实界面 var readView:UIView! var yellowView:UIView! ov...
  • lengshengren
  • lengshengren
  • 2015年10月14日 15:44
  • 2483

UIView Hide/Show animate

iOS UIView 隐藏和显示的动画 - 淡入 淡出 的动画效果 My simple goal is to fade animate hiding and showing functions. ...
  • jeffasd
  • jeffasd
  • 2016年09月19日 12:00
  • 644

Java 之JNI基础篇(一)

JNI,即Java Native Interface。它其实就是一套java与本地代码交互的接口或者说是一个协议。通俗的比喻,就是中国人讲中国话,日本人讲日本话,于是中国人碰到日本人,各说各话,无法交...
  • yingshukun
  • yingshukun
  • 2018年01月13日 18:51
  • 10035

鸟哥的Linux私房菜 基础学习篇(第三版)

第零章 计算器概论 1 计算机:辅助人脑的好工具 接收用户指令与数据,经由中央处理器的数学与逻辑单元运算处理后,以产生或存储成有用的信息。 1.1 计算器的五大单元 输入单元,CPU控制单元,CPU算...
  • niuzhihuan
  • niuzhihuan
  • 2015年08月03日 20:17
  • 1023
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【Swift学习ing】之 UIView动画(基础篇)
举报原因:
原因补充:

(最多只允许输入30个字)