每次吃饭点外卖的时候（暴露了自己是个死肥宅，手动滑稽），或者在淘宝购物的时候，将商品加入购物车时会有一个很炫酷的动画，如下图饿了么点餐动画：
所以百度了一下前端使用css实现这个效果，然后就自己就照葫芦画瓢的写了一个小小的demo，完全当作学习了一把。
在界面上，我是参考了图片上的界面，写的css，然后在美团上面扒的数据。完成后的界面如下图：
开始想着只是做一个简单的实现效果，界面上只有div框，按钮什么的这些，反正想着很丑的界面，但是自己看到饿了么这么好看的界面，自己就忍不住模仿着写了一下下。
主要用到的是移动端适配方案：flexible.js + rem的方案
首先获取到页面上所有按钮，然后给按钮添加点击事件，获取到点击当前按钮的位置坐标信息
方案一：使用定位+transition的方式实现
方案二：使用transform + transition的方式实现
其实还可以使用css的animate来实现，只不过由于需要动态计算目标位置的坐标，实现起来比较困难，所以我就没有写，如果目标位置的坐标值固定，那么可以通过animate改变top、left或者translateX、translateY的值来实现这个效果，垂直方向的动画使用贝塞尔曲线的 function-timing 。
初识CSS抛物线动画
https://github.com/HyFun/CSS-Sample-ElemeAnimate
方法/步骤1
首先需要引入一个jquery.fly.min.js文件（可自行搜索，也可以在本人的百度云盘中找到）
2
设置抛物线的位置（起点也可以是整个页面的可点击区域，即body）：
抛物线起点，此例中为.left_btn（标签的classname）
抛物线终点，此例中为.gwcimg（标签的classname）
3
创建JS方法：
$('.left_btn').on('click', addProduct)
function addProduct(event){
var offset = $(".gwcimg").offset(),
//抛物线图片，可自行更改
flyer = $('<img src="brandmarket/image/gwc.png" width="36" height="36">')
flyer.fly({
start: {
left: event.pageX,
top: event.pageY
},
end: {
left: offset.left,
top: offset.top,
//抛物线完成后留在页面上的图片大小
width: 20,height: 20
}
})
}
4
大致有两种效果，一种是每添加一次就在购物车的数字上加一，数字显示的位置可以用CSS样式控制，然后把上一步中“抛物线完成后留在页面上的图片大小”中宽高值都设置为0，效果如下：
5
另一种是将数字用图片代替，此为默认的效果，改变浏览器大小的时候，用来代替的图片会一直停留在绝对位置，效果如下：
http://jingyan.baidu.com/article/ceb9fb10c13bac8cac2ba05a.html
可以做一个animation，举一个例子，让一个元素在某一个范围之内，左距离和上距离同时改变。但是，弧线要让两个距离改变速度变化不一致，所以最好一个元素改变上方距离（可以是top也可是margin-top），里面嵌入一个元素改变左边距离。例如，假如你要让横轴均匀变化，纵轴不均匀变化，轨迹为⌒形，可以左变化为{from{margin-left:0px}to{margin-left:200px}}，运动方式设为linear，然后上下变化可以{from{margin-top:100px}50%{margin-top:0px}to{margin-top:100px}}，运动方式设为ease-in-out。由于时间仓促我没有具体实验过，而且表达可能不太清楚，请原谅。
