如何将条件添加到成帧器运动动画中

Question

我是新手，我制作了三张牌，并使用了动画的帧器运动。我想当我点击一张卡片时，动画开始了，但所有三张卡片上的动画都开始了我该如何为成帧器运动动画添加条件

沙箱链接：https://codesandbox.io/s/angry-microservice-tllp80?file=/src/App.js

这是我的代码

import "./styles.css";
import { useState,useEffect } from "react";
import { motion, useAnimationControls } from "framer-motion"

export default function App() {
const [elements,setElements]=useState(['one','two','three'])
const controls = useAnimationControls()

return (
<section className="App">
{
elements.map((Element,index)=>(
<motion.div key={index}  animate={controls} onClick={()=>controls.start({ scale: 2 })}>{Element}</motion.div>
))
}   
</section>
);
} 

Answer 1

您需要做的是创建一个处理动画控件本身的组件，并在元素映射上使用它

这里有一个例子：

import "./styles.css";
import { useState,useEffect } from "react";
import { motion, useAnimationControls } from "framer-motion"

const Card = ({index, Element}) => {
const controls = useAnimationControls()
return <motion.div key={index}  animate={controls} onClick={()=>controls.start({ scale: 2 })}>{Element}</motion.div>
}

export default function App() {
const [elements,setElements]=useState(['one','two','three'])

return (
<section className="App">
{
elements.map((Element,index)=><Card index={index} Element={Element}/>)
}   
</section>
);
}