webkitAnimationEnd動畫事件

　　春節終於過完了，自己春節似乎過的有點大，過完春節之后，態度一直沒有調整好，總有一股過節的情緒，沒有完全進入學習和工作的狀態來。繼續調整當中……

　　這兩天項目中遇到一個小需求，十分類似於支付寶螞蟻森林給小樹苗澆水的效果，需要有一個澆水的動作，然后小樹苗有點長大的感覺。

思來想去，最好的效果應該是用canvas畫一下，受制於技術水平的限制，只能退而求其次，選擇css3的動畫效果（APP項目，css3兼容性問題可以通過前綴webkit解決）。

　　最終效果是：草地上有幾棵小樹苗，在完成某一動作之后，出現一個小水壺對小樹苗澆點水，然后小樹苗左右晃動幾次，稍微變大一點。

　　最終實現的是：水壺澆水的動作做成了gif動畫圖片，在指定事件觸發之后，水壺從右上角飛出，做出澆水動作，在澆水動作完成之后，小樹苗開始晃動生長，並且水壺消失。

　　css3動畫部分都屬於比較好實現的部分，唯一需要注意的是，也是比較繁雜的是，動作需要逼真一點的話，那就得反復修改動畫的細節參數，這里略過。這里我們需要關心的是：水壺澆水的動作完成之后，怎么界定這個動作完成了。

　　第一想法是：延時定時器，setTimeout，設定一個與水壺澆水一樣時間的延時。但是既然是定時器，就必然存在阻塞的狀態，如果出現阻塞，那么很可能兩個動畫就不會連貫執行。

　　那還能怎么辦呢？

　　其實，css3為animation提供了一組動畫事件，即webkitAnimationStart-動畫開始，webkitAnimationEnd-動畫結束，webkitAnimationIteration-動畫重復播放 ，即可以很方便的監聽動畫過程。

　　項目中選擇zepto來操作DOM

    $(document.body).on('swing', function(){
        $('.bottle').show().addClass('bottle-fadeIn');
        $('.bottle').on('webkitAnimationEnd',function(){
          $('.bottle').hide();
          $('.tree').each(function(){
            var index = (Math.random()*3).toFixed(2);
            var self = this;
            setTimeout(function(){
              $(self).addClass('a-swing');
            }, 200*index);
          });
        });
             
        $('.tree').on('webkitAnimationEnd',function(){
        $('.tree').css({'-webkit-transform':'scale(1.2,1.2)'});
            $('.tree').removeClass('a-swing');
        }) ;             
      });

　　在body體上自定義事件swing，以便在需要的時候出發即可。

　　class為bottle-fadeIn，是為水壺添加的漸現的動畫，然后監聽水壺動畫結束的時間點，再觸發小樹苗生長的動畫，為了不讓多個樹苗往同一個方向同一時間晃動，就定義了一個隨機數index，對每一棵小樹苗延遲添加動畫class a-swing，並且監聽小樹苗動畫結束之后，直接將小樹苗直接放大1.2倍。

　　基本完成小需求了，就我個人而言還存在很多遺憾，效果並不理想。