javascript - 循环气泡动画

Question

我正在做一个 React 网站，但对动画领域是个新手。

我正在尝试完成此页面的英雄部分的效果:https://stripe.com/us/customers ，其中有一个从右向左滚动的无限循环的圆圈，每个圆圈都有不同的图像和大小。

我应该如何使用 React 开始无限循环的对象动画？有没有我可以使用的库，或者有没有我可以学习的 React 代码片段示例？

Answer 1

您可以使用纯 CSS 来完成此操作(查看这些疯狂的纯 CSS 动画示例，您可以 fork https://envato.com/blog/pure-css-animation-snippets/)

但 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;

每个 float 图标在其状态下都有图像、背景颜色和位置。为您的页面创建尽可能多的内容并将它们存储在一个数组中。您可以使用 changePosition 函数更改位置，该函数设置状态并更新导致 DOM 再次呈现。让它漂浮得漂亮需要一些工作，但如果你计算正确并创造一个好的位置变化。这将在 React 技术意义上起作用，这是一个类似 React 的设计，用于创建组件以使用单一责任原则完成这些任务。让我知道事情的后续。希望对 friend 有帮助。

干杯!