iOS，如何连续动画一行“运行”（“行军蚂蚁”效果）？答案

【问题标题】：iOS, how to continuously animate a line "running" ("marching ants" effect)?iOS，如何连续动画一行“运行”（“行军蚂蚁”效果）？
【发布时间】：2017-03-22 05:33:12
【问题描述】：

我必须承认我不知道如何在 iOS 中执行此操作 -

这里有一些代码可以画出漂亮的虚线：

现在，我希望那条线向上“运行”：

所以，它会每隔一秒向上移动，itemLength * 2.0。

当然，它会从上到下环绕。

所以，DottedVertical 应该完全独立完成。

真的，你如何在 iOS 中做到这一点？

如果解决方案是通用的并且会“滚动”任何我认为的图层或绘制的东西，那就太好了。

在游戏引擎中，这很简单，您只需为纹理的偏移设置动画即可。您能否在 iOS 中偏移层或其他东西？

最好的方法是什么？

我猜你想使用 GPU（图层动画对吗？）来避免融化 cpu。

@IBDesignable class DottedVertical: UIView {

    @IBInspectable var dotColor: UIColor = UIColor.faveColor

    override func draw(_ rect: CGRect) {

        // say you want 8 dots, with perfect fenceposting:
        let totalCount = 8 + 8 - 1
        let fullHeight = bounds.size.height
        let width = bounds.size.width
        let itemLength = fullHeight / CGFloat(totalCount)
        let beginFromTop = !lowerHalfOnly ? 0.0 : (fullHeight * 8.0 / 15.0)
        let top = CGPoint(x: width/2, y: beginFromTop)
        let bottom = CGPoint(x: width/2, y: fullHeight)

        let path = UIBezierPath()
        path.move(to: top)
        path.addLine(to: bottom)
        path.lineWidth = width
        let dashes: [CGFloat] = [itemLength, itemLength]
        path.setLineDash(dashes, count: dashes.count, phase: 0)
        dotColor.setStroke()
        path.stroke()
}

（奖励 - 如果您在屏幕上显示了其中的一些，它们当然必须同步。需要有一个“同步”调用来启动正在运行的动画，这样您就可以开始通过通知或其他消息一次性将它们全部显示出来。）

【问题讨论】：

CAEmitterLayer?
我认为你可以创建一个CAShapeLayer 并为其lineDashPhase 设置动画
听起来您正在寻找“行军蚂蚁”效果——Apple 实际上在 CAShapeLayer 的 lineDashPhase 的文档中为您提供了示例代码 :)
啊！阶段正是我们所需要的：太棒了。而且我不知道您可以以这种方式“添加”动画 - 太棒了！谢谢男人！ :)
CAEmitterLayer - 太棒了！谁需要团结。很棒的提示，我对此一无所知。

标签： ios swift animation

【解决方案1】：

不想回答我自己的问题，这里是基于上述男士建议的复制和粘贴解决方案！

好样的！效果超赞……

@IBDesignable class DottedVertical: UIView {

    @IBInspectable var dotColor: UIColor = sfBlack6 { didSet {setup()} }

    override func layoutSubviews() { setup() }

    var s:CAShapeLayer? = nil

    func setup() {
        // say you want 8 dots, with perfect fenceposting:
        - calculate exactly as in the example in the question above -

        // marching ants...

        if (s == nil) {
            s = CAShapeLayer()
            self.layer.addSublayer(s!)
        }

        s!.strokeColor = dotColor.cgColor
        s!.fillColor = backgroundColor?.cgColor
        s!.lineWidth = width
        let ns = NSNumber(value: Double(itemLength))
        s!.lineDashPattern = [ns, ns]

        let path = CGMutablePath()
        path.addLines(between: [top, bottom])
        s!.path = path

        let anim = CABasicAnimation(keyPath: "lineDashPhase")
        anim.fromValue = 0
        anim.toValue = ns + ns
        anim.duration = 1.75 // seconds
        anim.repeatCount = Float.greatestFiniteMagnitude

        s!.add(anim, forKey: nil)

        self.layer.addSublayer(s!)
    }
}

【讨论】：