1

現在アニメーションに関する実装をしており、フェードインしながら画像が切り替わるアニメーションがスタートし、数秒経った後にフェードアウトしてアニメーションが終了するという処理をしようとしているのですが、アニメーションの設定を無限リピートにしており、フェードアウト後にもう一度アニメーションがスタートしてしまいます。なので、フェードアウトした後に画像を画面から消そうとしているのですが、それがうまくいきません。下記のように実装してもアニメーションがスタートした段階でcompletion:^(BOOL finished){以下が呼ばれてしまいます。

[UIView animateWithDuration:0.5f
                          delay:0.5f
                        options:UIViewAnimationOptionCurveEaseIn
                     animations:^{
                         [self imageFade:_imageView fadeIn:0 fadeOut:1 delay:0];
                         _imageView.animationImages = imageList;
                         _imageView.animationDuration = _duration;
                         _imageView.animationRepeatCount = 0;
                         [_imageView startAnimating];
                     } completion:^(BOOL finished){
                         [_imageView removeFromSuperview];
                     }];

アニメーションの終了を検知するにはどうすればよろしいでしょうか?
ちなみにanimationsブロックにあるimageFadeメソッドは以下のようになっており、フェードインとフェードアウトを開始する時間をし、フェードアウトが終わればimageviewをviewから削除するという処理を行っています。

- (void)imageFade:(UIImageView *)imageView fadeIn:(int)fadeIn fadeOut:(int)fadeOut delay:(int)delay
{
    imageView.alpha = fadeIn;
    [UIView animateWithDuration:1 delay:delay options:UIViewAnimationOptionCurveEaseIn
                     animations:^{ imageView.alpha = fadeOut;}
                     completion:^(BOOL finished){
                         [self imageFade:_imageView fadeIn:1 fadeOut:0 delay:_fadeDelay];
                         dispatch_after(dispatch_time(DISPATCH_TIME_NOW, _finishDelay * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
                             [_imageView removeFromSuperview];
                         });
                     }];
}
6
  • 本題の解決に繋がるか分かりませんが、imageFade:fadeIn:fadeOut:delay:の実装に問題があります。アニメーションを再帰呼び出しすると、selfが強参照でブロックにキャプチャされて解放されません。推測ですが、それを回避するために即座にcompletionブロックが呼び出されているのではないでしょうか。UIViewAnimationOptionCurveEaseIn|UIViewAnimationOptionRepeatで代替できませんか?
    – quesera2
    Commented 2015年1月12日 9:07
  • ご回答ありがとうございます。試しにimageFadeメソッドを消し、UIViewAnimationOptionRepeatを加えて実行してみたのですが、アニメーションの開始とともにcompletion以下が呼ばれてしまいました。。。
    – tarofess
    Commented 2015年1月12日 9:22
  • となると、finishedの値を確かめてみてください。恐らくNOではないでしょうか。アニメーションはトランザクション管理されているので(blockは糖衣記法です、この辺の詳細はViewプログラミングガイドかCore Animationプログラミングガイドを参照)、複数のアニメーションを同時に実行すると先に呼び出された方はキャンセルされ、completionにNOが渡されて実行されます。
    – quesera2
    Commented 2015年1月12日 9:37
  • finishedの値をログで確認したところ、整数値ですが、1と出力されました。
    – tarofess
    Commented 2015年1月12日 10:11
  • 1はYESなので正常です、失礼しました。「アニメーション終了の検知方法」という題に関して言えば、completionブロックを使う方法で正しいので、全体としてやりたいこと(0.5秒のアニメーション中に1秒間のフェードを無限ループさせる?)が見えないと回答が難しいと感じます。
    – quesera2
    Commented 2015年1月12日 10:45

3 件の回答 3

2

[UIView animateWithDuration:delay:options:animations:completion:]は、animations:ブロックの中におけるUIViewのプロパティframe, bounds, center, transform, alpha, backgroundColorの値の変更をアニメーションさせる機能ですので、
そこで画像をセットしたりすると期待した通りにならないかと思います。

 これらのプロパティの変更がひとつも含まれない場合は、ただ単にブロック内のコードが実行され、次いで完了ブロックが実行されます。このとき指定した秒数は無視されます。また、同じ値を入れても無効です。あなたのコードではアニメーション可能なプロパティの値の変更が含まれていないために秒数が無視され、完了プロックが即時実行されたように見えるのだと思います。

例えば以下のようにアルファ値だけ変えて試してみてはどうでしょうか。

// この時点で_imageViewには画像が正しく表示されているものとします。

// フェードアウト処理を行います。
[UIView animateWithDuration:0.5f
                      delay:0.5f
                    options:UIViewAnimationOptionCurveEaseIn
                 animations:^{
                     _imageView.alpha = 0
                 } completion:^(BOOL finished){
                     [_imageView removeFromSuperview];
                 }];
3
  • すみません、アニメーションのループを無限に設定してあるので、アルファ値を変えても画像がフェードアウトした後にまたアニメーションが表示されてしまいます。。。
    – tarofess
    Commented 2015年1月8日 8:42
  • [self imageFade:_imageView...[_imageView startAnimating]; の部分のコードをアニメーションブロックから出して、このフェードアウト用の [UIView animateWithDuration: ... の直前に置いたらどうでしょう。そのときUIImageViewとUIViewのアニメーション時間を同じにしてみてください
    – user5443
    Commented 2015年1月8日 11:20
  • 返信が遅くなり大変申し訳ございません。ご指摘の通りの手順で試してみたのですが、アニメーションの開始とともにcompletion以下が実行されてしまいました。
    – tarofess
    Commented 2015年1月11日 0:28
1

UIImageViewstartAnimatingのタイミングを外に出して、後は単純にアルファ値を操作するアニメーションを書けば良いのではないでしょうか?

self.imageView.animationImages = @[
  [UIImage imageNamed:@"1"],
  [UIImage imageNamed:@"2"]
]; 
self.imageView.animationDuration = 1.f;
self.imageView.animationRepeatCount = 0; // 無限
[self.imageView startAnimating];

self.imageView.alpha = 0.f;
[UIView animateWithDuration:0.5f
                      delay:0.f
                    options:UIViewAnimationOptionCurveEaseInOut
                 animations:^{
                     self.imageView.alpha = 1.f;
                 }
                 completion:^(BOOL finished) {
                     [UIView animateWithDuration:0.5f
                                           delay:3.f  // 画面に留めておきたい秒数を指定
                                         options:UIViewAnimationOptionCurveEaseInOut
                                      animations:^{
                                          self.imageView.alpha = 0.f;
                                      }
                                      completion:^(BOOL finished) {
                                          [self.imageView stopAnimating];
                                      }];
 }];
1
  • ご回答ありがとうございます。ご提示いただいたやり方で実装したところ、思ってた通りの動作を確認することができました!とてもシンプルに実装できて嬉しいです。誠にありがとうございました!
    – tarofess
    Commented 2015年1月12日 12:22
1

animations: で渡しているブロックの内容が、このメソッド [UIView animateWithDuration:delay:options:animations:completion:] の想定しているものであれば、終了の検知方法は合っています。

ここで別のメソッドを呼んでいますが、このメソッドの内容が分からない限り、この方法で終了の検知ができるかは判断できません:

[self imageFade:_imageView fadeIn:0 fadeOut:1 delay:0];
3
  • ご回答ありがとうございます。ご指摘の通りimageFadeメソッド以下を追記いたしました。
    – tarofess
    Commented 2015年1月11日 0:29
  • お返事間に合わなくてすみません。解決したようでよかったです。
    – ppm
    Commented 2015年1月12日 13:03
  • いえいえ、こちらこそありがとうございました^^
    – tarofess
    Commented 2015年1月12日 13:04

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。