一系列点的淡入/淡出动画答案

【问题标题】：Fade in/out animation for a series of dots一系列点的淡入/淡出动画
【发布时间】：2017-07-12 23:43:00
【问题描述】：

我有一个上传 UIButton 并且我正在尝试实现一个动画，其中我有一组单独的点，它们在按钮下方水平排列，并且最左边的点淡入/淡出，然后在下一个点它淡入/淡出，一直到最右边的点，然后从左边重新开始循环。我可以对一个点进行此操作，但是对多个点执行此操作的最有效方法是什么？

func dotAnimation(){
    let xCoord = self.recButt.frame.origin.x + 25
    let yCoord = self.recButt.frame.origin.y + 5
    let radius = 3

    let dotPath = UIBezierPath(ovalIn: CGRect(x: Int(xCoord), y: Int(yCoord), width: radius, height: radius))
    let layer = CAShapeLayer()
    layer.path = dotPath.cgPath
    layer.strokeColor = UIColor(red: 95.00/255, green: 106.00/255, blue: 255/255, alpha: 1.00).cgColor
    self.view.layer.addSublayer(layer)

    let animation : CABasicAnimation = CABasicAnimation(keyPath: "opacity");
    animation.autoreverses = true
    animation.fromValue = 0
    animation.toValue = 1
    animation.duration = 2.0
    layer.add(animation, forKey: nil)
}

【问题讨论】：

标签： ios swift3 uiviewanimation cabasicanimation

【解决方案1】：

您正在描述 CAReplicatorLayer。这是一个使用条而不是点来完成您所追求的事情的方法：

这是代码。注意只有一个红色条层；复制成五个，以及偏移淡入淡出动画，由包含的复制器层处理：

    let lay = CAReplicatorLayer()
    lay.frame = CGRect(0,0,100,20)
    let bar = CALayer()
    bar.frame = CGRect(0,0,10,20)
    bar.backgroundColor = UIColor.red.cgColor
    lay.addSublayer(bar)
    lay.instanceCount = 5
    lay.instanceTransform = CATransform3DMakeTranslation(20, 0, 0)
    let anim = CABasicAnimation(keyPath: #keyPath(CALayer.opacity))
    anim.fromValue = 1.0
    anim.toValue = 0.2
    anim.duration = 1
    anim.repeatCount = .infinity
    bar.add(anim, forKey: nil)
    lay.instanceDelay = anim.duration / Double(lay.instanceCount)
    // and now just add `lay` to the interface

【讨论】：

这看起来会做到。只需阅读苹果文档。所以我们在这个例子中有两个层，lay 和 sublayer bar，lay 被复制了 5 次？
这实际上就是您想要做的。当然，我的尺寸、形状、颜色、时间等，都是你可以完全改变自己目的的参数。
好吧，几乎可以正常工作了。我怎样才能让它一次只出现一个点，所以当一个点开始淡入时，左边的那个已经淡出。我认为这与instanceDelay?
是的，应该是处理延迟和动画时长的问题。但就我个人而言，我一直在微调方面遇到一些麻烦。 :) 我通常会在“足够好”时停止调整。
@matt 可以为每个复制设置不同的延迟，基本上我想要的是 1 2 3 然后 3, 2,1 ，就像 show 1 then 1 and 2 then 1, 2 and 3 then 1 and 2那么 1. 是否可以使用 CAReplicatorLayer？

【解决方案2】：

这是在任何UILabel 中为三个点设置动画的另一个版本

private var displayLink: CADisplayLink?

private var loadingLabeltext: String = ""
private var loadingLabel: UILabel? = {
    let label = UILabel()
    label.textColor = UIColor.appRed
    label.textAlignment = .center
    label.font = UIFont.init(name: "CirceRounded-Bold", size: 15)
    label.minimumScaleFactor = 0.6
    return label
}()

override func viewDidLoad(_ animated: Bool) {
    super.viewDidLoad(animated)
    
    view.addSubview(loadingLabel!)
    loadingLabel!.text = "Loading ..."
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    
    animateLabelDots(label: loadingLabel!)
}

private func animateLabelDots(label: UILabel) {
    guard var text = label.text else { return }
    text = String(text.dropLast(3))
    loadingLabeltext = text
    displayLink = CADisplayLink(target: self, selector: #selector(showHideDots))
    displayLink?.add(to: .main, forMode: .common)
    displayLink?.preferredFramesPerSecond = 4
}

@objc private func showHideDots() {
    if !loadingLabeltext.contains("...") {
        loadingLabeltext = loadingLabeltext.appending(".")
    } else {
        loadingLabeltext = "Loading "
    }
    
    loadingLabel!.text = loadingLabeltext
}

当您想停止它时，只需像这样使显示链接无效并取消初始化：

private func hideLoadingSpinner() {
    displayLink?.invalidate()
    displayLink = nil
    
    UIView.animate(withDuration: 0.5, animations: {
        loadingLabel?.text = "Finished!"
        loadingLabel?.alpha = 0
    })
}

【讨论】：