ios - 如何快速动画边框闪烁？

Question

我需要帮助制作一个通过视图边界运行渐变的动画，如下图所示：

任何想法如何在 Swift 中实现它？

谢谢！

标签： iosswiftanimationuikit

Answer 1

这是我的解决方案：

• 为基础视图使用动画渐变层
• 添加一个覆盖的白色视图（带插图）以覆盖渐变的中心
• 正如MadProgrammer 所说，您可以设置渐变的startPoint和endPoint一个角度，让它绕过角落

class BorderShimmerView : UIView {
    
    /// allow gradient layer to resize automatically
    override class var layerClass: AnyClass { return CAGradientLayer.self }
    
    /// boilerplate UIView initializers
    init() {
        super.init(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
        commonInit()
    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }
    
    /// set up everything
    func commonInit() {

        let overlayView = UIView() /// add a view overlaid on the gradient view
        overlayView.backgroundColor = .white
        overlayView.frame = bounds.insetBy(dx: 3, dy: 3) /// appears like a border
        overlayView.autoresizingMask = [.flexibleWidth, .flexibleHeight] /// allow resizing
        self.addSubview(overlayView)
        
        let gradientLayer = self.layer as! CAGradientLayer
        gradientLayer.locations = [0, 0.45, 0.55, 1] /// adjust this to change the colors' spacing
        gradientLayer.colors = [
            UIColor.white.cgColor,
            UIColor.yellow.cgColor, /// yellow + orange for gold effect
            UIColor.orange.cgColor,
            UIColor.white.cgColor
        ]
        
        let startPointAnimation = CABasicAnimation(keyPath: #keyPath(CAGradientLayer.startPoint))
        startPointAnimation.fromValue = CGPoint(x: 2, y: -1) /// extreme top right
        startPointAnimation.toValue = CGPoint(x: 0, y: 1) /// bottom left
        
        let endPointAnimation = CABasicAnimation(keyPath: #keyPath(CAGradientLayer.endPoint))
        endPointAnimation.fromValue = CGPoint(x: 1, y: 0) /// top right
        endPointAnimation.toValue = CGPoint(x: -1, y: 2) /// extreme bottom left
        
        let animationGroup = CAAnimationGroup() /// group animations together
        animationGroup.animations = [startPointAnimation, endPointAnimation]
        animationGroup.duration = 2
        animationGroup.repeatCount = .infinity /// repeat animation infinitely
        gradientLayer.add(animationGroup, forKey: nil)
        
    }
}

用法：

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let shimmerView = BorderShimmerView()
        shimmerView.frame = CGRect(x: 50, y: 50, width: 300, height: 300)
        view.addSubview(shimmerView)
    }
}

结果：