CoreImageのTransitionエフェクト

image1からimage2に画像を遷移するエフェクト。

次の例はSwipeエフェクトだが、
フィルターにCIImageに変換したimage1とimage2を設定
諸パラメータを設定するのはCIFilterと基本的に一緒。
その後、何秒で切り替えるかのdurationを設定して開始したら自動で…と思いきや、それがない。
なんとびっくり、自分でタイマーを使って切り替わり具合をその都度フィルターに設定し、表示しなければいけないようだ。

切り替え度合いがどれくらいかを示すパラメータがkCIInputTimeKeyで設定している値。
値は0〜1の範囲で、0が遷移開始前、1が遷移完了後。
（ただし、1.2くらいにしないと遷移が完了しないことがあるようなので、はっきりとわかってない）
この値をいじることで、エフェクトの途中から開始したり、エフェクトの方向を逆にしたりすることができる。その点は自動で処理されるよりは自由度がある。めんどくさいけど。
なめらかに遷移するなら0.01ずつ、おおざっぱに遷移するなら0.1ずつとか、タイマーで呼ぶメソッド中で値を増やしてやればいい。


//フィルタークラスはインスタンス変数として

let myFilter = CIFilter(name: "CISwipeTransition")

var count = 0.0 //遷移のかかり具合用

//以下はどっか適当なところに書く

let CIImage1 = CIImage(image: UIImage(named: "sample1")!)

let CIImage2 = CIImage(image: UIImage(named: "sample2")!)

        

myFilter!.setValue(10,  forKey: kCIInputWidthKey) //切り替わる部分の幅

myFilter!.setValue(0.6, forKey: kCIInputAngleKey) //角度

myFilter!.setValue(0.0, forKey: kCIInputTimeKey) //遷移のかかり具合開始値

myFilter!.setValue(CIImage1, forKey: kCIInputImageKey) //開始前画像

myFilter!.setValue(CIImage2, forKey: kCIInputTargetImageKey) //完了後画像

        

//Timerの設定

Timer.scheduledTimer(timeInterval: 0.01,

                     target: self,

                     selector: #selector(ViewController.update(timer:)),

                     userInfo: nil,

                     repeats: true)

        

//フィルター加工後の画像を得てImageViewに表示

let outputImage = UIImage(ciImage: myFilter!.outputImage!)

myImageView.image = outputImage

//こっから遷移の更新

func update(timer: Timer) { //引数が使われてないね？

        

count += 0.01 //遷移のかかり具合

myTime = NSNumber(value: count)

        

//タイマー呼ばれるごとにfilterに値を設定

myFilter!.setValue(myTime, forKey: kCIInputTimeKey)

        

// 現時点でのフィルター加工後の画像を得てImageViewに表示

let outputImage = UIImage(ciImage: myFilter!.outputImage!)

myImageView.image = outputImage

//ここでsetNeedsDisplayを呼んでないことに注目（呼んでも誤動作はしない）

}

パラメータ

• inputImage
• CIImage
• 遷移元の画像
• inputTargetImage
• CIImage
• 遷移先の画像
• inputExtent
• CIVector
• デフォルト値は0,0,300,300
• inputColor
• CIColor
• 不透明色？
• CIColor().redとか指定してやったらエラーで落ちた。なぜだ？
• inputTime
• NSNumber
• 遷移の経過具合を指定。タイマーなどでその都度変更してやる必要がある。
• 設定値は0〜1.0の範囲と言われるのだが、1.8とかまで指定しないと遷移が完了しないことがあり、不明。
• 値を変更してやれば途中から始めたり、逆方向に遷移することもできる。
• inputAngle
• NSNumber
• 遷移の方向を示す角度
• デフォルトの0で水平
• 設定値の範囲はよくわかんない
• inputWidth
• NSNumber
• 遷移部分の幅。小さければキリっと切り替わるし、大きければぼんやり切り替わる
• デフォルト値は300
• inputOpacity
• NSNumber
• 切り替わり部分の不透明値
• 設定値の範囲は0〜1.0

CATransitionで遷移？

アップルの資料には、UIImageView二つにそれぞれFilterをaddして、CATransitionを使った切り替え方法（こちらはdurationとかが設定できる）も載ってるが、うまくいかなかったので、また機会があったら調べる。

参考資料

• スワイプトランジションフィルタ処理