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を選択します。

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

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」の機能は使用しないので、特にこの部分に関しては特に追加や修正を行う必要はありません。

Imageの下に、PlayボタンとStopボタンを並べたボタンを作成しますのでGroupを貼り付けします。

Groupの上にボタンを貼り付けします。

貼り付けたボタンを半分にしたいのでWidthの下の欄の数字1を0.5に変更します。

変更するとボタンの横幅が半分になります。

右側にボタンを貼り付けします。

右側のボタンも半分にしたいのでWidthの下の欄の数字1を0.5に変更します。

変更するとボタンの横幅が半分になり2つのボタンが並びます。

Groupに貼り付けた2つのボタンが表示されています。

左側のボタンのTitleを「Play」にします。

右側のボタンのTitleを「Stop」にします。

アニメーションを動作させる画像をImages.xcassetsにセットします。

Imageには、Bus0〜4までの5枚の画像が表示されています。

Imageに「Bus0」の画像を選択します。Sizeは、Width、Heightともデフォルトの「Size To Fit Content」のままにしておきます。

InterfaceController.mに記述します。

画像、Playボタン、Stopボタンをそれぞれ紐付けします。

// 接続

@interface InterfaceController()

// 画像

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

// Playボタン

@property (weak, nonatomic) IBOutlet WKInterfaceButton *playButton;

// Stopボタン

@property (weak, nonatomic) IBOutlet WKInterfaceButton *stopButton;

@end

Playボタンのアクション記述とStopボタンのアクション記述をそれぞれ紐付けします。
プレイアクションは、setImageNamedでバスの画像名をセットしstartAnimatingでスタートします。
ストップする場合は、stopAnimatingでストップされます。

// アニメーション プレイアクション

- (IBAction)playAnimation {

    // Uses images in WatchKit app bundle.

    [self.animatedImage setImageNamed:@"Bus"];

    [self.animatedImage startAnimating];

    // Animate with a specific range, duration, and repeat count.

    // [self.animatedImage startAnimatingWithImagesInRange:NSMakeRange(0, 4) duration:2.0 repeatCount:3];

}

// アニメーション ストップアクション

- (IBAction)stopAnimation {

    [self.animatedImage stopAnimating];

}

#import "InterfaceController.h"

// 接続

@interface InterfaceController()

// 画像

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

// Playボタン

@property (weak, nonatomic) IBOutlet WKInterfaceButton *playButton;

// Stopボタン

@property (weak, nonatomic) IBOutlet WKInterfaceButton *stopButton;

@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];

}

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

- (void)didDeactivate {

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

    [super didDeactivate];

}

// アニメーション プレイアクション

- (IBAction)playAnimation {

    // Uses images in WatchKit app bundle.

    [self.animatedImage setImageNamed:@"Bus"];

    [self.animatedImage startAnimating];

    // Animate with a specific range, duration, and repeat count.

    // [self.animatedImage startAnimatingWithImagesInRange:NSMakeRange(0, 4) duration:2.0 repeatCount:3];

}

// アニメーション ストップアクション

- (IBAction)stopAnimation {

    [self.animatedImage stopAnimating];

}

@end

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

GitHub WatchKitAnimation02

▫️参考にしたページ

目　次