美文网首页
iOS动画——viewAnimation

iOS动画——viewAnimation

作者: 盗梦49 | 来源:发表于2018-01-06 10:36 被阅读0次

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

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

    UIView.UIView.animateWithDuration

    UIView.transitionWithView

    UIView.animateKeyframesWithDuration

    UIView.addKeyframeWithRelativeStartTime

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

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

    来看第一个,UIView.UIView.animateWithDuration

    先来看一下函数原型:

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

    一共七个参数:

    duration

    表示动画执行时间。

    delay

    动画延迟时间。

    usingSpringWithDamping

    表示弹性属性。

    initialSpringVelocity

    初速度。

    options

    可选项,一些可选的动画效果,包括重复等。

    animations

    表示执行的动画内容,包括透明度的渐变,移动,缩放。

    completion

    表示执行完动画后执行的内容。

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

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

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

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

    我们来看一下函数原型

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

    一共五个参数:

    view

    这当然就是指定要进行动画的对象了。

    duration

    和上面一样这个参数指定动画时间长短。

    options

    这是一个可选参数,虽然是可选的但是不填这个API就没意义了,因为UIView如何进入视图就是由这个参数决定。到底是像书页一样翻进去,还是像百叶窗一样转动就是由这个参数决定,具体有哪些可以选择,点进去看看就知道了。

    animations

    这个选项你可以将它理解为在动画结束后UIView的形态。

    completion

    动画结束后运行的代码。

    代码大概长这样

    UIView.transitionWithView(status, duration: 0.33, options:

                .CurveEaseOut | .TransitionCurlDown, animations: {

                    self.yourView.hidden = false

                }, completion:nil

            })

    到最后一个函数啦啦,UIView.animateKeyframesWithDuration。动画效果如下:

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

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

    一共五个参数:

    duration:整个动画过程的时间。

    delay:延迟多久开始。

    options:可选项,比如说重复,倒着来一遍等效果,自己都试试看吧。

    animations:需要执行的动画,里面可以是多个UIView.addKeyframeWithRelativeStartTime。

    至于这个UIView.addKeyframeWithRelativeStartTime方法,类似于我们提到的第一个UIView.UIView.animateWithDuration,也是一个属性渐变的方法,不过这个方法只能写在他的爸爸 UIView.animateKeyframesWithDuration的animation参数函数块中。

    completion:动画执行结束之后执行的代码。

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

    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)

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

     文/StrongX(简书作者)

    原文链接:http://www.jianshu.com/p/bd7bf438b288

    相关文章

      网友评论

          本文标题:iOS动画——viewAnimation

          本文链接:https://www.haomeiwen.com/subject/onzenxtx.html