春节终于过完了，自己春节似乎过的有点大，过完春节之后，态度一直没有调整好，总有一股过节的情绪，没有完全进入学习和工作的状态来。继续调整当中……
这两天项目中遇到一个小需求，十分类似于支付宝蚂蚁森林给小树苗浇水的效果，需要有一个浇水的动作，然后小树苗有点长大的感觉。
思来想去，最好的效果应该是用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倍。
基本完成小需求了，就我个人而言还存在很多遗憾，效果并不理想。