iOS 动画Animation - 6 - 3 实战练习之复杂动画拆装

其实我们在看到的每一个复杂的动画都是有许多简单的动画巧妙的拼装出来的，在教给大家学会拼装一个动画，其实我更愿意教会大家如何去拆解一个动画。如果看到一个动画，会去把它拆解成一个个简单的动画，那么实现这个动画就轻而易举了。

先给大家看一张效果图:

动画分析

这个动画其实在实现的时候并不困难，可能很多人怕就怕在没有思路，下面我就将这个动画拆解。

• 1、先出来一个圆，圆形在水平和竖直方向上被挤压，呈椭圆形状的一个过程，最后恢复成圆形

• 2、圆形的左下角、右下角和顶部分别按顺序凸出一小部分

• 3、圆和凸出部分形成的图形旋转一圈后变成三角形

• 4、三角形的左边先后出来两条宽线，将三角形围在一个矩形中

• 5、矩形由底部向上被波浪状填满

• 6、被填满的矩形放大至全屏

动画实现

• 1、先出来一个圆，并实现横向和竖向挤压的效果

    func addCircle() {

        shapeLayer.frame = CGRect(x: screenWidth/2 - 50, y: screenHeight/2 - 50, width: 100, height: 100)
        shapeLayer.fillColor = UIColor.orangeColor().CGColor
        view.layer.addSublayer(shapeLayer)
        // 画小圆
        let path1 = UIBezierPath(ovalInRect: CGRect(x: 40, y: 40, width: 20, height: 20))
        // 变成大圆
        let path2 = UIBezierPath(ovalInRect: CGRect(x: 0, y: 0, width: 100, height: 100))
        // 横向挤压
        let path3 = UIBezierPath(ovalInRect: CGRect(x: 5, y: 0, width: 90, height: 100))
        // 恢复
        let path4 = UIBezierPath(ovalInRect: CGRect(x: 0, y: 0, width: 100, height: 100))
        // 竖向挤压
        let path5 = UIBezierPath(ovalInRect: CGRect(x: 0, y: 5, width: 100, height: 90))
        // 恢复
        let path6 = UIBezierPath(ovalInRect: CGRect(x: 0, y: 0, width: 100, height: 100))
        let animation = CAKeyframeAnimation(keyPath: "path")
        animation.values = [path1.CGPath, path2.CGPath, path3.CGPath, path4.CGPath, path5.CGPath, path6.CGPath, path3.CGPath, path4.CGPath, path5.CGPath, path6.CGPath];
        animation.duration = 1
        animation.beginTime = 0
        animation.removedOnCompletion = false
        animation.fillMode = kCAFillModeForwards
        shapeLayer.addAnimation(animation, forKey: nil)

    }

里面的内容我就不再多做介绍了，这些都是简单的动画，如果不够了解，请看本专题之前的文章

实现效果如下图：

• 2、圆形的左下角、右下角和顶部分别按顺序凸出一小部分

看似是圆的周围一次多出来一个角，实际行就是一个颜色与圆相同的三角在做变化，这个动画跟圆没有关系。如果我将这个三角换一种颜色，并且将动画放慢，就是这样的

看代码：

    func addSanjiao() {

        shapeLayer1.frame = CGRect(