Как быстро добиться угловатого эффекта баттерфляй?

Мы стремимся достичь чего-то вроде «масляной панели», которая по сути представляет собой UIView, который меняет цвет от середины к краям. Примером является этот кодовый ключ.

How to do this in swift? 

кажется, твоя ссылка не работает

srus2017 10.08.2018 16:01

Пожалуйста, покажите, какие исследования вы провели, что уже пробовали, примеры кода и т. д. Прочтите Как спросить и минимальный воспроизводимый пример и обновите свой вопрос.

Ashley Mills 10.08.2018 16:40

Однако это была интересная проблема, которую нужно было решить. Как бы я ни ненавидел отвечать за такие вопросы ...

Ashley Mills 10.08.2018 17:25
8
3
120
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать два UIView, которые ограничены центром родительского элемента и имеют ограничения по ширине. Просто установите цвет фона первого представления и анимируйте его ограничение ширины от 0 до ширины родителя. Как только это будет сделано, вы можете вывести другой вид на передний план и анимировать его ширину от 0 до ширины родительского элемента, а затем перезапустить с исходного вида, чтобы цикл продолжался.

Ответ принят как подходящий

Вот решение для вас. По сути, есть подкласс ButterBarUIView, который имеет внутреннее представление и массив цветов.

  • Установите цвет фона [0]
  • Установите внутренний фон на цвет [1]
  • Установите внутреннюю ширину на 0
  • Анимируйте внутреннюю ширину до ширины ButterBar
  • Установите цвет фона на внутренний цвет фона
  • Установите внутренний фон на следующий цвет
  • Повторить

Код…

class ButterBar: UIView {

    private let innerView = UIView(frame: .zero)
    private var colours: [UIColor] = [.black, .white]
    private var colourIndex = 0
    private var isAnimating = false
    private lazy var widthConstraint: NSLayoutConstraint = {
        return innerView.widthAnchor.constraint(equalToConstant: 0)
    }()

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

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

    func configure(colours: [UIColor]) {
        guard colours.count > 1 else { return }
        self.colours = colours
    }

    func startAnimating() {
        colourIndex = 0
        isAnimating = true
        updateColours()
        animate()
    }

    func stopAnimating() {
        isAnimating = false
    }
}

private extension ButterBar {

    func configure() {
         innerView.translatesAutoresizingMaskIntoConstraints = false
        addSubview(innerView)
        topAnchor.constraint(equalTo: innerView.topAnchor).isActive = true
        bottomAnchor.constraint(equalTo: innerView.bottomAnchor).isActive = true
        centerXAnchor.constraint(equalTo: innerView.centerXAnchor).isActive = true
        widthConstraint.isActive = true
    }

    func updateColours() {
        backgroundColor = colours[colourIndex]
        colourIndex = (colourIndex + 1) % colours.count
        innerView.backgroundColor = colours[colourIndex]
    }

    func animate() {
        widthConstraint.constant = 0
        layoutIfNeeded()

        widthConstraint.constant = bounds.width
        UIView.animate(withDuration: 1, animations: {
            self.layoutIfNeeded()
        }) { _ in
            if self.isAnimating {
                self.updateColours()
                self.animate()
            }
        }
    }
}

И…

@IBOutlet weak var butterBar: ButterBar!

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    butterBar.configure(colours: [.red, .blue, .green, .yellow])
    butterBar.startAnimating()
}

Просто вопрос: почему вы решили иметь расширение, а не просто включать функции частного расширения в сам класс?

chrisl08 11.08.2018 08:57

Это личное предпочтение - я обычно помещаю все частные методы в частное расширение.

Ashley Mills 11.08.2018 17:23

Другие вопросы по теме