クリックしたらアニメーションが出るようにしてみた！

はじめに

初めましての人もそうでない人もこんにちは！

さて2月になり寒さがかなり増してきましたね〜

私は、こたつに入りながらスマホゲームをしたりPCでYoutubeを見たりだらだら冬を越す予定です！
さて、ゲームによってはバレンタインイベントがあったのではないでしょうか？
そこで思ったこととしてはゲームってクリックする時なにかしらのアニメーションがでるなーと思いました！

そこで、このクリックした時のアニメーションを今作ることができれば今後の開発がちょっとだけオシャレになるのでは？と閃きました！

そうゆうことで今回は「TypeScriptとCSSを使ってクリックした時にアニメーションを出す」というプログラムを書いていこうと思います！

準備

さて今回はアニメーションを出すための画像を準備したいと思います！
今回使用する画像はこれ！

ファイル名は「mahoujin.png」です！

この画像でなくても皆さんお好きな画像を使って開発してみてください！

今回はReactとTypeScriptを使うので以下のコマンドをターミナルにコピペしてください！

npx create-react-app effect --template typescript
cd effect
npm start

作ってみよう！

effect/srcにあるApp.tsxを開いてください！
そして以下のコードをコピペしてください

回転エフェクト

src/App.tsx

import React, { useState, useRef } from 'react';
import './App.css';

interface Animation {
  id: number;
  x: number;
  y: number;
}

const App: React.FC = () => {
  const [animations, setAnimations] = useState<Animation[]>([]);
  const [nextId, setNextId] = useState(1);
  const containerRef = useRef<HTMLDivElement>(null);

  const handleClick = (e: React.MouseEvent) => {
    const { clientX, clientY } = e;
    const newAnimation = {
      id: nextId,
      x: clientX,
      y: clientY,
    };
    setAnimations((prevAnimations) => [...prevAnimations, newAnimation]);
    setNextId((prevId) => prevId + 1);

    setTimeout(() => {
      setAnimations((prevAnimations) =>
        prevAnimations.filter((anim) => anim.id !== newAnimation.id)
      );
    }, 2000);
  };

  return (
    <div
      ref={containerRef}
      onClick={handleClick}
      style={{ position: 'relative', width: '100vw', height: '100vh' }}
    >
      {animations.map((animation) => (
        <img
          key={animation.id}
          className="animated-image"
          src="/mahoujin.png"
          alt="Rotating"
          style={{
            left: `${animation.x}px`,
            top: `${animation.y}px`,
          }}
        />
      ))}
    </div>
  );
};

export default App;

src/App.css

.animated-image {
  position: absolute;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  animation: rotate-in 1s linear, rotate-out 1s linear 1s;
}

@keyframes rotate-in {
  from {
    transform: translate(-50%, -50%) rotate(0deg) scale(0);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
  }
}

@keyframes rotate-out {
  from {
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
  }
  to {
    transform: translate(-50%, -50%) rotate(720deg) scale(0);
  }
}

.fade-out {
  animation: rotate-out 1s linear forwards;
}

次にmahoujin.pngをpublicフォルダの中に入れて完成です！

おわりに

いかがだったでしょうか？
これが皆さんの開発物に良い刺激を与えれば嬉しいです！
またどこかの記事でお会いしましょう！