3.3 UIView Animation

UIView クラスのアニメーションメソッドを使うことで簡単に View のアニメーションを実装することができます。

view アニメーション可能なプロパティ

プロパティ	可能な変更
frame	スーパービューの座標系を基準にビューのサイズと位置を変更する場合 は、このプロパティを変更します(transformプロパティに恒等変換が 含まれていない場合は、代わりにboundsまたはcenterプロパティを変 更します)。
bounds	ビューのサイズを変更する場合は、このプロパティを変更します。
center	スーパービューの座標系を基準にビューの位置を変更する場合は、このプロパティを変更します。
transform	中心点を基準にビューを拡大縮小、回転、または平行移動する場合は、 このプロパティを変更します。このプロパティを使用する変換は、常に2D空間で実行されます(3D変換を実行するには、Core Animationを使用 してビューのレイヤオブジェクトをアニメーション化する必要があります)。
alpha	ビューの透明度を徐々に変更する場合は、このプロパティを変更します。
backgroundColor	ビューの背景色を変更する場合は、このプロパティを変更します。

contentStretch | 利用可能な空間一杯にビューのコンテンツを引き延ばす方法を変更する場合は、このプロパティを変更します。

iOS Viewプログラミングガイドより引用

アニメーションブロック

UIView のクラスメソッドには以下のアニメーションメソッドが用意されています。

• animateWithDuration:animations: アニメーションブロック
• animateWithDuration:animations:completion: アニメーションブロックと完了ブロック
• animateWithDuration:delay:options:animations:completion: アニメーションブロックと完了ブロックとアニメーションオプション指定、ディレイ指定

画像を実際にアニメーションさせてみましょう。

MixiFirstViewController.m

static CGRect const kOjisanMovedFrame = {{320, 586}, {170, 170}};

@interface MixiViewController ()

@property (weak, nonatomic) IBOutlet UIImageView *ojisanImage;

@end

@implementation MixiViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    [UIView animateWithDuration:4.5
                     animations:^{
                         [_ojisanImage setFrame:kOjisanMovedFrame];
                     }];
}
@end

このサンプルは SampleProjects/3.3/MixiAnimationSample に含まれています。

問題

アニメーション完了後に画像を元に位置に戻るアニメーションを実装して下さい。（HINT:アニメーションブロックのネスト）

解答はサンプルプロジェクト(SampleProjects/3.3/MixiAnimationSample) の中にコメントアウトされています。

view の transition

View の追加、削除、表示、非表示などの際にトランジションを使用することでユーザに視覚的変化を与えることができます。

MixiSecondViewController.m

static CGRect const kOjisanInitialFrame = {{85, 115}, {170, 170}};

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    _ojisanImageView1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ojisan"]];
    _ojisanImageView2 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ojisan2"]];

    [self.view addSubview:_ojisanImageView1];
    [_ojisanImageView1 setFrame:kOjisanInitialFrame];
    [self.view addSubview:_ojisanImageView2];
    [_ojisanImageView2 setFrame:kOjisanInitialFrame];
    _ojisanImageView2.hidden = YES;
}

-(void)viewDidAppear:(BOOL)animated
{
    [UIView transitionWithView:self.view
                      duration:3.0
                       options:UIViewAnimationOptionTransitionCurlUp
                    animations:^{
                        _ojisanImageView1.hidden = YES;
                        _ojisanImageView2.hidden = NO;
                    } completion:nil];
}

begin/commit

アニメーションブロックを使わずにアニメーションを設定することも可能です。

MixiThirdViewController.m

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.

    [UIView beginAnimations:@"HideOjisanView" context:nil];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
    [UIView setAnimationDuration:2.0];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(showHideDidStop:finished:context:)];
    _ojisanImageView.alpha = 0.0;
    [UIView commitAnimations];
}

- (void)showHideDidStop:(NSString *)animationID finished:(NSNumber *)finished
                context:(void *)context
{
    [UIView beginAnimations:@"ShowOjisanView" context:nil];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
    [UIView setAnimationDuration:1.0];
    [UIView setAnimationDelay:1.0];
    _ojisanImageView.alpha = 1.0;
    [UIView commitAnimations];
}