useAnimation
useAnimationは、CSSのkeyframesのように記述してアニメーションを実装するカスタムフックです。
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} />
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。使い方
import { useAnimation } from "@yamada-ui/react"
import { useAnimation } from "@/components/ui"
import { useAnimation } from "@workspaces/ui"
const animation = useAnimation()
テーマのトークンを使う
テーマのアニメーションを使用する場合は、引数に値を設定します。
const animation = useAnimation("gradient")
return <Box w="full" h="xs" animation={animation} />
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。デフォルトでは、アニメーションのトークンは定義されていません。
複数のアニメーションを使う
複数のアニメーションを使う場合は、引数を配列に設定します。
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>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。レスポンシブデザインを使う
レスポンシブデザインを使う場合は、animationにオブジェクトを設定します。
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 }}
/>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。カラーモードを使う
カラーモードを使う場合は、animationに配列を渡します。
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]} />
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。