iOS炫酷动画(二)

O(∩_∩)O哈！又是一个很cool的动画。原作者在这里。画面看着太美好，于是又试着用Swift写了一个。我的在这里

1.gif

动画分解

1、首先是椭圆背景色的渐变，灰色---》淡蓝色。

2、脸的动画。这里又分为脸盘（😄就这么叫吧）和器官（2眼睛+1嘴巴）的动画。

脸盘的动画，比较简单，就是x的位移。
眼睛+嘴巴这个整体的动画，有个回弹的效果。先是向右飞出去，然后到达右边之后，又从左边飞进来，最后回弹一下。

3、嘴巴的动画。off的时候，是个长方形的嘴，切换到on，变成了笑脸嘴，并且有个逐渐张开的过程。

AIYA，还真是难描述。

元素分解

知道了动画步骤之后，元素就比较好分了。脸盘是1个layer，2眼睛+嘴巴==1个layer，椭圆背景=1view。

开工开工

嘴巴

首先注意到的是嘴巴的绘制，on和off的状态其实是2种不同的曲线，长方形很好画，那么张开的嘴呢？当然都是用万能的贝塞尔曲线啦。其实看了代码，都觉得简单o(>﹏<)o。

闭嘴的frame=(0.25w, 0.7h, 0.5w, 0.1h)
张嘴的，x,y,w都是一样的，只不过是控制2个control point的位置。

private func mouthPath() -> UIBezierPath {
        
        if isOn {
            let path = UIBezierPath()

            path.moveToPoint(CGPointMake(mouthRect().origin.x, mouthRect().origin.y))
            path.addCurveToPoint(CGPointMake(mouthLenth() + mouthRect().origin.x, mouthY()), controlPoint1: CGPointMake(mouthRect().origin.x + mouthOffset / 4, mouthY() + mouthOffset / 2),
                                 controlPoint2: CGPointMake(mouthRect().origin.x + mouthOffset * 3 / 4, mouthY() + mouthOffset / 2))
            path.closePath()
            
            return path
        } else {
            let path = UIBezierPath(rect: mouthRect())
            return path
        }
    }

眼睛

眼睛就是2个椭圆，有现成的。frame=(0.2w, 0.25h, 0.4w, 0.6h)

private func rightEyePath() -> UIBezierPath {
        let origin = rightEyeOrigin()
        let size = eyeSize()
        let path = UIBezierPath(ovalInRect: CGRectMake(origin.x, origin.y, size.width, size.height))
        
        return path
    }

眼睛+嘴巴

其实就是在layer上面，分别把他们画上去。

override func drawInContext(ctx: CGContext) {
        
        let bezierLeft = leftEyePath()
        let bezierRight = rightEyePath()
        let bezierMouth = mouthPath()
        
        CGContextAddPath(ctx, bezierLeft.CGPath)
        CGContextAddPath(ctx, bezierRight.CGPath)
        CGContextAddPath(ctx, bezierMouth.CGPath)
        CGContextSetFillColorWithColor(ctx, color().CGColor)
        CGContextSetStrokeColorWithColor(ctx, UIColor.clearColor().CGColor)
        CGContextFillPath(ctx)
    }

脸盘/椭圆背景

这个更简单了，用cornerRadius或者bezierPath都行。

嘴张开的动画

因为嘴是用bezier曲线画的，有2个control point。所以主要是操控control point，来实现张开的效果。

为了支持自定义属性动画，需要用到needsDisplayForKey，改变属性后，可以引发drawInContext重绘。mouthOffset最后其实是等于mounLength的，所以只需要将mouthOffset从0变到mounLength即可。

internal override class func needsDisplayForKey(key: String) -> Bool {
        if key == "mouthOffset" {
            return true
        }
        
        return super.needsDisplayForKey(key)
    }

动画顺序

拿从off到on的过程来说。
1、背景渐变+脸盘移动+器官向右飞出
2、脸盘移动的动画结束后，器官从左往右飞出，并回弹。同时嘴巴开始张开动画。
3、回弹动画结束，整个动画结束。

动画注意

在动画结束之后，要将对应值设成动画之后的值。

override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
        if flag {
            if let type = anim.valueForKey("animation") as? String {
                // 脸盘移动到端点
                if type == "faceBgLayerAnimation" {
                    
                    faceBgLayer.removeAllAnimations()
                    faceBgLayer.position = positionOfFaceView(!isOn)
                    
                    faceLayer.isOn = !isOn
                    faceLayer.mouthOffset = !isOn ? faceLayer.bounds.size.width / 2 : 0
                    faceLayer.setNeedsDisplay()
                
                    if (!isOn) {
                        mouthAnimation(isOn, offset: faceLayer.bounds.size.width / 2)
                        moveRightBackAnimation()
                    } else {
                        moveLeftBackAnimation()
                    }
                } else if type == "backgroundAnimation" {
                    
                    self.backgroundColor = isOn ? onColor : offColor
                    
                } else if type == "moveBackAnimation" {
                    
                    faceLayer.removeAllAnimations()

                    isOn = !isOn
                    isAnimating = false
                }
            }
        }
    }