iOSで動画の上に画像を載せて回転アニメーションさせる方法

動画編集で画像を載せて、それを回転アニメーションさせてみる

動画編集について記事を記載していますが、編集動画に画像を載せてそれをアニメーションする例です。

//画像のアニメーションレイヤの作成
    func makeImageAnimation() -> CALayer {
        //背景画像
        let imageLayer: CALayer = CALayer()
        let sampleImage: UIImage = UIImage(named: "sample")!  // 画像は別途assetに用意

        imageLayer.bounds = CGRect(x: 0, y: 0, width: 300, height: 400)
        imageLayer.position = CGPoint(x: 1000, y: 1080-600)  // 左下基準なので、y座標は動画の最大サイズから引くべし
        imageLayer.contents = sampleImage.cgImage
        imageLayer.shadowOpacity = 0.3  // 画像に影を付けてみる
        imageLayer.shadowOffset = CGSize(width:6,height:-6)  // 画像に影を付けてみる。右下に
        imageLayer.contentsGravity = kCAGravityResizeAspect  // アスペクト比はキープで
        imageLayer.opacity = 1.0

        //回転アニメーションをさせてみる
        let animRot = CABasicAnimation(keyPath: "transform.rotation")
        animRot.beginTime = 1.0  // 動画開始1秒後に回転開始
        animRot.duration = 3.0  // 3秒間で10度から-10度まで回転
        animRot.repeatCount = 3  // 3回繰り返し
        animRot.autoreverses = true
        animRot.fromValue = CGFloat(Double.pi/180*10)
        animRot.toValue = CGFloat(Double.pi/180*(-10))
        animRot.isRemovedOnCompletion = false
        animRot.fillMode = kCAFillModeForwards
        imageLayer.add(animRot, forKey: nil)

        return imageLayer
    }

使う側のコード

        // 親レイヤを作成
        let parentLayer: CALayer = CALayer()
        parentLayer.frame = CGRect(x: 0, y: 0, width: videoSize.width, height: videoSize.height)

        //画像レイヤの作成
        let imageLayer = self.makeImageAnimation()
        parentLayer.addSublayer(imageLayer)
        }

使う側はこんな感じです。いろいろ省略してますが、動画編集について記事を参考に追加してみてください。

解説

イメージレイヤをframeでなくて、boundsとpositionを使って大きさと場所を指定しているのがポイント。
別にframeで指定してもできますが、回転する場合は中心軸がどこになるかで回転の見え方が変わってくるので、positionで指定することにより、画像の中心位置を明示的に指示することができます。
回転するときはこの位置を中心に回転することになります。

CABasicAnimationにtransform.rotationを指定することにより、回転アニメーションができるようになります。
このkeypathに変化させたいものを入れることで、アニメーションできるようになります。
ただし、animatableなプロパティしか変化しないので、swiftの仕様書を良く読みましょう。
positionやboundsはアニメーションできるのですが、frameはアニメーションできないので注意です。
場所やサイズを変更したい時は、frameではなく、positionとboundsを変化させましょう。

fromValueとtoValueに値を入れると、それが"transform.rotation"に入って変化していくことになります。transform.rotationに入る型を入れるようにしましょう。この値を段階的に変化してアニメーションしていきます。瞬間的に値を変えたい場合はCAKeyFrameAnimationを使ってやることになります。

isRemovedOnCompletion = false これは必ず設定しましょう。動画編集で使う場合はtrueだと何も表示されなくなるはずです。view上に直接リアルタイムで表示する場合はtrueで上手くいくことがあるのですが、動画編集というリアルタイムでない場合はfalseでないとアニメーションが残らないみたいです。

あとは、CALayerは左下が(0,0)基準ということです。一般的な座標系は左上が(0,0)となっているので、デザイン画像の座標をPhotoShopとかで調べたあと、y座標はCALyaerの縦幅から引くようにするとうまくいきます。
ついでに言うと、1080-600など数字の計算式を多く入れると、コンパイル時間がやたらかかることがあるので注意。特に2 * 1.5 + 10 など小数が入るようなものは型変換が内部で起こるので、あらかじめ計算しておくか、型変換が起こらないように注意しておく必要ありです。"too complex"とか言われてコンパイルに失敗することもあります。