NavigationBarにLottieを配置する
LottieのアニメーションをUINavigationBarのNavigationItemに配置して動かしたかったのでやってみました。
Lottieの素材はLottieFilesのものをお借りしました。
コード
class ViewController: UIViewController {
let navigationRightLottieView = AnimationView(name: "21568-star-effect")
let navigationLeftLottieView = AnimationView(name: "32173-jobeet")
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = .white
//右のボタン
navigationRightLottieView.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
navigationRightLottieView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(lottieNavigationRightItemTapped)))
navigationItem.setRightBarButton(UIBarButtonItem(customView: navigationRightLottieView), animated: true)
//左のボタン
navigationLeftLottieView.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
navigationLeftLottieView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(lottieNavigationLeftItemTapped)))
navigationItem.setLeftBarButton(UIBarButtonItem(customView: navigationLeftLottieView), animated: true)
}
@objc func lottieNavigationRightItemTapped(){
navigationRightLottieView.play()
}
@objc func lottieNavigationLeftItemTapped(){
navigationLeftLottieView.play()
}
}以下でAnimationViewのframeサイズを設定していますが、これがないと大きいサイズのLottieFileの場合NavigationBarの中央に表示されてしまいます。
navigationRightLottieView.frame = CGRect(x: 0, y: 0, width: 30, height: 30)参考文献
Set Lottie animation to UIBarbuttonitem in navigation bar swift [closed]
