iOS 复杂动画之抽丝剥茧

465 查看

一、前言

随着开发者的增多和时间的累积，AppStore已经有非常多的应用了，每年都有很多新的APP产生。但是我们手机上留存的应用有限，所以如何吸引用户，成为产品设计的一项重要内容。其中炫酷的动画效果是重要内容之一，我们会发现很多好的应用上面都有许多很炫的效果。可能一提到炫酷的动画，很多人都很头疼，因为动画并不是那么好做，实现一个好的动画需要时间、耐心和好的思路。下面我们就以一个有趣的动画（如下图）为例，抽丝剥茧，看看到底是怎么实现的！

二、分析

上面图中的动画第一眼看起来的确是有点复杂，但是我们来一步步分析，就会发现其实并不是那么难。仔细看一下就会发现，大致步骤如下：

1、先出来一个圆
2、圆形在水平和竖直方向上被挤压，呈椭圆形状的一个过程，最后恢复成圆形
3、圆形的左下角、右下角和顶部分别按顺序凸出一小部分
4、圆和凸出部分形成的图形旋转一圈后变成三角形
5、三角形的左边先后出来两条宽线，将三角形围在一个矩形中
6、矩形由底部向上被波浪状填满
7、被填满的矩形放大至全屏，弹出Welcome

动画大致就分为上面几个步骤，拆分后我们一步步来实现其中的效果（下面所示步骤中以Swift代码为例，demo中分别有Objective-C和Swift的实现）。

三、实现圆形以及椭圆的渐变

首先，我们创建了一个新工程后，然后新建了一个名AnimationView的类继承UIView，这个是用来显示动画效果的一个view。然后先添加CircleLayer（圆形layer），随后实现由小变大的效果。

class AnimationView: UIView {

let circleLayer = CircleLayer()

override init(frame: CGRect) {

super.init(frame: frame)

backgroundColor = UIColor.clearColor()

addCircleLayer()

}

required init?(coder aDecoder: NSCoder) {

super.init(coder: aDecoder)

}

/**

add circle layer

func addCircleLayer() {

self.layer.addSublayer(circleLayer)

circleLayer.expand()

}

其中expand()这个方法如下

/**

expand animation function

func expand() {

let expandAnimation: CABasicAnimation = CABasicAnimation(keyPath: "path")

expandAnimation.fromValue = circleSmallPath.CGPath

expandAnimation.toValue = circleBigPath.CGPath

expandAnimation.duration = KAnimationDuration

expandAnimation.fillMode = kCAFillModeForwards

expandAnimation.removedOnCompletion = false

self.addAnimation(expandAnimation, forKey: nil)

}

运行效果如下

CircleLayer.gif

第一步做好了，接下来就是呈椭圆形状的变化了，仔细分析就比如一个弹性小球，竖直方向捏一下，水平方向捏一下这样的效果。这其实就是一个组合动画，如下

/**

wobbl group animation

func wobbleAnimate() {

// 1、animation begin from bigPath to verticalPath

let animation1: CABasicAnimation = CABasicAnimation(keyPath: "path")

animation1.fromValue = circleBigPath.CGPath

animation1.toValue = circleVerticalSquishPath.CGPath

animation1.beginTime = KAnimationBeginTime

animation1.duration = KAnimationDuration

// 2、animation vertical to horizontal

let animation2: CABasicAnimation = CABasicAnimation(keyPath: "path")

animation2.fromValue = circleVerticalSquishPath.CGPath

animation2.toValue = circleHorizontalSquishPath.CGPath

animation2.beginTime = animation1.beginTime + animation1.duration

animation2.duration = KAnimationDuration

// 3、animation horizontal to vertical

let animation3: CABasicAnimation = animation horizontal to vertical

let animation3: CABasicAnimation = ڄ应用上面都有许多很炫的效果。可能一提到炫酷的动画，很多人都很头疼，因为动画并不是那么好做，实现一个好的动画需要时间、耐心和好的思路。下面我们就以一个有趣的动画（如下图）为例，抽丝剥茧，看看到底是怎么实现的！