↓Skip to main content
  1. Posts/

UIButtonのimageをTransform,Rotateなどする方法

UIKit IOS

UIButtonの画像部分だけをTransformやRotateなどのアニメーションをさせようとすると、うまく行かないことがあります。 以下の記事で助けられたので、備忘録として書いておきます。

https://qiita.com/usagimaru/items/f83380a213c2ac155537

let button = UIButton()
button.imageView?.clipsToBounds = true
button.imageView?.contentMode = .center

これをしておくことで、画像が変なところへ飛んだり、画像が消えたりすることはなくなります。

あとは、好きな方法でアニメーションさせるだけです。

let animationOptions: UIView.AnimationOptions = .curveEaseIn
let keyframeAnimationOptions: UIView.KeyframeAnimationOptions =
    UIView.KeyframeAnimationOptions(rawValue: animationOptions.rawValue)

UIView.animateKeyframes(withDuration: 2,
                        delay: 0.0,
                        options: keyframeAnimationOptions) {
    // アニメーションの追加
    UIView.addKeyframe(withRelativeStartTime: 0.0,
                       relativeDuration: 0.5) {
        let transform = self.button.imageView?.transform
            .scaledBy(x: 2.0, y: 2.0)
            .rotated(by: 2.0)
        self.button.imageView?.transform = transform
    }

    UIView.addKeyframe(withRelativeStartTime: 0.5,
                       relativeDuration: 0.5) {
        let transform = self.button.imageView?.transform
            .scaledBy(x: 0.5, y: 0.5)
            .rotated(by: -2.0)
        self.button.imageView?.transform = transform
    }
} completion: { completed in
    // アニメーション完了後の処理
}

こんな感じ。Optionsの適用方法があっているか不安があるものの、とりあえずは動いている。