iOS炫酷动画(一)

最近，看到一个很炫酷的动画。效果是这样的。在进行切换的时候，会有一个线跑的动画。于是乎参照着用swift做了一份。没有封装成tabbar，只是做了个动画效果。https://github.com/silan-liu/SLAnimation

1.gif

动画拆解

乍一看，点击另外一个item后，红色的圆圈可以想像成是一个铁丝围成的圈，圈被逐渐解开，然后有根水平线在拉着圆圈走向目的地，在到达目的地的途中，又开始绕成一个圈，尾巴逐渐缩短，最终成为圆。（实在是不知道怎么描述了╮(╯▽╰)╭）

我们注意到，每个选中的item是有个红色圆圈包围的，图标也是选中状态，切换选中状态，红色圈会消失，图标变成未选中。

其实刚开始看到，这种圆解开，又绕成圆的走法，想到了strokeStart和strokenEnd。只是没明白，是怎样的轨迹可以做成这种效果。

动手实现

1、首先写个ItemView，即每个单独的view。因为每个item都可以点击，我们可以直接继承自UIButton。有2个imageview，选中和未选中状态的，在选中时，隐藏normalImageView。未选中时，将其显示出来。

class SLAnimationItemView: UIButton {

    let margin: CGFloat = 8.0

    private var innerSelectStatus: Bool = false
    
    private var normalImageView: UIImageView?
    private var selectedImageView: UIImageView?
    
    var outCircleLayer: CAShapeLayer?
    
    // MARK: show/hide
    func showOutLineLayer(show: Bool) {

    }
}

2、写动画。其实它的效果，在点击的时候，circle隐藏，在动画结束之后，选中的item将circle显示出来。动画轨迹是这样：0_0，两个item分别有个圈，中间连着一根线。

[email protected]

这种轨迹可以用贝塞尔曲线来画，主要代码如下。注意的是点击的item位置问题，如果点击的是原item左边的，是顺时针画。反之，逆时针。

func animationBezierPath() -> UIBezierPath {

        let bezierPath = UIBezierPath()
        // true--顺时针
        let clockwise: Bool = fromPoint.x > toPoint.x

        // first circle
        bezierPath.addArcWithCenter(fromPoint, radius: radius, startAngle: CGFloat(M_PI_2), endAngle: CGFloat(M_PI), clockwise: clockwise)
        bezierPath.addArcWithCenter(fromPoint, radius: radius, startAngle: CGFloat(M_PI), endAngle: CGFloat(M_PI_2), clockwise: clockwise)

        // line
        bezierPath.moveToPoint(CGPointMake(fromPoint.x, fromPoint.y + radius))
        bezierPath.addLineToPoint(CGPointMake(toPoint.x, toPoint.y + radius))

        // second circle
        bezierPath.addArcWithCenter(toPoint, radius: radius, startAngle: CGFloat(M_PI_2), endAngle: CGFloat(M_PI), clockwise: clockwise)
        bezierPath.addArcWithCenter(toPoint, radius: radius, startAngle: CGFloat(M_PI), endAngle: CGFloat(M_PI_2), clockwise: clockwise)

        return bezierPath
    }

因为最终线不见了，所以是strokeStart到了选中item的切点位置就结束了，strokeEnd到了路径最终点。动画代码如下：

func createAnimation(completion: () -> ()) -> CAAnimationGroup {

        let duration: CFTimeInterval = 0.75
        let strokeStartAnimation = CABasicAnimation(keyPath: "strokeStart")

        strokeStartAnimation.duration = duration
        strokeStartAnimation.fromValue = 0
        strokeStartAnimation.toValue = distance() / totalLength()

        let strokeEndAnimation = CABasicAnimation(keyPath: "strokeEnd")

        strokeEndAnimation.duration = duration
        strokeEndAnimation.fromValue = 0.1
        strokeEndAnimation.toValue = 1

        let animationGroup: CAAnimationGroup = CAAnimationGroup()

        animationGroup.duration = duration;
        animationGroup.animations = [strokeStartAnimation, strokeEndAnimation]
        animationGroup.delegate = self
        animationGroup.fillMode = kCAFillModeBoth;
        animationGroup.removedOnCompletion = false

        return animationGroup
    }

动画结束之后，需要将动画layer隐藏掉或者移除掉。这里为了防止频繁的创建layer，暂且只隐藏起来。

问题

这里碰到了一个问题，就是在显示circle时，当时我不想频繁创建和移除circle，直接设置opacity来操作隐藏显示的话，会感觉闪一下。而采用重新创建的方式，就不会。后来想了好久，才发现是CALayer隐式动画的问题，操作CALayer的属性，会默认有个0.25s的动画。所以将隐式动画禁用后，一切完美了。

UIView.animateWithDuration(0.3, animations: {
            
            CATransaction.begin()
            CATransaction.setDisableActions(true)
            self.outCircleLayer.opacity = show ? 1 : 0
            
            CATransaction.commit()
            
            self.normalImageView?.alpha = show ? 0 : 1

            }) { (flag) in
        }

最后

其实看了源码之后还是觉得动画不是太复杂。很多炫酷的动画都是属性的组合动画，或者是Bezier曲线变换什么的。