[swift] Swift Core Animation의 마우스 클릭 애니메이션

07 Dec 2023

swift

Swift Core Animation은 iOS 또는 macOS 앱에서 애니메이션을 만들고 제어하는 강력한 도구입니다. 이 기능을 사용하여 마우스 클릭 애니메이션을 구현해볼 것입니다. 이 애니메이션은 사용자가 버튼이나 다른 UI 요소를 클릭했을 때 발생하며, 클릭한 위치에서 파동 모양의 효과를 만들어 줍니다.

필수 요소

이 마우스 클릭 애니메이션을 구현하기 위해 다음 요소가 필요합니다.

1. CALayer

Core Animation은 CALayer 객체를 사용하여 애니메이션을 구현합니다. CALayer는 렌더링된 비트맵 이미지나 그래픽 엔티티를 나타냅니다. 우리는 이를 사용하여 마우스 클릭 지점에 파동 효과를 만들 것입니다.

2. CAShapeLayer

CAShapeLayer 클래스는 CALayer의 서브클래스로, 도형을 그리기 위해 효과적으로 사용됩니다. 우리는 이 클래스를 사용하여 원 모양의 파동 애니메이션을 만들 것입니다.

3. CABasicAnimation

CABasicAnimation은 CALayer의 속성을 애니메이션화하기 위해 사용되는 클래스입니다. 우리는 이 클래스를 사용하여 파동 애니메이션을 적용할 것입니다.

구현 단계

다음은 마우스 클릭 애니메이션을 구현하기 위한 단계입니다.

1. CALayer 생성

let rippleLayer = CALayer()
rippleLayer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
rippleLayer.position = CGPoint(x: button.centerX, y: button.centerY)
rippleLayer.cornerRadius = 50
rippleLayer.backgroundColor = UIColor.white.cgColor

2. CAShapeLayer 생성

let rippleShapeLayer = CAShapeLayer()
rippleShapeLayer.bounds = rippleLayer.bounds
rippleShapeLayer.path = UIBezierPath(ovalIn: rippleLayer.bounds).cgPath
rippleShapeLayer.fillColor = UIColor.clear.cgColor
rippleShapeLayer.strokeColor = UIColor.blue.cgColor
rippleShapeLayer.lineWidth = 2
rippleShapeLayer.position = CGPoint(x: 0, y: 0)
rippleShapeLayer.opacity = 0
rippleLayer.addSublayer(rippleShapeLayer)

3. 애니메이션 생성

let opacityAnimation = CABasicAnimation(keyPath: "opacity")
opacityAnimation.fromValue = 0.8
opacityAnimation.toValue = 0.0

let scaleAnimation = CABasicAnimation(keyPath: "transform.scale")
scaleAnimation.fromValue = 0.0
scaleAnimation.toValue = 1.0

let animationGroup = CAAnimationGroup()
animationGroup.animations = [opacityAnimation, scaleAnimation]
animationGroup.duration = 0.5
animationGroup.timingFunction = CAMediaTimingFunction(name: .easeOut)
animationGroup.fillMode = .forwards
animationGroup.isRemovedOnCompletion = false

rippleShapeLayer.add(animationGroup, forKey: "rippleAnimation")

4. 애니메이션 실행

view.layer.addSublayer(rippleLayer)

결론

이제 마우스 클릭 애니메이션을 구현하기 위해 Swift Core Animation을 사용할 수 있습니다. CALayer, CAShapeLayer 및 CABasicAnimation을 통해 파동 모양의 효과를 만들어 사용자가 UI 요소를 클릭했을 때 시각적인 피드백을 제공할 수 있습니다. 이 기능을 사용하여 앱의 사용자 경험을 개선할 수 있습니다.