【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-

相关文章推荐

Swift基础之Animation动画研究

最近研究了一下,Swift语言中关于Animation动画的实现学习,分两次进行相关内容的讲解用表格列出各种动画情况Demo首页显示展示了一种动画显示方式,代码如下://绘画装饰    func dr...
  • hbblzjy
  • hbblzjy
  • 2016年10月08日 17:39
  • 655

Swift UIImageView简单动画

UIImageView 如果要实现类似于grf的动画图 我们可以直接使用两中方式实现 方法一,设置动态图片 首先,我们需要一组实现动画的图片,按照顺序命名 如图所示 test ...

iOS Swift3.0 UIView动画详解

iOS Swift3.0 UIView动画详解iOS Swift30 UIView动画详解 缩放动画 旋转动画 透明度动画 在IOS开发中为了做一些比较炫的效果有时候免不了使用动画。虽然苹果自带了Co...

Swift - 动画效果的实现方法总结

http://www.hangge.com/blog/cache/detail_664.html# 在iOS中,实现动画有两种方法。一个是统一的animateWithDuration,另...

Swift实现iOS中的动画示例

import UIKit class ViewController: UIViewController {               @IBOutlet var fi...

WebStorm里面配置运行React Native的方案

以前开发react native项目总是需要打开WebStorm编写代码,Xcode跑项目.显得有点多余. 今天教大家如何直接使用WebStorm这个IDE直接完成编码+运行项目工作.这样就可以...
  • QCIWYY
  • QCIWYY
  • 2017年07月11日 09:39
  • 629

Android多渠道打包(三):美团多渠道打包

本章将介绍美团多渠道打包方法 Android多渠道打包(一):原始多渠道打包 Android多渠道打包(二):友盟多渠道打包 Android多渠道打包(三):美团多渠道打包 Android多渠道...

Swift自定义UIView动画

  • 2016年12月23日 22:52
  • 32KB
  • 下载

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

首先我创建了两个view 一个红色的 一个黄色的 分别代表两个方法要实现动画的现实界面 var readView:UIView! var yellowView:UIView! ov...

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

// //  ViewController.swift //  Swift_004 // //  Created by 周双建 on 15/11/30. //  Copy...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【Swift学习ing】之 UIView动画(基础篇)
举报原因:
原因补充:

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