在单个CAShapeLayer中对多个UIBezier路径进行动画处理

时间:2018-07-11 08:55:47

标签: ios swift uibezierpath cashapelayer

我想动画在屏幕上绘制多个字母。我将数据放在一个数组中。该数组包含线对象,这些线对象具有动画的开始和结束时间,以及组成该线的点。我当前的代码如下:

private func animateSentData(data: WhiteboardData) {
        // I currently only draw a single letter
        let path: UIBezierPath = UIBezierPath()
        if let line = data.lines.first {
            for (n, point) in line.pts.enumerated() {
                let translation: (CGFloat, CGFloat) = (point.x / data.w, point.y / data.h)
                if n == 0 {
                    path.move(to: CGPoint(x: view.frame.width * translation.0, y: view.frame.height * translation.1))
                } else {
                    path.addLine(to: CGPoint(x: view.frame.width * translation.0, y: view.frame.height * translation.1))
                }
            }
        }
        let shapelayer: CAShapeLayer = CAShapeLayer()
        shapelayer.path = path.cgPath
        shapelayer.strokeColor = UIColor.black.cgColor
        shapelayer.fillColor = UIColor.clear.cgColor
        shapelayer.lineCap = kCALineCapRound
        shapelayer.lineWidth = brushWidth

        shapelayer.frame = view.bounds
        view.layer.addSublayer(shapelayer)
        let animation: CABasicAnimation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = 0
        animation.duration = 3.0 // A test duration
        shapelayer.add(animation, forKey: "myAnimation")
    }

在上面的代码中,您可以看到我仅绘制第一个字母。我要如何画其他字母?我是否需要为每个字母创建一个新的CAShapeLayer?这样做似乎效率低下。 CAShapeLayer是否可能有多个UIBezierPath,然后分别对其进行动画处理?任何提示,将不胜感激!谢谢

1 个答案:

答案 0 :(得分:2)

通过使用CAShapeLayer实例方法组合多个UIBezierPath,您绝对可以使用单个append(_:)

代码看起来像这样:

InstagramActionsHistories::find(1)->log()->create([
   'schedule_id' => 1,
   'action_type' => 1,
   'log' => 'test'
])

说明:

虽然您可以将多个路径组合到一个ActionsLog::create([ 'schedule_id' => 1, 'action_type' => 1, 'log' => 'test' ]); 中,但是之后就无法为单个子路径设置动画。