Skip to content

3.3 UIView Animation

yuichi takeda edited this page Feb 26, 2015 · 13 revisions

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

はじめに

  1. iOSについて

  2. Xcode最初のステッフ

  3. 導入

  4. Objective C の基礎

  5. メモリ管理

  6. 1.3 UIViewController1 UIViewController のカスタマイズ(xib, autoresizing)

  7. 1.3 UIViewController1 UIViewController のカスタマイズ(storyboard)

  8. UIViewController2 - ModalViewController

  9. UIViewController2 - ModalViewController(storyboard)

  10. UIViewController3 - ライフサイクル

  11. HomeWork 1 Objective C の基本文法

  12. HomeWork 2 UIViewControllerとModalViewController

  13. HomeWork 3 UIViewController + Animation

  14. UIKit 1 - container, rotate-

  15. UINavigationController

  16. UITabController

  17. Custom Container View Controller

  18. Supporting Multiple Interface Orientations

  19. HomeWork 1 - タブバーからモーダルビューを表示する

  20. HomeWork 2 - NavigationController

  21. HomeWork 2.3 デバイスことに回転対応

  22. UIKit 2- UIView -

  23. UIView

  24. UIView のカスタマイズ

  25. UIView Animation

  26. HomeWork 1 - UIScrollView

  27. UIKit 3 - table view -

  28. UITableView について

  29. UITableViewとNavigationController

  30. custom UITableViewCell の作成

  31. UITableViewのその他のオプション、カスタマイズ

  32. HomeWork 1 - Dynamic height with a custom uitableviewcell

  33. UIKit 4 - image and text -

  34. UIImagePickerController

  35. Assets Library

  36. UITextFiled, UITextView

  37. KeyboardNotification

  38. Homework 1 - フォトの複数枚選択

  39. ネットワーク処理

  40. NSURLConnection

  41. JSONのシリアライズとデシリアライズ

  42. UIWebView

  43. ローカルキャッシュと通知

  44. NSUserDefaults, Settings Bundle

  45. NSFileManager

  46. Key Value Observing

  47. NSNotification、NSNotificationCenter を用いた通知

  48. UILocalNotification

  49. Blocks, GCD

  50. Blocks

  51. GCD

  52. 【演習】GCD,-Blocksを用いたHTTPリクエストマネージャの作成

  53. 設計とデザインパターン

  54. クラス設計 1

  55. クラス設計 2

  56. [クラス設計演習] (https://github.com/mixi-inc/iOSTraining/wiki/9.3-%E3%82%AF%E3%83%A9%E3%82%B9%E8%A8%AD%E8%A8%88%E6%BC%94%E7%BF%92)

  57. 開発ツール

  58. Instruments, デバッガ

  59. CocoaPods

  60. テスト

  61. iOS開発におけるテスト

  62. GHUnit

  63. Kiwi

  64. KIF

  65. In-App Purchase

  66. In-App Purchase

  67. 付録

  68. Tips of Xcode

  69. Auto Layout 入門

  70. Auto Layout ドリル

Edit sidebar

Clone this wiki locally
You can’t perform that action at this time.