iOS 变形 play/pause 动画

Question

我想在我正在开发的应用程序中有一个像变形 play/pause 动画的 YouTube。看起来像动画here。我不知道该怎么做。我知道我需要 CABasicAnimation 和 CAShapeLayer。我知道我需要两个（或者更多？）UIBezierPath-s。一个是 shapeLayer 的路径，另一个是 toValue 的动画路径。类似于：

shape.path = pausePath().cgPath

let animation = CABasicAnimation(keyPath: "path")
animation.toValue = trainglePath().cgPath
animation.duration = 1
shape.add(animation, forKey: animation.keyPath)

但我不确定如何走这些路。我有以下问题：

路径的制作方式重要吗？例如，一条从左到右画的线是否会与一条从右到左画的线动画不同？我的意思是 path.move(to: startPoint); path.addLine(to: endPoint1)反对path.move(to: endPoint1)； path.addLine(to: startPoint)
两条路够吗？一个用于开始按钮，一个用于暂停按钮？如果是 - 绘制它们以使它们具有动画效果的正确方法是什么 "correctly"？我在这里不要求提供代码（并不是说我介意将代码作为答案），但对于初学者来说，一些一般性的解释就足够了。

Answer 1

使路径动画起作用的关键是开始路径和结束路径都具有相同数量的控制点。如果你看那个动画，在我看来，最初的“播放”三角形被绘制为 2 个相互接触的封闭四边形，其中右四边形有 2 个点在一起，所以它看起来像一个三角形。然后动画将这些四边形的控制点分开，并将它们都变成暂停符号的矩形。

如果你把它画在方格纸上，应该很容易创建前后控制点。

考虑下面的（非常粗略的）插图。顶部显示“播放”三角形分成 2 个四边形，右侧部分（黄色）显示为四边形，右侧的点稍微分开以显示想法。在实践中，您将设置具有完全相同坐标的两个控制点的四边形。

我用数字标记了每个四边形的控制点以显示绘制它们的顺序（对于每个四边形：移动到第一个点，线到第二/第三/第四点，最后是线到第一个点，关闭多边形。)

底部插图显示了为给出暂停符号而移动的点。

如果您创建 CAShapeLayer 的 CABasicAnimation，从控制点开始（如上图）并以控制点结束（如底部图），您应该得到一个与您链接到的动画非常相似的动画。

我刚刚创建了一个演示程序，它创建了一个像我描述的那样的动画。这是它的样子：

我用黑色勾勒出路径并用青色填充它们，这样更容易看出发生了什么。

（比我手绘<grin>完成的多一点。）

您可以在 this Github link 查看生成该动画的项目。

Answer 2

这是一个基于 CAShapeLayer 的小实现，它基本上克隆了 link.

中描述的行为

class PlayPauseButton: UIControl {

    // public function can be called from out interface
    func setPlaying(_ playing: Bool) {
        self.playing = playing
        animateLayer()
    }

    private (set) var playing: Bool = false
    private let leftLayer: CAShapeLayer
    private let rightLayer: CAShapeLayer

    override init(frame: CGRect) {
        leftLayer = CAShapeLayer()
        rightLayer = CAShapeLayer()
        super.init(frame: frame)

        backgroundColor = UIColor.white
        setupLayers()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("Not implemented")
    }

    private func setupLayers() {
        layer.addSublayer(leftLayer)
        layer.addSublayer(rightLayer)

        leftLayer.fillColor = UIColor.black.cgColor
        rightLayer.fillColor = UIColor.black.cgColor
        addTarget(self,
                  action: #selector(pressed),
                  for: .touchUpInside)
    }

    @objc private func pressed() {
        setPlaying(!playing)
    }

    private func animateLayer() {
        let fromLeftPath = leftLayer.path
        let toLeftPath = leftPath()
        leftLayer.path = toLeftPath

        let fromRightPath = rightLayer.path
        let toRightPath = rightPath()
        rightLayer.path = toRightPath

        let leftPathAnimation = pathAnimation(fromPath: fromLeftPath,
                                              toPath: toLeftPath)
        let rightPathAnimation = pathAnimation(fromPath: fromRightPath,
                                               toPath: toRightPath)

        leftLayer.add(leftPathAnimation,
                      forKey: nil)
        rightLayer.add(rightPathAnimation,
                       forKey: nil)
    }

    private func pathAnimation(fromPath: CGPath?,
                               toPath: CGPath) -> CAAnimation {
        let animation = CABasicAnimation(keyPath: "path")
        animation.duration = 0.33
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
        animation.fromValue = fromPath
        animation.toValue = toPath
        return animation
    }

    override func layoutSubviews() {
        leftLayer.frame = leftLayerFrame
        rightLayer.frame = rightLayerFrame

        leftLayer.path = leftPath()
        rightLayer.path = rightPath()
    }

    private let pauseButtonLineSpacing: CGFloat = 10

    private var leftLayerFrame: CGRect {
        return CGRect(x: 0,
                      y: 0,
                      width: bounds.width * 0.5,
                      height: bounds.height)
    }

    private var rightLayerFrame: CGRect {
        return leftLayerFrame.offsetBy(dx: bounds.width * 0.5,
                                       dy: 0)
    }

    private func leftPath() -> CGPath {
        if playing {
            let bound = leftLayer.bounds
                                 .insetBy(dx: pauseButtonLineSpacing,
                                          dy: 0)
                                 .offsetBy(dx: -pauseButtonLineSpacing,
                                           dy: 0)

            return UIBezierPath(rect: bound).cgPath
        }

        return leftLayerPausedPath()
    }

    private func rightPath() -> CGPath {
        if playing {
            let bound = rightLayer.bounds
                                 .insetBy(dx: pauseButtonLineSpacing,
                                          dy: 0)
                                .offsetBy(dx: pauseButtonLineSpacing,
                                          dy: 0)
            return UIBezierPath(rect: bound).cgPath
        }

        return rightLayerPausedPath()
    }

    private func leftLayerPausedPath() -> CGPath {
        let y1 = leftLayerFrame.width * 0.5
        let y2 = leftLayerFrame.height - leftLayerFrame.width * 0.5

        let path = UIBezierPath()
        path.move(to:CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: leftLayerFrame.width,
                                 y: y1))
        path.addLine(to: CGPoint(x: leftLayerFrame.width,
                                 y: y2))
        path.addLine(to: CGPoint(x: 0,
                                 y: leftLayerFrame.height))
        path.close()

        return path.cgPath
    }

    private func rightLayerPausedPath() -> CGPath {
        let y1 = rightLayerFrame.width * 0.5
        let y2 = rightLayerFrame.height - leftLayerFrame.width * 0.5
        let path = UIBezierPath()

        path.move(to:CGPoint(x: 0, y: y1))
        path.addLine(to: CGPoint(x: rightLayerFrame.width,
                                 y: rightLayerFrame.height * 0.5))
        path.addLine(to: CGPoint(x: rightLayerFrame.width,
                                 y: rightLayerFrame.height * 0.5))
        path.addLine(to: CGPoint(x: 0,
                                 y: y2))
        path.close()
        return path.cgPath
    }
}

代码应该非常简单明了。这是您的使用方法，

let playButton = PlayPauseButton(frame: CGRect(x: 0,
                                               y: 0,
                                               width: 200,
                                               height: 200))
view.addSubview(playButton)

你不需要从外面处理任何事情。按钮本身处理动画。您可以使用 target/action 来更改对按钮点击的检测。此外，您可以使用 public 方法从外部添加动画状态，

playButton.setPlaying(true) // animate to playing
playButton.setPlaying(false) // animate to paused state

这是它的样子，

iOS 变形 play/pause 动画

iOS morphing play/pause animation

cabasicanimation

cashapelayer

ios

swift