useMotionTemplate
useMotionTemplate 创建一个新的motion 值从一个字符串模板包含其他 motion 值。
const x = useMotionValue(100) const transform = useMotionTemplate`transform(${x}px)`
每当字符串模板中的 motion 值更新时，返回的 motion 值将更新为最新值。
用法
从 Motion 导入
import { useMotionTemplate } from "motion-v"
useMotionTemplate 是一个“标记模板”，因此它不是像普通函数那样被调用，而是作为字符串模板被调用
useMotionValue``
这个字符串模板可以接受文本和其他 motion 值
<script setup> const blur = useMotionValue(10) const saturate = useMotionValue(50) const filter = useMotionTemplate`blur(${10}px) saturate(${saturate}%)` </script> <template> <motion.div :style="{ filter }" /> </template>
返回的 motion 值的最新值将是字符串模板，其中每个提供的 motion 值都替换为其最新值。
<script setup> const shadowX = useSpring(0) const shadowY = useMotionValue(0) const filter = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))` </script> <template> <motion.div :style="{ filter }" /> </template>
useMotionTemplate 创建一个新的motion 值从一个字符串模板包含其他 motion 值。
const x = useMotionValue(100) const transform = useMotionTemplate`transform(${x}px)`
每当字符串模板中的 motion 值更新时，返回的 motion 值将更新为最新值。
用法
从 Motion 导入
import { useMotionTemplate } from "motion-v"
useMotionTemplate 是一个“标记模板”，因此它不是像普通函数那样被调用，而是作为字符串模板被调用
useMotionValue``
这个字符串模板可以接受文本和其他 motion 值
<script setup> const blur = useMotionValue(10) const saturate = useMotionValue(50) const filter = useMotionTemplate`blur(${10}px) saturate(${saturate}%)` </script> <template> <motion.div :style="{ filter }" /> </template>
返回的 motion 值的最新值将是字符串模板，其中每个提供的 motion 值都替换为其最新值。
<script setup> const shadowX = useSpring(0) const shadowY = useMotionValue(0) const filter = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))` </script> <template> <motion.div :style="{ filter }" /> </template>
useMotionTemplate 创建一个新的motion 值从一个字符串模板包含其他 motion 值。
const x = useMotionValue(100) const transform = useMotionTemplate`transform(${x}px)`
每当字符串模板中的 motion 值更新时，返回的 motion 值将更新为最新值。
用法
从 Motion 导入
import { useMotionTemplate } from "motion-v"
useMotionTemplate 是一个“标记模板”，因此它不是像普通函数那样被调用，而是作为字符串模板被调用
useMotionValue``
这个字符串模板可以接受文本和其他 motion 值
<script setup> const blur = useMotionValue(10) const saturate = useMotionValue(50) const filter = useMotionTemplate`blur(${10}px) saturate(${saturate}%)` </script> <template> <motion.div :style="{ filter }" /> </template>
返回的 motion 值的最新值将是字符串模板，其中每个提供的 motion 值都替换为其最新值。
<script setup> const shadowX = useSpring(0) const shadowY = useMotionValue(0) const filter = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))` </script> <template> <motion.div :style="{ filter }" /> </template>
