新增購物車弧形動畫
問題描述：購物車動畫，就是選擇的時候一個動畫元素從選擇處以拋物線調入左下角的購物車圖示，進入後購物車有一個搖晃效果。（如下圖）
-------------（×_×） 一個小小的動畫，需求也是定製的，不高新到網上找外掛。程式碼也不多。找的外掛還要改東西，又引入更多程式碼。於是決定自己寫。
解題思路：
相信大家也不願意看大堆的程式碼，寫下關鍵點吧。
1.準備：在選擇的地方隱藏一個動畫元素（使用fixed定位：因為動畫應該是相對於螢幕的，而右邊的列表長度大於螢幕，不能使用相對於文件的定位）。
2.過程：(1).選擇的時候，先顯示這個動畫元素。然後根據拋物線路徑parabola，每隔一個時間間隔，設定一下動畫元素的left,bottom值。
(2).當到達購物車後隱藏動畫元素,觸發購物車搖晃動畫。
3.詳解：
（1）.看一下拋物線函式：
function parabola(x,y,x1) {
//頂點為原點的拋物線，根據已知一個非原點A（x,y)和B（x1,y1）的x1值求B的y1值,返回y1。
return x1*x1*y/(x*x);
}
（2）.路徑繪製關鍵程式碼用顏色表示出了。
$(".order_wrap").on("click",".checkbox1 input",function () {
var $this=$(this);
var li=$this.parents("li");
var _class=li.attr("id");
var span=$(".type_li."+_class).find(".num");
var food=$this.parents(".food");
var dot= food.find(".dot");
var num=(span.text()==NaN||span.text()==''||span.text()==undefined)?0:parseInt(span.text());
var html="";
if($this.is(":checked")){
//型別上個數修改
num+=1;
span.text(num);
//加入購物車動畫
$(".cart_i").removeClass("animate");
dot.css({
"display":"inline-block"
});
var x=dot[0].getBoundingClientRect().left;
var y=dot[0].getBoundingClientRect().top-$(".cont").scrollTop();
for(var i=0;i<=x/10;i++){
dot.animate({
bottom:bottom.top-(parseInt(parabola(x-bottom.left,bottom.top-y,i*10)))-y+"px",
left:x-i*10-bottom.left+"px"
},10,function () {
if(dot.offset().left<10){
dot.css({
"display":"none"
});
$(".cart_i").addClass("animate");
}
});
}
//購物車新增html元素
html='<div class="oh food '+food.attr("id")+'" data-id='+food.attr("id")+'> <label class="checkbox1 y"> <input type="checkbox" checked> <i class="checkbox1_i"></i> </label> <div class="name omit">'+food.find(".name").text()+'</div> </div>';
$(".cart .foods").append($(html));
}else{
num-=1;
span.text(num);
//擦除購物車動畫痕跡
dot.css({"bottom":"auto","left":"auto"});
food.find(".dot").removeClass("on");
//購物車html元素刪除
$(".cart").find("."+food.attr("id")).remove();
}
//型別上面數量的顯示和隱藏
if(num>0){
span.addClass("show");
}else{
span.removeClass("show");
}
});
（3）.購物車動畫：css3動畫屬性。
@keyframes cart {
0%{
transform: scale(1,1) rotate(0deg);
-webkit-transform: scale(1,1) rotate(0deg);
opacity: 1;
}
30%{
transform: scale(1,1) rotate(-30deg);
-webkit-transform: scale(1,1) rotate(-30deg);
}
50%{
transform: scale(1.2,1.2) rotate(0deg);
-webkit-transform: scale(1.2,1.2) rotate(0deg);
}
70%{
transform: scale(1,1) rotate(10deg);
-webkit-transform: scale(1,1) rotate(10deg);
}
100%{
transform: scale(1,1) rotate(0deg);
-webkit-transform: scale(1,1) rotate(0deg);
opacity: 1;
}
}
.cart_i.animate{
animation: cart 0.5s;
animation-timing-function: linear;
-webkit-animation: cart 0.5s;
-webkit-animation-timing-function: linear;
}