アニメーションはUIImageViewで簡単に作成できる

アニメーションとは

画像が一定時間ごとに切り替わる動作です。
切り替わる時間間隔や、リピート回数も指定できます。

animation

アニメーションのプログラムの基本

例えば、ivというイメージビューと、image01.png〜image03.pngの3つの画像があったとします。その場合、次のようにして簡単にアニメーションを実行できます。

//画像を3つ用意し、配列に格納
UIImage *img1 = [UIImage imageNamed:@"image01.png"];
UIImage *img2 = [UIImage imageNamed:@"image02.png"];
UIImage *img3 = [UIImage imageNamed:@"image03.png"];
NSArray *images = [NSArray arrayWithObjects:img1, img2, img3, nil];

//アニメーションをセット
iv.animationImages = images;

//1コマが切り替わる時間を1秒にセット
iv.animationDuration = 1.0;

//リピート回数は無限
iv.animationRepeatCount = 0;

//アニメーションのスタート
[iv startAnimating]; 

 

アニメーションに使う画像を全て配列に格納し、

iv.animationImages = 配列名;

でアニメーションのセット。
アニメーションのスタート・ストップは、

スタート
[iv startAnimating]; 
ストップ
[iv stopAnimating]; 

で行うということです。

他に、以下の2つは使えるようにすると便利です。

1コマが切り替わる時間をx.x秒にセット
iv.animationDuration = x.x;

リピート回数をy回にセット
iv.animationRepeatCount = y;
※0にすると、リピート回数が無限ループになります

スライドショーのサンプルプログラム

UIImageViewの基本で作ったサンプルプログラムを少し改造し、簡単なスライドショーを実行してみます。

まず、3つのボタンを左にずらし、StartボタンとStopボタンを配置します。
imageview10

 

次に、ヘッダーファイル(.h)に定義します。

#import <UIKit/UIKit.h>

@interface TestViewController : UIViewController
{
    UIImageView *iv;
}

@property (nonatomic, retain) IBOutlet UIImageView *iv;

- (IBAction)BtnPush1:(id)sender;
- (IBAction)BtnPush2:(id)sender;
- (IBAction)BtnPush3:(id)sender;
- (IBAction)Start:(id)sender;
- (IBAction)Stop:(id)sender;

@end

ソースファイル(.m)に追記します。

- (IBAction)BtnPush3:(id)sender {
    
    NSLog(@"ボタン3が押されました");
    iv.image = [UIImage imageNamed:@"image03.png"];
}

- (IBAction)Start:(id)sender {
    
    NSLog(@"Startが押されました");
    [iv startAnimating]; 
}

- (IBAction)Stop:(id)sender {
    
    NSLog(@"Endが押されました");
    [iv stopAnimating];
}

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    //画像を3つ用意し、配列に格納
    UIImage *img1 = [UIImage imageNamed:@"image01.png"];
    UIImage *img2 = [UIImage imageNamed:@"image02.png"];
    UIImage *img3 = [UIImage imageNamed:@"image03.png"];
    NSArray *images = [NSArray arrayWithObjects:img1, img2, img3, nil];
    
    //アニメーションをセット
    iv.animationImages = images;
    
    //1コマが切り替わる時間を1秒にセット
    iv.animationDuration = 2.0;
    
    //リピート回数は無限
    iv.animationRepeatCount = 0;
    
}

- (void)didReceiveMemoryWarning

xibファイルでIBActionの関連付けをします。
StartとStopの2つのボタンについて、「Touch Up Inside」と紐付けます。
imageview11

シミュレータで実行してみます。

animation

コメントを残す

サブコンテンツ

このページの先頭へ