連続したアニメーションの呼び出しが機能しない

Question

イメージをフェードアウトするanimateWithDurationコードを呼び出すボタンがあり、テキスト&が新しいbgのカラーをフェードして元に戻します。アニメーションは数秒で完成し、素晴らしい作品です。

ただし、問題があります：

アニメーションが終了する前にこのボタンが再度押されることがあります。これが起こると、私は現在のアニメーションを止めて、やり直して欲しい。

私の読書によると

を動作しない解決策を研究し、解決策は単純である必要があり、ちょうどQuartzCoreをインポートして追加します。

button.layer.removeAllAnimations() 

このアニメーションを削除しますが、新しい/秒のアニメーションがあるん完全に混乱した。隠されているはずの画像はありません。テキストは表示されず、色の変化はすべて間違っています。何が起こっていますか！？！

//Animate Finished feedback in footer bar 
func animateFinished(textToDisplay: String, footerBtn: UIButton, footerImg: UIImageView) { 

    //Should cancel any current animation 
    footerBtn.layer.removeAllAnimations() 

    footerBtn.alpha = 0 
    footerBtn.setTitle(textToDisplay, forState: UIControlState.Normal) 
    footerBtn.titleLabel!.font = UIFont(name: "HelveticaNeue-Regular", size: 18) 
    footerBtn.setTitleColor(UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 1.0), forState: UIControlState.Normal) 
    footerBtn.backgroundColor = UIColor(red: 217/255.0, green: 217/255.0, blue: 217/255.0, alpha: 1.0) 

    UIView.animateWithDuration(0.5, delay: 0.0, options: nil, animations: { 
     footerImg.alpha = 0.01 //Img fades out 
     footerBtn.backgroundColor = UIColor(red: 46/255.0, green: 163/255.0, blue: 00/255.0, alpha: 0.6) 
     } 
     , completion: { finished in 

      UIView.animateWithDuration(0.5, delay: 0.0, options: nil, animations: { 
       footerBtn.alpha = 1 //Text fades in 
       footerBtn.backgroundColor = UIColor(red: 46/255.0, green: 208/255.0, blue: 11/255.0, alpha: 0.6) 
       } 
       , completion: { finished in 

        UIView.animateWithDuration(0.5, delay: 1.0, options: nil, animations: { 
         footerBtn.alpha = 0.01 //Text fades out 
         footerBtn.backgroundColor = UIColor(red: 46/255.0, green: 173/255.0, blue: 00/255.0, alpha: 0.6) 
         } 
         , completion: { finished in 

          UIView.animateWithDuration(0.5, delay: 0.0, options: nil, animations: { 
           footerImg.alpha = 1 //Img fades in 
           } 
           , completion: { finished in 
            footerBtn.backgroundColor = UIColor.clearColor() 
            footerBtn.setTitleColor(UIColor(red: 55/255.0, green: 55/255.0, blue: 55/255.0, alpha: 1.0), forState: UIControlState.Normal) 
            footerBtn.titleLabel!.font = UIFont(name: "HelveticaNeue-Light", size: 18) 
            footerBtn.setTitle("", forState: UIControlState.Normal) 
            footerBtn.alpha = 1 
            //Completion blocks sets values back to norm 
          }) 
        }) 
      }) 
    }) 
}//End of animation 

@Shripada @Shripadaは、わかりやすいコードをキーフレームに切り替えることをお勧めします。以下のキーフレーム形式。アニメーションの中断の問題は解決しませんでした。ネストまたはキーフレーム形式で問題を解決できる場合は、投稿してください！

func animateFinished(textToDisplay: String, footerBtn: UIButton, footerImg: UIImageView) { 
    //Should cancel any current animation 
    footerBtn.layer.removeAllAnimations() 

    footerBtn.alpha = 0 
    footerBtn.setTitle(textToDisplay, forState: UIControlState.Normal) 
    footerBtn.titleLabel!.font = UIFont(name: "HelveticaNeue-Regular", size: 18) 
    footerBtn.setTitleColor(UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 1.0), forState: UIControlState.Normal) 
    //footerBtn.backgroundColor = UIColor(red: 217/255.0, green: 217/255.0, blue: 217/255.0, alpha: 1.0) 

    UIView.animateKeyframesWithDuration(3.0 /*Total*/, delay:0.0, options: UIViewKeyframeAnimationOptions.CalculationModeLinear, animations: { 

      UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration:0.10, animations:{ 
       footerImg.alpha = 0.01 //Img fades out 
       footerBtn.backgroundColor = UIColor(red: 46/255.0, green: 103/255.0, blue: 00/255.0, alpha: 0.6) //Bg turns to green 
      }) 

      UIView.addKeyframeWithRelativeStartTime(0.10, relativeDuration:0.30, animations:{ 
       footerBtn.alpha = 1 //Text and green bg fades in 
       footerBtn.backgroundColor = UIColor(red: 46/255.0, green: 173/255.0, blue: 11/255.0, alpha: 0.6) //BG turns greener 
      }) 

      UIView.addKeyframeWithRelativeStartTime(0.40, relativeDuration:0.50, animations:{ 
       footerBtn.alpha = 0.01 //Text fades out & bg fade out 
      }) 

     }, 
     completion: { finished in 
      footerImg.alpha = 1 
      footerBtn.alpha = 1 
      footerBtn.backgroundColor = UIColor.clearColor() 
      footerBtn.setTitleColor(UIColor(red: 55/255.0, green: 55/255.0, blue: 55/255.0, alpha: 1.0), forState: UIControlState.Normal) 
      footerBtn.titleLabel!.font = UIFont(name: "HelveticaNeue-Light", size: 18) 
      footerBtn.setTitle("", forState: UIControlState.Normal) 
      //Completion blocks sets values back to norm 
     } 
    ) 
}//End of 'Finished' animation 

Answer 1

私は何が起こっているのか見るためにあなたのanimateFinished方法にいくつかprintの行を追加しました：あなたはアニメーションが完了するまで実行できるようにする場合は、あなたが期待するように、

func animateFinished(textToDisplay: String, footerBtn: UIButton, footerImg: UIImageView) { 
    //Should cancel any current animation 
    print("Remove animations") 
    footerBtn.layer.removeAllAnimations() 
    print("Animations removed") 

    footerBtn.alpha = 0 
    footerBtn.setTitle(textToDisplay, forState: UIControlState.Normal) 
    footerBtn.titleLabel!.font = UIFont(name: "HelveticaNeue-Regular", size: 18) 
    footerBtn.setTitleColor(UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 1.0), forState: UIControlState.Normal) 
    //footerBtn.backgroundColor = UIColor(red: 217/255.0, green: 217/255.0, blue: 217/255.0, alpha: 1.0) 
    print("Initial animation setup completed") 

    UIView.animateKeyframesWithDuration(3.0 /*Total*/, delay:0.0, options: UIViewKeyframeAnimationOptions.CalculationModeLinear, animations: { 

      UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration:0.10, animations:{ 
       footerImg.alpha = 0.01 //Img fades out 
       footerBtn.backgroundColor = UIColor(red: 46/255.0, green: 103/255.0, blue: 00/255.0, alpha: 0.6) //Bg turns to green 
      }) 

      UIView.addKeyframeWithRelativeStartTime(0.10, relativeDuration:0.30, animations:{ 
       footerBtn.alpha = 1 //Text and green bg fades in 
       footerBtn.backgroundColor = UIColor(red: 46/255.0, green: 173/255.0, blue: 11/255.0, alpha: 0.6) //BG turns greener 
      }) 

      UIView.addKeyframeWithRelativeStartTime(0.40, relativeDuration:0.50, animations:{ 
       footerBtn.alpha = 0.01 //Text fades out & bg fade out 
      }) 

     }, 
     completion: { finished in 
      print("Completion block started") 
      footerImg.alpha = 1 
      footerBtn.alpha = 1 
      footerBtn.backgroundColor = UIColor.clearColor() 
      footerBtn.setTitleColor(UIColor(red: 55/255.0, green: 55/255.0, blue: 55/255.0, alpha: 1.0), forState: UIControlState.Normal) 
      footerBtn.titleLabel!.font = UIFont(name: "HelveticaNeue-Light", size: 18) 
      footerBtn.setTitle("", forState: UIControlState.Normal) 
      //Completion blocks sets values back to norm 
      print("Completion block finished") 
     } 
    ) 
}//End of 'Finished' animation 

ログショー：あなたがアニメーション中にボタンをタップすると

Remove animations 
Animations removed 
Initial animation setup completed 
Completion block started 
Completion block finished 

しかし、あなたはこれを参照してください。

が2回目の呼び出しのための 後の初期セットアップが完了するが、 前に第二のアニメーションが行われ、実行される（最初の呼び出しのために）完了ブロックを引き起こすこと、それを何が起こっている

。たとえば、ボタンのタイトルは2番目のアニメーション中に ""です。

修正は比較的簡単です：アニメーションが完了していない場合は、完了ブロックを実行しないでください：

 completion: { finished in 
      if (!finished) { 
       return 
      } 
      print("Completion block started") 
      footerImg.alpha = 1 
      footerBtn.alpha = 1 
      footerBtn.backgroundColor = UIColor.clearColor() 
      footerBtn.setTitleColor(UIColor(red: 55/255.0, green: 55/255.0, blue: 55/255.0, alpha: 1.0), forState: UIControlState.Normal) 
      footerBtn.titleLabel!.font = UIFont(name: "HelveticaNeue-Light", size: 18) 
      footerBtn.setTitle("", forState: UIControlState.Normal) 
      print("Completion block finished") 
      //Completion blocks sets values back to norm 
     } 

をまた、Shripadaごとに、あなたはfooterImgからアニメーションを削除するだけでなく、footerBtnする必要があります。 、方法の開始時：

footerImg.layer.removeAllAnimations() 

Answer 2

連続したアニメーションの完了ブロックを使用して、この種の入れ子でアニメーションをシーケンスすることは避けてください。これは非常に読めないだけでなく、あなたが言及しているような問題を理解して解決することも難しくなります。

キーフレームアニメーションと呼ばれる方法がはるかに優れているため、使用することを検討する必要があります（iOS 7以降で利用可能）。

animateKeyFramesWithDuration:delay:options:animation:completion 

あなたのアニメーションコードはキーフレームを使用して書き換えることができdocumentation

を参照してください（PS：私はちょうどあなたの参照のためにそれを入力し、これをテストしていない） - もかかわらず、このリンクを参照してください

func animateFinished(textToDisplay: String, footerBtn: UIButton, footerImg: UIImageView) { 
    //Should cancel any current animation 
    footerBtn.layer.removeAllAnimations() 
    footerImg.layer.removeAllAnimations() 
    footerBtn.alpha = 0 
    footerBtn.setTitle(textToDisplay, forState: UIControlState.Normal) 
    footerBtn.titleLabel!.font = UIFont(name: "HelveticaNeue-Regular", size: 18) 
    footerBtn.setTitleColor(UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 1.0), forState: UIControlState.Normal) 
    //footerBtn.backgroundColor = UIColor(red: 217/255.0, green: 217/255.0, blue: 217/255.0, alpha: 1.0) 

    UIView.animateKeyframesWithDuration(3.0 /*Total*/, delay:0.0, options: UIViewKeyframeAnimationOptions.CalculationModeLinear, animations: { 

      UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration:0.10, animations:{ 
       footerImg.alpha = 0.01 //Img fades out 
       footerBtn.backgroundColor = UIColor(red: 46/255.0, green: 103/255.0, blue: 00/255.0, alpha: 0.6) //Bg turns to green 
      }) 

      UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration:0.30, animations:{ 
       footerBtn.alpha = 1 //Text and green bg fades in 
       footerBtn.backgroundColor = UIColor(red: 46/255.0, green: 173/255.0, blue: 11/255.0, alpha: 0.6) //BG turns greener 
      }) 

      UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration:0.50, animations:{ 
       footerBtn.alpha = 0.01 //Text fades out & bg fade out 
      }) 

     }, 
     completion: { finished in 
      footerImg.alpha = 1 
      footerBtn.alpha = 1 
      footerBtn.backgroundColor = UIColor.clearColor() 
      footerBtn.setTitleColor(UIColor(red: 55/255.0, green: 55/255.0, blue: 55/255.0, alpha: 1.0), forState: UIControlState.Normal) 
      footerBtn.titleLabel!.font = UIFont(name: "HelveticaNeue-Light", size: 18) 
      footerBtn.setTitle("", forState: UIControlState.Normal) 
      //Completion blocks sets values back to norm 
     } 
    ) 
}//End of 'Finished' animation 

それは非常に有益な、obj cです。 http://www.raizlabs.com/dev/2015/01/uiview-animation-sequencing-and-grouping-techniques/