我正在嘗試遍歷一些資料并將它們映射到影片 SVG 變形，但每個組件實體都有不同的路徑。
盡管路徑不同，但 Framer 運動似乎使它們的影片效果完全相同。知道如何使元素之間的影片不同而不是全部匹配嗎？
這是一個描述問題的代碼框。請注意，重復的 Dog blob 正在運行確切的路徑影片，即使路徑傳遞給 <animated.path
uj5u.com熱心網友回復：
在元素的Blob組件內部motion.path，也許d: paths應該是d: gallery.paths？
否則，兩者的影片路徑似乎都是Blob原始的，const paths沒有隨機化randomItem.multiple()，因此完全相同的變形影片。
更新
對于第二個問題，似乎兩者clipPath共享相同的id，這是一個全域值，與 scoped 不同key。這導致只使用了第一個剪輯路徑，并通過賦予它們每個唯一的來解決id。
通過這個修復，我現在可以看到 2 個不同的變形影片，所以希望這可以解決所有問題。
<g>
<defs>
<clipPath id={`shape-${gallery.key}`}>
<LayoutGroup id={gallery.key}>
<motion.path
layoutId={gallery.key}
style={{
fill: "#9565c8",
transform: "translate(200px, 200px)",
}}
animate={{
d: gallery.paths,
repeatCount: Infinity,
autoReverse: true,
}}
transition={{
repeat: Infinity,
ease: "easeInOut",
duration: gallery.paths.length,
reverse: true,
repeatType: "reverse",
bounce: true,
bounceStiffness: 10,
}}
/>
</LayoutGroup>
</clipPath>
</defs>
<image
style={{ position: "absolute", top: 100, left: 100 }}
clipPath={`url(#shape-${gallery.key})`}
xlinkHref={gallery.image}
/>
</g>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/532873.html
標籤：反应动画成帧运动
上一篇：css影片在瀏覽器中不同