[React.js] 애니메이션으로 등속운동 하는 박스 만들기

이번에는 속도 v = s/t 를 공식을 이용해 박스를 만들어보겠습니다.

+, - 버튼으로 시간, 거리를 조절하겠습니다.

 

이제 어떻게 만들지 한번 생각해봅니다.

구상

A 위치에서 B 위치로 이동하는 박스를 하나 만들어 줍니다.

이건 css 애니메이션을 이용해 박스 위치를 옮겨주면 될 것 같습니다.

속도에서 시간은 animation-duration 값

거리는 각 key-Frames 위치를 사용하면 됩니다.

css를 다루는 것이니 styled-components 사용하면 더 편할 것 같습니다.

yarn add styled-components

컴포넌트는 시간과 거리를 state로 갖습니다.

이 값은 css에서 사용되고 버튼 클릭으로 변경하게 합니다.

코딩

Velocity.js

import React, { useState } from 'react';
import styled from 'styled-components';

const Box = styled.div`
    width: 100px;
    height: 100px;
    position: relative;
    background-color: yellow;
    
    animation-name: velocity;
    animation-duration: ${props => props.time+'s'};
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    @keyframes velocity{
        from{
            top: 0;
            left: 0;
        }
        to{
            top: 0;
            left: ${props => props.distance*100+'px'};
        }
    }
   
`;

const Velocity = () => {
    const [time, setTime] = useState(0);
    const [distance, setDistance] =useState(0);

    return (
        <div>
            <Box time={time} distance={distance}></Box>
            <div>시간</div>
            <button onClick={()=>{setTime(time+1)}}>+</button>
            <button onClick={()=>{time>0 && setTime(time-1)}}>-</button>
            <div>거리</div>
            <button onClick={()=>{setDistance(distance+1)}}>+</button>
            <button onClick={()=>{distance>0 && setDistance(distance-1)}}>-</button>
            <h3>Velocity = {time<=0 ? 0 : distance*100/time}px/s</h3>
            <h3>Accelation = 0</h3>
            <h4>time : {time}s</h4>
            <h4>distance : {distance*100}px</h4>
            
        </div>
    );
};

export default Velocity;

완성