【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自定义UIView动画

  • 2016-12-23 22:52
  • 32KB
  • 下载

iOS Swift3.0 UIView动画详解

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

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

// //  ViewController.swift //  Swift_004 // //  Created by 周双建 on 15/11/30. //  Copy...

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

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

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

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

UIView 基础动画

// // CHAppDelegate.m // uiAn动画 // // Created by imac on 14-10-14. // Copyright (c) 2014年 ___FUL...

LInux 编程基础学习笔记 持续ing 文件读写

一。文件读写 1.创建文件:                     头文件:                ...

机器学习之由wavenet涉及到的基础知识(补充下学习ing)

1、全卷积神经网络 FCN FCN 可以说是深度学习在图像语义分割任务上的开创性工作,出自 UC Berkeley 的 Trevor Darrell 组,发表于计算机视觉领域顶级会议 CVPR ...

UIView动画(过渡效果)的学习笔记

UIView视图的动画功能,可以使在更新或切换视图时有放缓节奏、产生流畅的动画效果,进而改善用户体验。UIView可以产生动画效果的变化包括: 位置变化:在屏幕上移动视图。 大小变化:...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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