Question

我在一个反应网站上工作，但对动画领域不熟悉。

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

如何使用React开始使用这个无限循环的对象动画？是否有一些我可以使用的库，或者是否有可以从中学习的反应代码片段样本？

Answer 1

您可以使用纯CSS完成此操作（查看这些疯狂的纯CSS动画示例，您可以分叉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;

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

干杯！

循环泡泡动画

1 个答案: