この投稿はWatchKit Advent Calendar 2014の13日目の記事です。

WKInterfaceImageとは

WatchKitで画像を表示するためのクラスです。
単に画像を表示するだけでなく、アニメーションさせるための仕組みもあります。

静的な画像を使用したアニメーション

静的な画像を用いてパラパラ漫画のようにアニメーションさせる場合は、Watch AppのStoryboardとアセットカタログだけで実装できます。

動作イメージ

moonanime
※シミュレータではもうちょっとぬるぬる動きます。

アセットカタログ

アニメーションさせたい画像を下図のように、<画像名><連番(0はじまり)>のImage Setを作成します。

xcassets

※Xode6.1のスクリーンショットです。

Storyboard

WKInterfaceImageをInterface Controllerに配置し、プロパティに以下のように設定します。

Image:<画像名>
※連番は含めないので注意
Animate:Yes
Duration:1コマを表示する時間(秒)
Animate on Load:チェック

これだけでパラパラ漫画のようにアニメーションできます。

再生制御

WKInterfaceImageの以下のメソッドを使って、再生の制御をすることもできます。

動的な画像を使用したアニメーション

WatchKit Extension側でUIImageを動的に生成して、WKInterfaceImageでApple Watchに表示することもできます。

今回は1秒ごとにランダムな色で塗りつぶされたUIImageを生成し、Apple Watchで表示してみました。

動作イメージ

dynamicanime

UIImage作成処理

func generateImage() -> UIImage {
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(100, 100), false, 0)
    let context = UIGraphicsGetCurrentContext()
    
    func colorValue() -> CGFloat{
        return CGFloat(arc4random_uniform(255)) / 255.0
    }
    
    CGContextSetRGBFillColor(context, colorValue(), colorValue(), colorValue(), 1)
    
    CGContextFillRect(context, CGRectMake(0, 0, 100, 100))
    
    let generatedImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    
    return generatedImage
}

タイマーの設定

var timer = NSTimer.scheduledTimerWithTimeInterval(1, target: self, selector: "updateImage", userInfo: nil, repeats: true)

func update() {
    // dynamicImageはWatch AppにあるWKInterfaceImageをOutletで参照したもの。
    dynamicImage.setImage(generateImage())
}

これだけ!

まとめ

現状のWatchKitでは、ダイナミックに画面を更新するには、WKInterfaceImageを使う必要がありそうです。
動的にUIImageを作る方法をしっかりとマスターしておいたほうが良いですね。

参考

宣伝

Swiftでカスタムキーボードアプリ作りました。買ってね!
特殊文字キーボード