新增購物車弧形動畫

2021-08-10 06:45:53 字數 1058 閱讀 9529

問題描述:購物車動畫,就是選擇的時候乙個動畫元素從選擇處以拋物線調入左下角的購物車圖示,進入後購物車有乙個搖晃效果。(如下圖)

-------------(×_×)    乙個小小的動畫,需求也是定製的,不高新到網上找外掛程式。**也不多。找的外掛程式還要改東西,又引入更多**。於是決定自己寫。    

解題思路:

相信大家也不願意看大堆的**,寫下關鍵點吧。

1.準備:在選擇的地方隱藏乙個動畫元素(使用fixed定位:因為動畫應該是相對於螢幕的,而右邊的列表長度大於螢幕,不能使用相對於文件的定位)。

2.過程:(1).選擇的時候,先顯示這個動畫元素。然後根據拋物線路徑parabola,每隔乙個時間間隔,設定一下動畫元素的left,bottom值。

(2).當到達購物車後隱藏動畫元素,觸發購物車搖晃動畫。

3.詳解:

(1).看一下拋物線函式:

function parabola(x,y,x1)

(2).路徑繪製關鍵**用顏色表示出了。

$(".order_wrap").on("click",".checkbox1 input",function () );

var x=dot[0].getboundingclientrect().left;

var y=dot[0].getboundingclientrect().top-$(".cont").scrolltop();

for(var i=0;i<=x/10;i++),10,function () );

$(".cart_i").addclass("animate");

}});

}//購物車新增html元素

html='

'+food.find(".name").text()+'

(3).購物車動畫:css3動畫屬性。

@keyframes cart

30%50%

70%100%

}.cart_i.animate

購物車動畫

金幣終點的x位置 cgfloat positionx 290.0f 終點x 金幣終點的y位置 cgfloat positiony 500.0f 終點y cgmutablepathref path cgpathcreatemutable 金幣的起始x位置 int fromx 20 arc4random...

商品新增購物車實現動畫效果

在應用商場的時候,發現 和京東在往購物車新增商品時,會有商品縮圖跑到購物車的效果,特此做了個小demo,便於學習和應用 在controller的.h檔案中 inte ce viewcontroller property nonatomic,strong uibezierpath path end i...

php新增購物車

水果代號 水果名稱 水果 水果產地 水果庫存 操作 session start include fengzhuang dbda.class.php db new dbda sql select from fruit arr db query sql foreach arr as v 加入購物車 va...