ルーピング泡アニメーション

Question

私は反応ウェブサイトではなく、アニメーションエリアには新しく取り組んでいます。

私はこのページのヒーローセクションのような効果を達成しようとしています：https://stripe.com/us/customersここでは、右から左にスクロールして、それぞれ異なるイメージとサイズの無限ループがあります。

Reactを使用してオブジェクトアニメーションのこの無限ループをどのように始めるべきですか？私が使用できるライブラリがありますか、または私が学ぶことができるリアクションコードスニペットサンプルがありますか？あなたは、この純粋に使用してCSS（あなたがhttps://envato.com/blog/pure-css-animation-snippets/をフォークすることができ、これらの狂気の純粋なCSSアニメーションの例をご覧ください）

しかしReactJSアプローチを達成することができるかもしれ

Answer 1

は... 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; 

各フローティングアイコンには、イメージ、背景色、位置があります。ページに必要な数だけ作成し、配列に格納します。状態を設定するchangePosition関数を使用して位置を変更したり、DOMの再描画を引き起こす更新を行うことができます。あなたが正しく計算し、良い位置の変更を作成する場合、それはすべてかなり浮かんで取得するいくつかの仕事を取るが、しかし。これは、リアクションの技術的意味では機能しますが、これは、単一の責任の原則を使用してこれらのタスクを達成するためのコンポーネントを作成するそのような問題のためのデザインのようなリアクションです。それがどうなるか教えてください。これが友人を助けることを望みます。

乾杯！