寺子屋管理者

  • アバター画像

教えて!iPhoneアプリ開発全般

公開寺子屋 1 年前に活動

iPhoneアプリ開発全般についての寺子屋です。

UIKitの連続アニメーション (5件の投稿)

← 寺子屋講義   寺子屋講義案内
  • アバター画像 アカキキ による3 年と 10 か月前の発言:

    初めての投稿です。
    自分がやりたいことは,
    画像を指定 -> 横に広がるアニメーション -> テキスト表示して1秒待ち消去 -> 中央に縮まるアニメーション です。また、複数回できるようにしたいです。
    中央に縮まるアニメーションをするときになぜか移動してしまいます。
    また、xの値を変えてもおかしくなります。

    .h
    @property (weak, nonatomic) IBOutlet UILabel *Text;
    @property (weak, nonatomic) IBOutlet UIImageView *Image;
    - (IBAction)Button:(id)sender;

    .m
    - (IBAction)Button:(id)sender {

    int x = 1;
    for (int i = 0; i<x; i++) {

    UIImage *image = [UIImage imageNamed:@"skillSeet0.png"];
    _Image.image = image;
    _Image.transform = CGAffineTransformMakeScale(0.0, 1.0);
    _Text.text = @"";
    //0.5秒で横に広がるアニメーション
    [UIView animateWithDuration:0.5f
    delay:0.0f
    options:UIViewAnimationOptionCurveEaseIn
    animations:^{
    _Image.transform = CGAffineTransformMakeScale(1.0, 1.0);

    } completion:^(BOOL finished) {
    NSString *str = [NSString stringWithFormat:@"テキスト表示"];
    _Text.text = str;
    //1.0秒間テキスト表示する
    [UIView animateWithDuration:0.5f
    delay:0.0f
    options:UIViewAnimationOptionCurveEaseIn
    animations:^{
    _Image.transform = CGAffineTransformMakeScale(1.0, 0.99);

    } completion:^(BOOL finished) {
    _Text.text = @"";
    [UIView animateWithDuration:0.5f
    delay:0.0f
    options:UIViewAnimationOptionCurveEaseIn
    animations:^{
    _Image.transform = CGAffineTransformMakeScale(0.0, 1.0);

    }completion:^(BOOL finished) {
    NSLog(@"終わり");
    }];
    }];

    }];
    }

    }

  • アバター画像 reborn による3 年と 10 か月前の発言:

     ストーリーボードのUse AutoLayoutの影響です。
     チェックを外せば希望どおりに動きます。
     AutoLayoutを利用する必要があるならtransformではなくframeを使うといいでしょう。

    CGRect frame = _imageView.frame;
      // 初期状態
    _imageView.frame = CGRectInset(frame, frame.size.width / 2, 0);
      // 広げるアニメーションで使用
      _imageView.frame = frame;

     また、アニメーションの繰り返しをfor (int i = 0; i<x; i++) {…}ループで制御する事はできません。
     completion:で必要なだけanimateWithDuration:を入れ子にする必要があります。
     スマートな対応をしたいなら-animateKeyframesWithDuration:delay:options:animations:completion:をUIViewKeyframeAnimationOptionRepeat指定付きで使用する必要があります。ただしiOS 7限定です。
     iOS 6以前もサポートしたいならCAAnimationを使う必要があります。

     それと、1.0秒間テキスト表示するのにはdelay:を使うといいでしょう。
    次のように2段階のネストで済みます。

        [UIView animateWithDuration:0.5f
                              delay:0.0f
                            options:UIViewAnimationOptionCurveEaseIn
                         animations:^{
                             // 大きくする
                         } completion:^(BOOL finished) {
                             [UIView animateWithDuration:0.5f
                                                   delay:1.0f
                                                 options:UIViewAnimationOptionCurveEaseIn
                                              animations:^{
                                                  //    小さくする
                                              }completion:^(BOOL finished) {
                                                  NSLog(@"終わり");
                                              }];
                         }];
    
  • アバター画像 アカキキ による3 年と 10 か月前の発言:

    rebornさんありがとうございます。
    投稿ように作ったので、Autolayoutをはずし忘れてしまいました。
    コードについてですが、ディレイを使うと、テキスト表示ができませんでした。
    理想 : 画像が横に広がる(0.5f) -> 文字表示(1.0f) -> 文字を消す(瞬時) -> 画像を小さくする
    現在 : 画像が横に広がる(0.5f) -> 文字が出ない -> 画像を小さくする
    あとゲーム上、条件によって何回か文字(画像)を変えて0~6回連続アニメーションをする必要があるのですが可能なのでしょうか?全然知識がなくてすみません。
    - (IBAction)Button:(id)sender {

    int x = 1;
    for (int i = 0; i<x; i++) {

    UIImage *image = [UIImage imageNamed:@"skillSeet0.png"];
    _Image.image = image;
    _Image.transform = CGAffineTransformMakeScale(0.0, 1.0);
    _Text.text = @"";
    //0.5秒で横に広がるアニメーション
    [UIView animateWithDuration:0.5f
    delay:0.0f
    options:UIViewAnimationOptionCurveEaseIn
    animations:^{
    _Image.transform = CGAffineTransformMakeScale(1.0, 1.0);

    } completion:^(BOOL finished) {

    _Text.text = @"おはよう";
    [UIView animateWithDuration:0.5f
    delay:1.0f
    options:UIViewAnimationOptionCurveEaseIn
    animations:^{
    _Text.text = @""; _Image.transform = CGAffineTransformMakeScale(0.0, 1.0);

    }completion:^(BOOL finished) {
    NSLog(@"終わり");
    }];
    }];

    }

    }

  • アバター画像 reborn による3 年と 10 か月前の発言:

     テキストが消えるのはanimations:の中に

     _Text.text = @”";

    としているのが原因です。
     _Textも_Imageと同じ場所で

     _Text .transform = CGAffineTransformMakeScale(…

    とすればいいでしょう。
     もっとも、UIViewを1つ用意して、その上に_Image、_Textを貼付け、そのUIViewのtransformを加工する方法がスマートですね。

    連続アニメーションは
    -animateKeyframesWithDuration:delay:options:animations:completion:
    でググるといいですよ。

  • アバター画像 アカキキ による3 年と 10 か月前の発言:

    ありがとうございます。
    連続でアニメーションはできなさそうなので、NSTimerを使うことにし、なんとか解決できました。
    rebornさん何度も回答していただきありがとうございました。
    そして返信が遅れてすみませんでした。