时间戳

首页 > 解决方案 > 如何将背景 JS 动画集成到我的 react 应用程序中？

javascript - 如何将背景 JS 动画集成到我的 react 应用程序中？

问题描述

我正在尝试将萤火虫动画添加到 react 中的组件中（我尝试使用的代码在这里https://codepen.io/celli/pen/xZgpvN）。如果我有一个简单的 HTML / CSS / Javascript 设置，我会知道该怎么做，但我对如何在 React 的上下文和单个组件的范围内集成这个动画感到困惑。我把下面的代码放在哪里？如何在组件中引用它？


var total=40,
    container=document.getElementById('container'),
    w=window.innerWidth,
    h=window.innerHeight,
    Tweens=[],
    SPs=1;



for (var i=total;i--;){ 
    var Div=document.createElement('div');
    TweenLite.set(Div,{attr:{class:'dot'},x:R(w),y:R(h),opacity:0});
    container.appendChild(Div); Anim(Div);  Tweens.push(Div);
};

function Anim(elm){ 
    elm.Tween=TweenLite.to(elm,R(20)+10,{bezier:{values:[{x:R(w),y:R(h)},{x:R(w),y:R(h)}]},opacity:R(1),scale:R(1)+0.5,delay:R(2),onComplete:Anim,onCompleteParams:[elm]})
};

for(var i=total;i--;){
  Tweens[i].Tween.play()};


function R(max){return Math.random()*max};

其次，我在哪里把 CSS 代码放在下面？

body{
  background-color: #222222;
  overflow:hidden;
}

.dot{
  width:4px;
  height:4px;
  position:absolute;
  background-color:#ff00cc;
  box-shadow:0px 0px 10px 2px #ff00cc;
  border-radius: 20px;
  z-index:2;
}

#container {
width:100%; 
height:100%;
}

标签： javascriptreactjscss-animationsreact-animations

解决方案

React 关于与其他库集成的页面可能是最好的起点。

首先，这是一个可以直接在 StackOverflow 上运行的示例。

const {
  useRef,
  useLayoutEffect,
} = React
// import React, { useRef, useLayoutEffect } from 'react';

function R(max) {
  return Math.random() * max
};

function Background(props) {
  const {
    total = 40
  } = props
  const ref = useRef()

  useLayoutEffect(() => {
    const contanier = ref.current
    const w = window.innerWidth
    const h = window.innerHeight
    const dots = []

    function addAnimation(elm) {
      return TweenLite.to(elm, R(20) + 10, {
        bezier: {
          values: [{
            x: R(w),
            y: R(h)
          }, {
            x: R(w),
            y: R(h)
          }]
        },
        opacity: R(1),
        scale: R(1) + 0.5,
        delay: R(2),
        onComplete: addAnimation,
        onCompleteParams: [elm]
      })
    }

    for (let i = 0; i < total; i++) {
      const div = document.createElement('div')
      TweenLite.set(div, {
        attr: {
          class: 'dot'
        },
        x: R(w),
        y: R(h),
        opacity: 0
      })
      container.appendChild(div);
      const dot = addAnimation(div)
      dot.play()
      dots.push(dot)
    }
    
    return () => {
      // Clear animations and whatever here
      dots.forEach(dot=>dot.kill())
      container.innerHTML = ''
    }
  }, [total])
  return <div className="fireflies" ref={ref} />
}

function App() {
  return <Background total={25} / >
}

ReactDOM.render( <App / > , document.querySelector("#container"))
body {
  background-color: #222222;
  overflow: hidden;
}

.dot {
  width: 4px;
  height: 4px;
  position: absolute;
  background-color: #ff00cc;
  box-shadow: 0px 0px 10px 2px #ff00cc;
  border-radius: 20px;
  z-index: 2;
}

.fireflies {
  width: 100%;
  height: 100%;
}
<div id="container" />

<!-- React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<!-- TweenMax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>

现在解释。

一个快速的旁注：前面提到的与其他库集成页面现在使用类组件，但我喜欢使用功能组件，因为钩子是ₜₕₑ fᵤₜᵤᵣₑ。我还将一些代码从旧的 es5 转换为新的现代 es6，因为现代 js 是ₜₕₑ fᵤₜᵤᵣₑ。

基本思想是，当你的组件第一次被挂载时，你在一个useLayoutEffect钩子中运行所有的初始设置。这基本上归结为将您当前的大部分 js 扔到该钩子中。

组件唯一需要渲染的是包含所有点的 div。

这里的优点是，通过 react，您可以使用 props 控制动画的各个方面——在示例中通过允许将total变量作为 prop 传递来进行演示。

此外，由于 React 提供了一种通过useRef钩子获取对 dom 节点的引用的方法，因此您可以使用它来代替document.querySelector('#contanier').

我在哪里放 CSS

最好的地方真的取决于你如何设置你的反应应用程序。

如果你在某个地方有一个 HTML 模板，你可以像在任何其他项目中一样在其中放置一个样式标签或一个链接标签。

如果您使用 create-react-app 或有类似的设置，那么您可以通过导入样式表、使用css 模块或修改src/index.css.

另一种选择是使用 css-in-js 解决方案，例如emotionorstyled-components但这些可能需要一点时间来适应。

推荐阅读