2024-06-07
カプセルトイ(ガチャ)演出
抽選を演出するためのアニメーションは、かつてはFlashで作ったりしましたが、今はVIDEO動画で作ったり、アニメーションPNGで作ったり、この例のようにCSSアニメーションで作ったりします。
材料をAdobe Illustratorで作成するとx,y座標が簡単に把握できるので楽です。左上が原点なので、各々のカプセルの中心あたりの座標をtransform-origin
に指定します。
SVG出力したものにidをつけて個別にアニメーションを設定します。これはanimation
ではなく、transform
とtransition
だけで簡単に。
ハンドルをクリックすると演出スタートです。toggle
にしてあるのでもう一度クリックで巻き戻し。