Início / coding / Perguntas / 79597127
Accepted
sudoExclamationExclamation
Asked: 2025-04-29 02:53:20 +0800 CST

Como fazer com que a borda de gradiente móvel do iOS continue se movendo em uma direção para sempre sem redefinir para o local original?

  • 772

O código abaixo mostra o problema:

import UIKit
import SnapKit

class ViewController: UIViewController {

    let animatedBorderView = AnimatedGradientBorderView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        animatedBorderView.layer.cornerRadius = 20
        animatedBorderView.clipsToBounds = true
        view.addSubview(animatedBorderView)
        animatedBorderView.snp.makeConstraints { make in
            make.center.equalToSuperview()
            make.size.equalTo(400)
        }
    }
}

class AnimatedGradientBorderView: UIView {
    
    private let gradientLayer = CAGradientLayer()
    private let shapeLayer = CAShapeLayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayers()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayers()
    }
    
    private func setupLayers() {
        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
        gradientLayer.endPoint = CGPoint(x: 1, y: 1)
        gradientLayer.colors = [
            UIColor.systemRed.cgColor,
            UIColor.systemYellow.cgColor,
            UIColor.systemGreen.cgColor,
        ]
        gradientLayer.locations = [0, 0.3, 0.6, 1]
        layer.addSublayer(gradientLayer)
        
        shapeLayer.lineWidth = 5
        shapeLayer.fillColor = nil
        shapeLayer.strokeColor = UIColor.black.cgColor
        gradientLayer.mask = shapeLayer
        
        startAnimating()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.frame = bounds
        let path = UIBezierPath(roundedRect: bounds.insetBy(dx: shapeLayer.lineWidth / 2, dy: shapeLayer.lineWidth / 2), cornerRadius: layer.cornerRadius)
        shapeLayer.path = path.cgPath
    }
    
    private func startAnimating() {
        let animation = CABasicAnimation(keyPath: "locations")
        animation.fromValue = [0, 0.2, 0.4, 0.6]
        animation.toValue = [0.4, 0.6, 0.8, 1]
        animation.duration = 2.0
        animation.repeatCount = .infinity
        animation.autoreverses = false
        gradientLayer.add(animation, forKey: "animateLocations")
    }
}

Isso produz a animação abaixo:

insira a descrição da imagem aqui

Observe que defini autoreversescomo falso porque não quero que ele reverta ao repetir para infinity. No entanto, como consequência disso, o problema é que, após o duration, ele reinicia no original location. Isso causa um salto repentino na borda do gradiente móvel.

Como posso fazer com que ele continue se movendo para sempre na mesma direção sem precisar reiniciar?

1 respostas

  1. Best Answer

    Para obter um efeito de borda rotativa, mudei para um gradiente cônico (.conic), que irradia cores naturalmente em torno de um ponto central. Em vez de deslocar as cores manualmente, toda a gradientLayer é rotacionada no eixo z. (Usando a animação de borda de gradiente estilo Snake no iOS como referência)

    Experimente isto:

    
import UIKit
import SnapKit

class ViewController: UIViewController {

    let animatedBorderView = AnimatedGradientBorderView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        animatedBorderView.colors = [.systemGreen,.systemYellow,.systemRed]
        animatedBorderView.layer.cornerRadius = 20
        animatedBorderView.clipsToBounds = true
        view.addSubview(animatedBorderView)
        animatedBorderView.snp.makeConstraints { make in
            make.horizontalEdges.equalTo(view.safeAreaLayoutGuide).inset(20)
            make.centerY.equalToSuperview()
            make.height.equalTo(50)
        }
    }
}

class AnimatedGradientBorderView: UIView {

    private let gradientLayer = CAGradientLayer()
    private let maskShape = CAShapeLayer()
    private let lineWidth = 3.0
    private var _colors = [UIColor]()
    var colors: [UIColor] {
        get {
            return _colors
        }
        set(newColors) {
            _colors = newColors
            var colorsToUse = _colors
            colorsToUse.append(contentsOf: colorsToUse.reversed().dropFirst())
            gradientLayer.colors = colorsToUse.map({$0.cgColor})
            let n = colorsToUse.count
            let locations = (0..<n).map { i in
                NSNumber(value: Double(i) / Double(n - 1))
            }
            gradientLayer.locations = locations
        }
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayers()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayers()
    }

    private func setupLayers() {
        gradientLayer.type = .conic
        gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)

        layer.addSublayer(gradientLayer)

        maskShape.lineWidth = lineWidth
        maskShape.fillColor = nil
        maskShape.strokeColor = UIColor.white.cgColor
        layer.mask = maskShape

        let rotation = CABasicAnimation(keyPath: "transform.rotation.z")
        rotation.fromValue = 0
        rotation.toValue = CGFloat.pi * 2
        rotation.duration = 4.0
        rotation.repeatCount = .infinity
        gradientLayer.add(rotation, forKey: "rotateGradient")
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        
        maskShape.frame = bounds
        let insetRect = bounds.insetBy(dx: lineWidth/2, dy: lineWidth/2)
        maskShape.path = UIBezierPath(
            roundedRect: insetRect,
            cornerRadius: layer.cornerRadius
        ).cgPath

        gradientLayer.bounds = CGRect(
            x: 0, y: 0,
            width: diagonalLength * 2,
            height: diagonalLength * 2
        )
        gradientLayer.position = CGPoint(x: bounds.midX, y: bounds.midY)
    }
}

extension UIView {
    var diagonalLength: CGFloat {
        return sqrt(bounds.width * bounds.width + bounds.height * bounds.height)
    }
}
    • 2

relate perguntas