文档

文档

Vue

useTime

useTime

useTime 返回一个motion 值它会每帧更新一次,值为自创建以来经过的时间(毫秒)。

这在生成永久动画时尤其有用。

<script setup>
const time = useTime()
const rotate = useTransform(time, [0, 4000], [0, 360], { clamp: false })
</script>

<template>
  <motion.div :style="{ rotate }" />
</template>

用法

从 Motion 导入

import { useTime } from "motion-v"

当调用 useTime 时,它会创建一个新的 motion 值。此值将每帧更新,值为自创建以来的时间。

你可以直接使用它,或者与其他 motion 值钩子组合使用。

const time = useTime()
const rotate = useTransform(
  time,
  [0, 4000], // For every 4 seconds...
  [0, 360], // ...rotate 360deg
  { clamp: false }
)

useTime 返回一个motion 值它会每帧更新一次,值为自创建以来经过的时间(毫秒)。

这在生成永久动画时尤其有用。

<script setup>
const time = useTime()
const rotate = useTransform(time, [0, 4000], [0, 360], { clamp: false })
</script>

<template>
  <motion.div :style="{ rotate }" />
</template>

用法

从 Motion 导入

import { useTime } from "motion-v"

当调用 useTime 时,它会创建一个新的 motion 值。此值将每帧更新,值为自创建以来的时间。

你可以直接使用它,或者与其他 motion 值钩子组合使用。

const time = useTime()
const rotate = useTransform(
  time,
  [0, 4000], // For every 4 seconds...
  [0, 360], // ...rotate 360deg
  { clamp: false }
)

useTime 返回一个motion 值它会每帧更新一次,值为自创建以来经过的时间(毫秒)。

这在生成永久动画时尤其有用。

<script setup>
const time = useTime()
const rotate = useTransform(time, [0, 4000], [0, 360], { clamp: false })
</script>

<template>
  <motion.div :style="{ rotate }" />
</template>

用法

从 Motion 导入

import { useTime } from "motion-v"

当调用 useTime 时,它会创建一个新的 motion 值。此值将每帧更新,值为自创建以来的时间。

你可以直接使用它,或者与其他 motion 值钩子组合使用。

const time = useTime()
const rotate = useTransform(
  time,
  [0, 4000], // For every 4 seconds...
  [0, 360], // ...rotate 360deg
  { clamp: false }
)
保持关注

订阅以获取最新新闻和更新。

保持关注

订阅以获取最新新闻和更新。