3D 터치 버튼 동작을 시뮬레이션한 HapticButon 라이브러리 (MIT 라이센스)

개시하다

3D 터치로 버튼을 눌렀을 때 튀어나온 애니메이션을 시뮬레이션해 본 Haptic Buton.애니메이션은 다음과 같은 느낌을 준다.

※ 인용github/HapticButton

환경 확인

다음 환경을 사용합니다.

macOS Sierra Version 10.12.5

Xcode Version 8.3.3

iPhone7 iOS10.3.2

iOS/Swift Version에 대한 라이센스

라이센스

MIT

해당 iOS

iOS 10.0 and Swift 3.2 are required.

가능한 일

다음과 같은 일을 할 수 있다.

탭 또는 이미지를 선택하여 버튼 생성.label(text: String) 또는 .image(image: UIImage)

라이트블루뷰와 다크블루뷰 증가

터치의 힘이 일정치를 초과할 때 실행하는 방법을 지정합니다

방법의 정의 방법은 다음과 같은 3가지가 있다. (여러 방법을 정의한 상황에서 임의로 실행한다. 실행의 우선순위는delegate>closure>touchUpInside 동작이다)

delegate

HapticButon Delegate를 사용하여pressed(sender:HapticButton) 방법을 작성하는 방법

closure

.onPress 속성에서closure

정의

addTaget

addTarget로 HapticButon에서touchUpInside로 정의하는 동작 방법

실행 방법의 강도를 지정합니다 (기본값은 0.250.0<=threshold<=1.0)

구체적 예

label 지정blur 없음delegate 정의 방법 사용하기

class ViewController: UIViewController {
    @IBOutlet weak var button: HapticButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        button.mode = .label(text: "Hello! 👋")
        button.delegate = self
    }

extension ViewController: HapticButtonDelegate {
    func pressed(sender: HapticButton) {
        print("White button pressed.")
    }
}

이미지 지정lightBlur_addTaget을 통한 메서드 정의

class ViewController: UIViewController {
    @IBOutlet weak var blurButton: HapticButton!

    override func viewDidLoad() {
        blurButton.mode = .image(image: #imageLiteral(resourceName: "imageName"))
        blurButton.addBlurView(style: .light)
        blurButton.addTarget(self, action: #selector(blurButtonPressed(_:)), for: .touchUpInside)
    }

    func blurButtonPressed(_ sender: HapticButton) {
        print("Light blur button pressed.")
    }
}

label 지정darkBlur_closure를 통해 정의하는 방법

class ViewController: UIViewController {
    @IBOutlet weak var darkBlurButton: HapticButton!

    override func viewDidLoad() {
        darkBlurButton.mode = .label(text: "Hello Blur!")
        darkBlurButton.textLabel.textColor = .white
        darkBlurButton.addBlurView(style: .dark)
        darkBlurButton.onPressed = {
            print("Dark blur button pressed.")
        }
    }
}

보태다

UIImpactFeedbackGenerator를 사용한 피드백이 실현됐기 때문에 아이폰7, 아이폰7 플러스에서 눌렀을 때의 피드백을 느낄 수 있다.

단추의 확대/축소는 touchesMoved(_ touches: Set<UITouch>, with event: UIEvent)에서 계산touch.force / touch.maximumPossibleForce으로 전환된 scale로 CGAffineTransform로 진행한다.

감상

버튼에 3D 터치 눌렀을 때의 행동을 아주 간단하게 덧붙여서 재미있게 봤습니다.다만, 버튼을 눌렀을 때의 행동은 자연스럽게 하기는 어려울 수 있다.

참고 문헌

BalestraPatrick/HapticButton