关闭

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

标签: uiviewswift动画苹果
254人阅读 评论(0) 收藏 举报
分类:

今天给大家分享一下我自学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-

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:523次
    • 积分:24
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档