我是 Framer 運動的新手，我想要做的是通過移動影像在旋轉時模仿車輪運動
我不知道如何進行這項作業
我已經嘗試過這樣的事情，但它不起作用
const imageRuning :Variants = {
hidden:{
x:"-100vw",
opacity:0
},
visible:{
x:0,
opacity:1,
transitionDuration:"3s"
},
rotation:{
rotate:[180,0],
transition:{
repeat:Infinity,
type:"tween",
ease:"linear"
}
}
}
const HomePage =()=> {
return (
<div className={style.animationContainer}>
<motion.img
className={style.animatedImage}
variants={imageRuning}
initial="hidden"
animate={["visible","rotation"]}
width={100} height={100} src="/static/me.jpg" >
</motion.img>
</div>
)
請任何幫助，
uj5u.com熱心網友回復：
看起來您正在嘗試為具有不同過渡值的兩個屬性 (x和rotate)設定影片。
您一次只能為一個變體制作影片，因此如果您希望它們同時發生，您需要將它們組合成一個變體。幸運的是，您可以通過在transition物件中列出任何影片屬性來為它指定唯一的過渡值。
像這樣：
visible: {
x: 0,
opacity: 1,
rotate: 180, // rotate and x animate in the same variant
transition: {
duration: 3, // default transition duration (applies to x and opacity)
rotate: {
// unique transition for rotate property only
repeat: Infinity,
type: "tween",
ease: "linear"
}
}
}
按照您的設定方式，即使在 x 影片完成 ( repeat: Infinity)后，物件也會繼續旋轉。那是你要的嗎？如果您想要更多控制，您可以查看影片控制。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/365468.html
標籤：javascript css 反应 动画片 成帧运动