루핑 거품 애니메이션

Question

나는 반응하는 웹 사이트에서 일하고 있지만 애니메이션 영역을 처음 사용하고 있습니다.

저는이 페이지의 주인공 섹션과 같은 효과를 얻으려고합니다 : https://stripe.com/us/customers, 오른쪽에서 왼쪽으로 스크롤되는 원의 무한 루프가 있으며 이미지와 크기가 각각 다릅니다.

React를 사용하여 객체 애니메이션의 무한 루프를 시작하려면 어떻게해야합니까? 사용할 수있는 라이브러리가 있습니까, 아니면 내가 배울 수있는 반응 코드 스 니펫 샘플이 있습니까?

Answer 1

이 순수하게 사용하는 CSS

(당신이 https://envato.com/blog/pure-css-animation-snippets/를 포크 할 수 이러한 미친 순수 CSS 애니메이션 예제를 체크 아웃)을 달성 할 수 있습니다하지만 ReactJS 방법이 ..이 FloatingIcon

말할 수 같은 구성 요소를 생성하는 것입니다

import React from 'react'; 

class FloatingIcon extends React.Component { 
constructor(props) { 
    super(props); 
    this.state{ 
     horizontalPosition: "0px", 
     verticalPosition: "0px", 
     imgRef: "http://blah.com/asdf", 
     backgroundColor: "#000000" 
    } 

} 

changePosition(horizontalPosition, verticalPosition) { 
    this.setState({ 
     horizontalPosition, 
     verticalPosition 
    }); 
    } 

render() { 
    return (
    <div> 
     <img 
      href={this.state.imgRef} 
      style={ 
       {translate(this.state.horizontalPosition, 
       this.state.verticalPosition)}, 
       backgroungColor:{this.state.backgroundColor}}> 
     </img> 
    </div> 
    ); 
} 
} 

export default FloatingIcon; 

각 부동 아이콘에는 이미지, 배경색 및 위치가 있습니다. 페이지에 필요한만큼을 만들고 배열에 저장하십시오. DOM을 다시 렌더링하게하는 상태와 업데이트를 설정하는 changePosition 함수를 사용하여 위치를 변경할 수 있습니다. 모든 것을 꽤 뜨게하는 것은 약간의 작업을 필요로 할 것이지만, 정확하게 계산하고 좋은 위치 변화를 만들면. 이것은 React 기술적 인 의미에서 작동 할 것이고 이것은 단일 책임 원칙을 사용하여 이러한 작업을 수행하기위한 구성 요소를 생성하는 그러한 문제에 대한 설계와 같은 React입니다. 어떻게 진행되는지 알려주세요. 희망이 친구를 도와줍니다.

건배!