iOS动画指南 - 1.View Animations

1.开篇

动画属性

通过修改对应视图(UIView)的属性,可以实现一些最基础的动画效果.

• 位置和尺寸的修改: bounds frame center transform
• 外观样式的变化: backgroundColor alpha

往往很多复杂的动效就是通过改变这些属性产生,这也是本篇的主要内容.

        // 动画持续时间: 2秒 延迟: 0.2秒 可选参数:空
        UIView.animateWithDuration(2, delay: 0.2, options:[], animations: { () -> Void in
            
            self.dogImageView.center.x += 200;
            
        }, completion: nil)

普通移动.gif

动画的可选参数

上面代码的可选参数设置为空,实际上我们可以设置一些参数.

1.来回移动

       //可选参数:无线重复, 来回移动
        UIView.animateWithDuration(2, delay: 0.2, options:[.Repeat, .Autoreverse], animations: { () -> Void in
            
            self.dogImageView.center.x += 200;
            
        }, completion: nil)

来回移动.gif

2.加速减速效果

在现实生活中,往往也会有一个加速减速的过程,我们这边也可以实现

        // 可选参数:无限重复, 来回移动, 缓慢加速缓慢减速
        UIView.animateWithDuration(2, delay: 0.2, options:[.Repeat, .Autoreverse, .CurveEaseInOut], animations: { () -> Void in
            
            self.dogImageView.center.x += 200;
            
        }, completion: nil)

缓慢加速缓慢减速.gif

当然啦,可选参数还有很多就不一一试了,有兴趣的同学可以尝试一下.

2.弹簧效果

其实弹簧效果就类似于惯性.

        // usingSpringWithDamping 弹性效果0~1之间,值越大弹簧效果越不明显
        // initialSpringVelocity 运动的速度
        UIView.animateWithDuration(2, delay: 0.2, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: [], animations: { () -> Void in
            
            self.dogImageView.center.x += 200

            }, completion: nil)

弹簧效果.gif

3.过渡效果

看完了几个简单的位移效果,我们再来看看视图的切换效果.如果想为添加或者移除视图这个动作添加特效,那么我们可以这样做.

1.添加视图

        // contentView 执行动画效果的视图
        // TransitionCurlUp 翻页效果
        UIView.transitionWithView(contentView, duration: 2, options:[.TransitionCurlUp], animations: { () -> Void in
            self.contentView.addSubview(self.dogImageView)
            }, completion: nil)

过渡效果.gif

2.移除视图,隐藏视图

通过上面这个方法我们还可以做到移除视图,隐藏视图

3.替换视图

如果需要将一个视图替换成另一个视图,那么可以这样做

 UIView.transitionFromView(dogImageView, toView: SpheniscidaeImageView, duration: 2, options: [.TransitionFlipFromTop], completion: nil)

替换效果.gif

3.动画组

在实际应用中,不可避免的需要将几个动画按照次序进行先后执行.

例如,需要实现这样一个效果,该怎样去实现呢?
可能很多人第一时间就会想到这样做

UIView.animateWithDuration(1, animations: { () -> Void in
            // 1.第一步代码
            }) { (_) -> Void in
                UIView.animateWithDuration(1, animations: { () -> Void in
                    // 2.第二步代码
                    }) { (_) -> Void in
                        UIView.animateWithDuration(1, animations: { () -> Void in
                            // 3.第三步代码
                            }) { (_) -> Void in
                        }
                }
        }

这样层层嵌套也是可以实现的,但代码的可读性就打了折扣,其实官方有相关的方法给我们使用,可以这样做

        // duration 整个动画的时间
        UIView.animateKeyframesWithDuration(5, delay: 0.0, options: [.CalculationModeCubic], animations: { () -> Void in
          
            // 1.第一步代码
            // frameStartTime 开始时间占总时间的百分比
            // relativeDuration 每一个小的动画占总时间的百分比
            UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25) { () -> Void in
                self.planeView.center.y -= 10
                self.planeView.center.x += 180
            }

            // 2.第二步代码
            UIView.addKeyframeWithRelativeStartTime(0.1, relativeDuration: 0.4, animations: { () -> Void in
                self.planeView.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI_4)/2)
            })
            
            // 3.第三步代码
            UIView.addKeyframeWithRelativeStartTime(0.25, relativeDuration: 0.25, animations: { () -> Void in
                self.planeView.center.x += 180
                self.planeView.center.y -= 50
                self.planeView.alpha = 0.0
            })
            
            // 4.第四步代码
            UIView.addKeyframeWithRelativeStartTime(0.51, relativeDuration: 0.0, animations: { () -> Void in
                self.planeView.center.x = -50
            })

            // 5.第五步代码
            UIView.addKeyframeWithRelativeStartTime(0.51, relativeDuration: 0.1, animations: { () -> Void in
                self.planeView.center.y = self.view.center.y
                self.planeView.transform = CGAffineTransformIdentity
                self.planeView.alpha = 1.0

            })
            
            // 6.第六步代码
            UIView.addKeyframeWithRelativeStartTime(0.61, relativeDuration: 0.3, animations: { () -> Void in
                self.planeView.center.x = 100
            })
            
            }, completion: nil)

动画组.gif

本文整理自:iOS.Animations.by.Tutorials.v2.0
如有疑问,欢迎留言 :-D