2015年

4月

03日

Apple Watch Animationの作成

Apple Watch Animationの作成方法

Xcode 6.2 以上
https://developer.apple.com/xcode/downloads/
6.2からAppleWatch開発環境(watchkit)が入っています。

iOS8.2以上 (iPhone)
8.2にバージョンアップするとアプリ「Apple Watch」が追加されるのですぐわかります。

iPhoneアプリケーション プロジェクトを生成
xcode起動後、「Create a new Xcode project」を選択します。
次にiOS -> Application -> Single View Applicationを選択します。

 

プロダクト名をWatchKitAnimation01とします。

Watch Kit Appを追加
Watch Kitを追加します。File -> New -> Target を選択します。


AppleWatch ->WatchKit Appを選択します。


Include Glance、Include Notification Scene は、今回使わないのでチェックを外す。

Finishiをクリックします。

 

Activateをクリックします。

 

Animation
Interface.storyboardでUIを作成します。
いつものiOS開発と同じです。imageを貼り付けます。

位置調整はこのままです。

プログラムでの位置調整ができませんのでその点はご注意ください。

 

※Apple WatchにはGlance(ぱっと見る)、Notification(通知)という機能に関するものもありますが、これらについては今回は使用しません。

※今回は「Static Interface」や「Dynaminc Interface」の機能は使用しないので、特にこの部分に関しては特に追加や修正を行う必要はありません。

 

Animation用の画像を数枚用意します。

画像の名前は、XXX-0.png(英数半角)このように、0から始まるように番号を付けておきます。

InterfaceController.mの@interface(接続)にAnimation用の画像ファイル「WKInterfaceImage」インスタンスを作りstoryboardのImageと紐付けします。


@interface InterfaceController()


@property (weak, nonatomic) IBOutlet WKInterfaceImage *imgSpriteAnimation;

 

@end


アニメーション記述は(void)willActivateに記載している2行です。
Appleも普通に連番アニメーションで実現しているようです。

#import "InterfaceController.h"



@interface InterfaceController()


@property (weak, nonatomic) IBOutlet WKInterfaceImage *imgSpriteAnimation;

 

@end



@implementation InterfaceController


// 最初に呼び出されるメソッド

- (void)awakeWithContext:(id)context {

    [super awakeWithContext:context];


    // Configure interface objects here.

}


// ユーザーにUIが表示されたタイミングで呼び出されるメソッド

- (void)willActivate {

    // This method is called when watch view controller is about to be visible to user

    [super willActivate];

    

    // 花火画像

    [self.imgSpriteAnimation setImageNamed:@"img-"];

    // アニメーション

    [self.imgSpriteAnimation startAnimatingWithImagesInRange:NSMakeRange(0, 60)

                                                    duration:3.0

                                                 repeatCount:0];

    

    NSLog(@"%@ will activate", self);

}


// UIが非表示になったタイミングで呼び出されるメソッド

- (void)didDeactivate {

    // This method is called when watch view controller is no longer visible

    [super didDeactivate];

}


@end


起動する対象を「WatchKitAnimation01 WatchKit App」へ変更して実行(command+r)します。シミュレーターが起動します。6枚の画像が次々と表示されます。

 

GitHub WatchKitAnimation01

  

目 次