Есть ли способ выстроить компонентные анимации в React? ⇐ CSS

[Anonymous]

В настоящее время я делаю игру, в которой используется анимированная марионетка, занимающаяся марширующей анимацией. Я хочу, чтобы этот компонент руки и ноги перемещался друг с другом, но часть игры требует, чтобы анимация руки была приостановлена ​​с случайными интервалами, когда она остановлена, он становится вне синхронизации с другой.

Код: Выделить всё

import { useEffect, useState } from 'react';
import SillySoldier from './components/SillySoldier';
import SillyOfficer from './components/SillyOfficer';
import './App.css';

function App() {
const [marching, isMarching] = useState(true);
const [inspecting, isInspecting] = useState(false);
const [soldiers, setSoldier] = useState([
{id: 1, silly: false, caught: false},
{id: 2, silly: false, caught: false},
{id: 3, silly: false, caught: false}
]);
const inspect = () => {
isMarching(false);
isInspecting(true);
}
const reset = () => {
isMarching(true);
isInspecting(false);
setSoldier([{
silly: false,
caught: false
}, ...soldiers])
}
const hasWon = () => {
if(soldiers[0].caught===false||soldiers[1].caught===false||soldiers[2].caught===false){
return false;
}
return true
}
useEffect(() => {
setTimeout(() => {
isMarching(() => true);
isInspecting(() => false);
}, 2000);
});

return (

Silly Soldiers
{hasWon() ?

You Win!!
Reset

:



}


);
}

export default App;
< /code>
sillysoldier.js
import { useEffect, useState } from 'react';
import Body from './Body';
import Arm from './Arm';
import Leg from './Leg';

function SillySoldier(props){
const [silly, isSilly] = useState(false);
const [caught, isCaught] = useState(false);
const [hidden, hide] = useState(false);
var caution = Math.floor(Math.random() * (6 - 1 + 1)) + 1;;

useEffect(() => {
let timer = setTimeout(() => {
if(props.inspecting === false) {
isSilly(() => true)
}
}, caution*1000);
return () => clearTimeout(timer)
});
useEffect(() => {
if(props.inspecting && silly){
isCaught(true);
}
}, [props.inspecting, silly]);
useEffect(() => {
let timer = setTimeout(() => {
isSilly(() => false);
if(caught) {
hide(true);
props.soldier.caught = hide;
}
}, 1000);
return () =>  clearTimeout(timer)
});
var standard = {
body: "/soldiers/Silly_Soldier1.png",
leg1: "/soldiers/Soldier_Leg_Left1.png",
leg2: "/soldiers/Soldier_Leg_Right1.png",
arm1: "/soldiers/Soldier_Arm1.png"
}
var fooling = {
body: "/soldiers/Silly_Soldier2.png",
leg1: "/soldiers/Soldier_Leg_Left1.png",
leg2: "/soldiers/Soldier_Leg_Right1.png",
arm1: "/soldiers/Soldier_Arm2.png"
}
var loss = {
body: "/soldiers/Silly_Soldier3.png",
leg1: "/soldiers/Soldier_Leg_Left1.png",
leg2: "/soldiers/Soldier_Leg_Right1.png",
arm1: "/soldiers/Soldier_Arm2.png"
}
const status = caught ? (loss) : (silly ? (fooling) : (standard))
return (
hidden ? () :
(





)
)
}

export default SillySoldier
< /code>
arm.js
function Arm(props) {
return (

[img]{props.img} alt=[/img]

)
}
export default Arm;
< /code>
leg.js
function Leg(props) {
return (

[img]{props.img} alt=[/img]

)
}
export default Leg;
< /code>
css < /p>
.arm {
position: absolute;
display: inline-block;
top: 55%;
padding-left: 6.25%;
transform-origin:65% 40%;
}

.leg {
outline-color: blue;
position: absolute;
display: inline-block;
top: 72%;
padding-left: 6.25%;
transform-origin:60% 30%;
}

#left{
animation: march_left 3s linear infinite;
}

#right{
animation: march_right 3s linear infinite;
}

@keyframes march_left {
from {
transform: rotate(0deg);
transition: transform 150ms ease;
} 16% {
transform: rotate(-70deg);
transition: transform 150ms ease;
} 32% {
transform: rotate(-70deg);
transition: transform 150ms ease;
} 48% {
transform: rotate(0deg);
transition: transform 150ms ease;
} to {
transform: rotate(0deg);
transition: transform 150ms ease;
}
}

@keyframes march_right {
from {
transform: rotate(0deg);
transition: transform 150ms ease;
} 48% {
transform: rotate(0deg);
transition: transform 150ms ease;
} 64% {
transform: rotate(-70deg);
transition: transform 150ms ease;
} 80% {
transform: rotate(-70deg);
transition: transform 150ms ease;
} to {
transform: rotate(0deg);
transition: transform 150ms ease;
}
}

Я ищу способ связать анимации для левой/правой руки и ног, чтобы они всегда синхронизировались?

Подробнее здесь: https://stackoverflow.com/questions/797 ... s-in-react