やってみよう「カートに入れる」を押してみてください
アニメーション・演出マイナー（知る人ぞ知る）
カートに飛んでいくアニメーション
Add to Cart Animation
「カートに入れる」を押すと、商品の写真が小さくなりながらカートのマークへ飛んでいき、数字が1つ増える。
別名カート追加アニメーションフライトゥカート商品がカートに吸い込まれる放物線アニメーション
どこで使われている？
- よく見かける場所
- ネットショップ、フードデリバリーのアプリ
- 使うとよい場面
- カートに入ったことを、楽しく確実に伝えたいとき
- 避けたい場面
- たくさんの商品を続けて入れる業務用の画面（毎回待たされる）
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「カートに飛んでいくアニメーション（Add to Cart Animation）」を実装してください。 動き：ボタンを押すと、商品写真の複製を作り、小さくしながら弧を描くように右上のカートのアイコンまで動かす。着いたらカートのアイコンを少し弾ませ、バッジの数字を1つ増やす。 使う部品：Web Animations API で写真の複製をカートまで動かす
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | Web Animations API で写真の複製をカートまで動かす |
|---|---|
| iPhoneアプリなら | matchedGeometryEffect か、自作のアニメーション |
| Androidアプリなら | Animatable で位置と大きさを動かす |
| Flutterなら | Overlay ＋ AnimatedPositioned（add_to_cart_animation パッケージ） |
| React Nativeなら | Reanimated で位置と大きさを動かす |