useAnimation
useAnimationは、CSSのkeyframesのように記述してアニメーションを実装するカスタムフックです。
インポート
import { useAnimation } from "@yamada-ui/react"
使い方
useAnimationは、引数にkeyframesなどを設定し、生成されたanimationをpropsに渡します。
keyframes: アニメーションの流れに沿ったキーフレーム(または中間地点)のスタイルを設定します。各スタイルの値は、Yamada UIのスタイルシステムやテーマのトークンが使用できます。duration: 1回のアニメーションサイクルに要する時間の長さを設定します。timingFunction: アニメーションの進め方を設定します。これは加速曲線を定義することで、キーフレーム間のアニメーションをどのように進めていくかを設定します。delay: 要素が読み込まれてからアニメーションを始めるまでの遅延時間を設定します。iterationCount: アニメーションを繰り返す回数を設定します。アニメーションを無限に繰り返すにはinfiniteを指定してください。direction: アニメーションのシーケンス完了時に、逆方向にアニメーションして繰り返すか、始めの状態にリセットしてアニメーションを繰り返すかを設定します。fillMode: アニメーションの実行前後に、指定したスタイルを適用するかを設定します。playState: アニメーションを一時停止したり、再開したりするかを設定します。
アニメーションの設定は、@keyframesとCSSアニメーションの使用を基本としています。
編集可能な例
const animation = useAnimation({ keyframes: { "0%": { bg: "red.500", }, "20%": { bg: "green.500", }, "40%": { bg: "purple.500", }, "60%": { bg: "yellow.500", }, "80%": { bg: "blue.500", }, "100%": { bg: "red.500", }, }, duration: "10s", iterationCount: "infinite", timingFunction: "linear", }) return <Box w="full" h="xs" animation={animation} />
アニメーションをもっと学びたい場合は、こちらをご覧ください。
複数のアニメーションを使う
編集可能な例
const animation = useAnimation([ { keyframes: { "0%": { bg: "red.500", }, "20%": { bg: "green.500", }, "40%": { bg: "purple.500", }, "60%": { bg: "yellow.500", }, "80%": { bg: "blue.500", }, "100%": { bg: "red.500", }, }, duration: "10s", iterationCount: "infinite", timingFunction: "linear", }, { keyframes: { "0%": { h: "xs", }, "50%": { h: "md", }, "100%": { h: "xs", }, }, duration: "10s", iterationCount: "infinite", timingFunction: "linear", }, { keyframes: { "0%": { w: "full", }, "50%": { w: "50%", }, "100%": { w: "full", }, }, duration: "10s", iterationCount: "infinite", timingFunction: "linear", }, ]) return ( <Box h="md"> <Box w="full" h="xs" animation={animation} /> </Box> )
レスポンシブスタイル
編集可能な例
const desktopAnimation = useAnimation({ keyframes: { "0%": { bg: "red.500", }, "20%": { bg: "green.500", }, "40%": { bg: "purple.500", }, "60%": { bg: "yellow.500", }, "80%": { bg: "blue.500", }, "100%": { bg: "red.500", }, }, duration: "10s", iterationCount: "infinite", timingFunction: "linear", }) const tabletAnimation = useAnimation({ keyframes: { "0%": { bg: "cyan.500", }, "20%": { bg: "emerald.500", }, "40%": { bg: "pink.500", }, "60%": { bg: "amber.500", }, "80%": { bg: "sky.500", }, "100%": { bg: "cyan.500", }, }, duration: "10s", iterationCount: "infinite", timingFunction: "linear", }) return ( <Box w="full" h="xs" animation={{ base: desktopAnimation, md: tabletAnimation }} /> )
カラーモード
編集可能な例
const lightAnimation = useAnimation({ keyframes: { "0%": { bg: "red.500", }, "20%": { bg: "green.500", }, "40%": { bg: "purple.500", }, "60%": { bg: "yellow.500", }, "80%": { bg: "blue.500", }, "100%": { bg: "red.500", }, }, duration: "10s", iterationCount: "infinite", timingFunction: "linear", }) const darkAnimation = useAnimation({ keyframes: { "0%": { bg: "red.800", }, "20%": { bg: "green.800", }, "40%": { bg: "purple.800", }, "60%": { bg: "yellow.800", }, "80%": { bg: "blue.800", }, "100%": { bg: "red.800", }, }, duration: "10s", iterationCount: "infinite", timingFunction: "linear", }) return <Box w="full" h="xs" animation={[lightAnimation, darkAnimation]} />
カラーモードをもっと学びたい場合は、こちらをご覧ください。
GitHubでこのページを編集する