Swift/UIKit 괜찮은 버튼 애니메이션

매번~!!
UX 디자이너 욱입니다!
최근에도 Swift를 사용하여 UI를 설치하고 있습니다.
이번에 소개한 것은 iOS의 UIKit를 사용하여 애니메이션을 실현하는 것이다.

일단 완성도.

UIKit의 표준 애니메이션에 준비된 스프링 효과를 사용하면 기분이 좋습니다.
매개변수를 살짝 만지작거려서 괜찮은 게 있어서 노트로 공개합니다.
겸사겸사 GiitHub에 각 항목을 공개했다.
코드 작성이 번거로운 사람이라면 여기서 직접 Xcode 파일을 열고 시뮬레이터를 통해 확인할 수 있다.
https://github.com/wecken/UIButtonSpringEffect

코드

엑스코드 12로 만들었어요.
초보자는 iOS App 템플릿을 사용하여 파일의 ViewController.swift에서 아래 코드를 복사하면 됩니다.
중·고급자는 맛있는 곳을 마음대로 복제해서 사용하세요.

//
//  ViewController.swift
//  ButtonSpringAnimation

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(button)
        
        button.layer.cornerRadius = 60 / 2
        button.layer.cornerCurve = .continuous
        button.backgroundColor = UIColor.blue
        button.setTitle("押してみ", for: .normal)
        
        let constraints = [
            button.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -80),
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            button.widthAnchor.constraint(equalToConstant: 200),
            button.heightAnchor.constraint(equalToConstant: 60)
        ]
        NSLayoutConstraint.activate(constraints)
        button.addTarget(self, action: #selector(self.buttonTapped(sender:)), for: .touchUpInside)
    }
    
    @objc func buttonTapped(sender:UIButton) {
        animateView(sender)
    }
    
    func animateView(_ viewToAnimate:UIView) {
        UIView.animate(withDuration: 0.2, delay: 0, options: .curveEaseIn, animations: {
            viewToAnimate.transform = CGAffineTransform(scaleX: 1.08, y: 1.08)
        }) { (_) in
            UIView.animate(withDuration: 0.4, delay: 0, usingSpringWithDamping: 0.3, initialSpringVelocity: 10, options: .curveEaseOut, animations: {
                viewToAnimate.transform = .identity
                
            }, completion: nil)
        }
    }


}

해설

앞쪽은 필기이니 읽지 않아도 문제없다.

    func animateView(_ viewToAnimate:UIView) {
        UIView.animate(withDuration: 0.2, delay: 0, options: .curveEaseIn, animations: {
            viewToAnimate.transform = CGAffineTransform(scaleX: 1.08, y: 1.08)
        }) { (_) in
            UIView.animate(withDuration: 0.4, delay: 0, usingSpringWithDamping: 0.3, initialSpringVelocity: 10, options: .curveEaseOut, animations: {
                viewToAnimate.transform = .identity
                
            }, completion: nil)
        }

애니메이션은 이 부분입니다.
UIView는 UIKit에서 가장 간단한 애니메이션 API입니다.animate를 사용하고 있습니다.
API를 사용하면 단순화할 수 있습니다.
단점은 활성 매개변수에 따라 애니메이션할 수 없다는 것입니다.
예를 들어, UILAbel 메서드 "attributedText"같은 경우에는 애니메이션을 사용할 수 없습니다.
예: 레이블의 색상을 천천히 변경합니다.글씨체의 크기가 점차 바뀌다.베이스라인을 이동하여 이동된 애니메이션을 만듭니다.기다리면 안돼.이 경우 설치는 더 복잡해지지만 Core Animation 관련 API를 사용하여 수행됩니다.
또 한 가지 결점이 있다.복잡한 애니메이션을 설치하려고 노력하면 코드가 점점 끼워져 읽기 어렵고 연출도 미묘해진다.

UIView.animate(withDuration: 0.2, delay: 0, options: .curveEaseIn, animations: {
...
} ...

이 부분은 애니메이션의 앞부분에서 발생한 내용을 썼다.
withDruration(실행시간) 0.2, delay(지연) 0, option curveEaseIn(애니메이션 전반부 느려짐, 후반부 빨라짐)설정 중
animation{}에 변경할 인자를 기술했습니다.

viewToAnimate.transform = CGAffineTransform(scaleX: 1.08, y: 1.08)

이번에는 function의 매개 변수로 받은 UIView(=view ToAnimate)의 비율을 종횡 1.08배로 설정했다.CGAffine Transform이라는CoreGraphic의 API가 있는데, 이것은 '모방변환' 이라는Grace의 API를 처리한 것이다.나는 모방변환의 뜻을 모르겠지만 도형을 좋은 느낌으로 만들 수 있다고 한다.
느린 애니메이션을 실행하면 버튼을 누르면 버튼의 크기가 약간 커진다.
그것은 이 코드의 부분이다.

이후에 실행된 코드는 다음과 같다.

UIView.animate(withDuration: 0.4, delay: 0, usingSpringWithDamping: 0.3, initialSpringVelocity: 10, options: .curveEaseOut, animations: {
	viewToAnimate.transform = .identity

}, completion: nil)

마찬가지로 UIView입니다.나는 애니메이트라고 하는데, 이번에 너에게 맡긴 매개 변수는 미묘하게 다르다.
이것은 용수철(용수철 효과)을 실현하는 부분이다.
withDruration과 delay의 뜻은 아까와 같지만 singSpring WithDamping과 initial Spring Velocity를 첨가하면'poyon'을 실현할 수 있다.
usingSpring WithDamping은 스프링 같은 저항감으로 1이 가장 크고 0은 저항력이 없다.따라서 1로 바꾸면 저항이 심해 상투를 전혀 틀지 않는다.반대로 0을 말하면 너무 저항력이 없어요. 초귀속적이에요.나는 많은 것을 조정하여 이 수치를 안정시켰다.
initial SpringVelocity는 스프링의 초속(강도)입니다.
문서 작성 기준
The initial spring velocity. For smooth start to the animation, match this value to the view’s velocity as it was prior to attachment.
A value of 1 corresponds to the total animation distance traversed in one second. For example, if the total animation distance is 200 points and you want the start of the animation to match a view velocity of 100 pt/s, use a value of 0.5.
어렵기 때문에 신경 쓰는 사람이 직접 번역하세요.
에서 애니메이션으로 변경된 값이 여기에 있습니다.
방금 avinetransform으로 확대된view.identity를 하고 있습니다.

이것뿐이다

앞으로도 UI의 전면 홀과 가까운 스타일의 실크 관련 내용을 발표할 예정이다.
잘 부탁드립니다!