2024-06-07

カプセルトイ(ガチャ)演出

抽選を演出するためのアニメーションは、かつてはFlashで作ったりしましたが、今はVIDEO動画で作ったり、アニメーションPNGで作ったり、この例のようにCSSアニメーションで作ったりします。

材料をAdobe Illustratorで作成するとx,y座標が簡単に把握できるので楽です。左上が原点なので、各々のカプセルの中心あたりの座標をtransform-originに指定します。

SVG出力したものにidをつけて個別にアニメーションを設定します。これはanimationではなく、transformtransitionだけで簡単に。

ハンドルをクリックすると演出スタートです。toggleにしてあるのでもう一度クリックで巻き戻し。