Blog

【jQuery】放物線を使ったカートインアニメーション

2017.10.10Cat:javascript jQuery デザイナー

ECサイトでカートに商品を入れた場合に、
カートページへ遷移させずに、
カートに入れたことをアニメーションで知らせるという方法を使ったサイトを見かける機会があると思います。

決済が単品であることがほとんどの場合はカートページへ遷移させたほうがユーザーのストレスが少ないですが、
複数の商品をカートに入れる場合が多いサイトでは、遷移させずにカートに入れたことを知らせるだけにしたほうが、遷移による操作や待機時間を減らせるため、ユーザーのストレス軽減が期待できます。

さらに、遷移させずにカートに入れたことを知らせる場合、Ajaxなどで処理をすることが多いため、通信中の待機時間のストレスを軽減するため、アニメーションが有効です。

カートに入れるアニメーションにもいろいろな種類があると思いますが、
今回は商品の「カートに入れるボタン」から、「ナビゲーションのカートボタン」へボールが投げ入れられるようなイメージのアニメーションを実装する方法を考えて、作ってみました。

↓作ってみたもの

DEMO

 

アニメーションの流れ

  1. ボタン位置の計算
  2. 軌道の最初の角度を計算
  3. 軌道に沿ってボールをアニメーションさせる

 

1. ボタン位置の計算

jQueryを使って、クリックしたボタンと投げ入れる先のボタンの位置を取得します

 

2. 軌道の最初の角度を計算

ボタンの位置を基に、軌道に使う放物線の最初の角度を計算します。

 

軌道に使う放物線は、初速によっては存在しない軌道になってしまうので、
軌道の存在を確認しながら、初速を調整します。

 

3. 軌道に沿ってボールをアニメーションさせる

割り出した最初の角度を基に、放物線のアニメーションを実行します。

 

計算式は、↓こちらのサイトを参考にさせていただきました。

放物線で目標に当てる角度を求める | あ、そんなことか

斜方投射2 ■わかりやすい高校物理の部屋■

 

JavaScript全文

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ