iOS动画——ViewAnimations

时间:2015-05-22 20:51:10   收藏:0   阅读:166

又给自己挖了一个坑,我很喜欢动画不错,但是写出来又是另外一个问题了~~~

这一篇我们来说说UIKit中的动画API,其中包括:

今天的故事就将围绕这些API展开,阐述他的前世今生。

UIKit动画API使用起来十分简单与方便,他避免了Core Animation的复杂性,虽然事实上UIKit动画API的底层使用的也是Core Animation。

来看第一个,UIView.UIView.animateWithDuration

先来看一下函数原型:

1
   class func animateWithDuration(duration: NSTimeInterval, delay: NSTimeInterval, usingSpringWithDamping dampingRatio: CGFloat, initialSpringVelocity velocity: CGFloat, options: UIViewAnimationOptions, animations: () -> Void, completion: ((Bool) -> Void)?)

一共七个参数:

关于这些参数,选一个列子,尝试不同的参数,这样可以更好的理解每个参数的意义。

技术分享

好丑的动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        self.animationView2.alpha = 0
        self.animationView3.alpha = 0
        UIView.animateWithDuration(5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .Repeat, animations: { () -> Void in
            self.animationView.center.y += 100
        }) { (Bool) -> Void in
            println("finish")
        }
        UIView.animateWithDuration(5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .Repeat, animations: { () -> Void in
            self.animationView2.alpha = 1
            }) { (Bool) -> Void in
                println("finish")
        }
        UIView.animateWithDuration(5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .Repeat, animations: { () -> Void in
            self.animationView3.center.y -= 100
            self.animationView3.alpha = 1
            }) { (Bool) -> Void in
                println("finish")
        }

代码就不逐行解释,三个UIView.animateWithDuration分别操作三个方块。第一个方块是一个移动动画,第二个方块是一个透明度渐变动画,第三个方块是移动加透明度渐变的组合动画,可能看的不是很清楚。不得不说这个动画真的很丑~~~

UIView.UIView.animateWithDuration这个API说穿了就是逐渐改变UIView的某项属性,这些属性包括:位置,大小,透明度,颜色等等。

再来看一下UIView.transitionWithView,这是一个过度动画,主要用于UIView进入或者离开视图。

先看一下这一个动画效果吧:

技术分享

其中banner右移消失的动画用的就是上面提到的UIView.UIView.animateWithDuration,而进入的动画用的就是现在要讲的UIView.transitionWithView。很像一页书页翻下来的感觉哈。

我们来看一下函数原型

1
    class func transitionWithView(view: UIView, duration: NSTimeInterval, options: UIViewAnimationOptions, animations: () -> Void, completion: ((Bool) -> Void)?)

一共五个参数:

代码大概长这样

1
2
3
4
5
UIView.transitionWithView(status, duration: 0.33, options:
            .CurveEaseOut | .TransitionCurlDown, animations: {
                self.yourView.hidden = false
            }, completion:nil
        })

这一部分代码已上传Github,Github地址在文章的最后面。

我相信看看源代码,大家都能明白的。

这里再给大家看一个动画,也是用前面提到过的函数写的:

技术分享

尼玛~这显示效果太差了吧,不知道你们那里看到的是什么样的

仿3D效果,代码也在上传的那个Demo中,大家自己看啦~

到最后一个函数啦啦,UIView.animateKeyframesWithDuration,先来看一下动画效果吧。

技术分享

小飞机~飞啊飞~

我们很容易就可以发现,这个动画分了很多阶段完成,我们当然可以用我们提到的第一个函数UIView.UIView.animateWithDuration来完成,但是,你不觉得嵌套加嵌套显得很不好看吗,我们当然还有更好的方法来实现,就是我们现在要说的,先来看一下函数原型:

1
class func animateKeyframesWithDuration(duration: NSTimeInterval, delay: NSTimeInterval, options: UIViewKeyframeAnimationOptions, animations: () -> Void, completion: ((Bool) -> Void)?)

一共五个参数:

来看一下我们实现这个小飞机~飞啊飞~~的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let originalCenter = planeImage.center
        UIView.animateKeyframesWithDuration(1.5, delay: 0.0, options: .Repeat, animations: {
            //add keyframes
            UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25, animations: {
                self.planeImage.center.x += 80.0
                self.planeImage.center.y -= 10.0
            })
            UIView.addKeyframeWithRelativeStartTime(0.1, relativeDuration: 0.4) {
                self.planeImage.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI_4/2))
            }
            UIView.addKeyframeWithRelativeStartTime(0.25, relativeDuration: 0.25) {
                self.planeImage.center.x += 100.0
                self.planeImage.center.y -= 50.0
                self.planeImage.alpha = 0.0
            }
            UIView.addKeyframeWithRelativeStartTime(0.51, relativeDuration: 0.01) {
                self.planeImage.transform = CGAffineTransformIdentity
                self.planeImage.center = CGPoint(x: 0.0, y: originalCenter.y)
            }
            UIView.addKeyframeWithRelativeStartTime(0.55, relativeDuration: 0.45) {
                self.planeImage.alpha = 1.0
                self.planeImage.center = originalCenter
            }
            }, completion:nil)

完整的代码在最后提供的源代码中有。

事实告诉我们动画是要靠设计的,你看我上面的动画抽的一笔,但事实上用同样的代码可以写出很漂亮的动画。

代码已上传Github:https://github.com/superxlx/iOS_Animation_Test1

原文:http://www.cnblogs.com/sunnyke/p/4523049.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!