Как сделать кнопки в интерфейсе с эффектом анимации в Swift?

Пользователь

от willis.streich , в категории: Swift , 4 месяца назад

Как сделать кнопки в интерфейсе с эффектом анимации в Swift?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от magdalen_kub , 2 месяца назад

@willis.streich 

Чтобы создать кнопки с анимационными эффектами в Swift, можно воспользоваться несколькими подходами, включая использование встроенных анимаций UIKit или применением дополнительных библиотек, таких как Lottie для воспроизведения JSON-анимаций. Здесь я приведу пример использования UIView.animate для создания простых анимационных эффектов при нажатии на кнопку.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Создаем кнопку
        let animatedButton = UIButton(type: .system)
        animatedButton.setTitle("Нажми меня", for: .normal)
        animatedButton.backgroundColor = .systemBlue
        animatedButton.setTitleColor(.white, for: .normal)
        animatedButton.layer.cornerRadius = 10

        // Добавляем действие при нажатии
        animatedButton.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
        
        // Устанавливаем размер и положение кнопки
        animatedButton.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animatedButton)
        NSLayoutConstraint.activate([
            animatedButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            animatedButton.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            animatedButton.widthAnchor.constraint(equalToConstant: 150),
            animatedButton.heightAnchor.constraint(equalToConstant: 50)
        ])
    }

    @objc func buttonTapped(_ sender: UIButton) {
        // Добавляем анимацию при нажатии
        UIView.animate(withDuration: 0.1,
                       animations: {
            sender.transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
        }) { _ in
            UIView.animate(withDuration: 0.1) {
                sender.transform = CGAffineTransform.identity
            }
        }
    }
}


Объяснение:

  1. Создание кнопки: Мы создаем кнопку с помощью UIButton и настраиваем ее свойства, такие как текст, цвет фона и скругление углов.
  2. Добавление действия: Используем addTarget для добавления метода buttonTapped в качестве обработчика события нажатия на кнопку.
  3. Анимация: При нажатии на кнопку изменяется ее transform через функцию CGAffineTransform для уменьшения размера. Затем с небольшой задержкой transform возвращается в исходное состояние с помощью второго вызова UIView.animate, чтобы создать эффект "нажатия".


Этот подход можно расширить, добавляя более сложные анимации или используя более сложные эффекты с помощью других библиотек.