之前有群友问电商网站中点击“加入购物车”就会出现一个小球飞入购物车的动画是怎么做的，自己总是做不好，没有某些APP上那么流畅和自然。小球飞入购物车的效果，通常来说需要设置两个点，做一个css3动画就好了，从A点飞入到B点，飞入购物车做的其实是一个抛物线运动，就像这样：
抛物线运动
这看起来很容易，用贝塞尔曲线工具调一个抛物线出来然后对照着写就可以了，所以我们可以先调整下小球运动的轨迹，然后搬过来就可以了。
贝塞尔曲线
#Ball { Transform: translate3d(X,Y,0); transition: 1s cubic-bezier( .28 , 1.28 , .79 , 1.43 ) }
写完以后你会发现，完全不是那么回事，小球确实飞入了购物车，但是运动却变得很怪异，如下图：
怪异的小球
原因很简单，因为小球到购物车的X距离是不需要这个贝塞尔曲线运动的，只在Y轴上有这个运动形式就可以了，所以就需要我们做两层。一层做Y轴的运动，另一层做X轴的运动，所以我们的思路应该是这样的：
#Ball {
transition: 1s cubic-bezier(0,0,0,0);
Transform: translate3d(X,0,0)
}
#BallWrap {
transition: 1s cubic-bezier(.52,1.6,.67,1.47);
Transform: translate3d(0,Y,0)
}
效果很简单，唯一需要注意的就是X轴不做运动形式，平滑过度就可以了。至于列表点击飞入购物车则需要动态计算按钮到购物车的X轴和Y轴距离，这里就不再详细说明。
网友评论