炫酷小圈圈

博主刚刚学GSAP, 就将所学到的知识分享出来，希望对各位有所帮助！

借用GSAP 官网来说明这个GSAP能给前端带来什么用途。
The GreenSock Animation Platform (GSAP) animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery).
博主理解来总结一下：使用GSAP能使前端网页做的很酷炫。

现在，博主准备要用React来实现一个样式, 如下所示：
在这里插入图片描述
是不是觉得很酷炫呢？下面就用代码来实现这个效果。

这里就不讲有关React 的知识点，如果没了解过React, 就点击React 学习来获得一些概念知识。

博主是用VS Code来敲代码的，得先在Terminal 里安装Gsap library, 这里博主就用

npm install gsap

安装好之后，就开始实现这个炫酷demo了。

下面是App.js 文件：

// App.js 文件
import React from 'react';
import './App.css';

import Gsapcircle from './Gsapcircle.js';

function App() {
  return (
    <div> 
      <Gsapcircle/>
    </div>
  );
}

export default App;

创建一个名为Gsapcircle.js 文件

// Gsapcircle.js 文件
import React, {useRef, useEffect, useState} from 'react'
import {TweenMax, Power3} from 'gsap'
import './Gsapcircle.css'

function Gsapcircle() {
    let app = useRef(null)
    let circle = useRef(null)
    let circleRed = useRef(null)
    let circleBlue = useRef(null)
  
    const [state, setState] = useState(false);
  
    // Yellow circle
    const handleExpand = () => {
      TweenMax.to(circle, .8, {width: 200, height: 200, ease: Power3.easeOut})
      setState(true)
    }
  
    const handleShrink = () => {
      TweenMax.to(circle, .8, {width: 75, height: 75, ease: Power3.easeOut})
      setState(false)
    }
  
    // Red circle
    const handleExpandRed = () => {
      TweenMax.to(circleRed, .8, {width: 200, height: 200, ease: Power3.easeOut})
      setState(true)
    }
  
    const handleShrinkRed = () => {
      TweenMax.to(circleRed, .8, {width: 75, height: 75, ease: Power3.easeOut})
      setState(false)
    }
  
    // Blue Circle
    const handleExpandBlue= () => {
      TweenMax.to(circleBlue, .8, {width: 200, height: 200, ease: Power3.easeOut})
      setState(true)
    }
  
    const handleShrinkBlue = () => {
      TweenMax.to(circleBlue, .8, {width: 75, height: 75, ease: Power3.easeOut})
      setState(false)
    }
  
    useEffect(() => {
      TweenMax.to(app, 0, {css: {visibility: 'visible'}})
      // 第一种写法  
      // TweenMax.from(circle, .8, {opacity: 0, x: 40, ease: Power3.easeOut})
      // TweenMax.from(circleRed, .8, {opacity: 0, x: 40, ease: Power3.easeOut, delay: .2})
      // TweenMax.from(circleBlue, .8, {opacity: 0, x: 40, ease: Power3.easeOut, delay: .4})

      // 第二种写法
      TweenMax.staggerFrom([circle, circleRed, circleBlue], .8, {opacity: 0, x: 40, ease: Power3.easeOut}, .2)
    }, [])

    return (
        <div
            ref = {el => app = el}
            className="Gsapcircle">
            <header className="App-header">
                <div className="circle-container">
                    <div
                        onClick = {state !== true ? handleExpand: handleShrink}
                        ref = {el => circle = el}
                        className="circle">
                    </div>
                    <div 
                        onClick={state !== true ? handleExpandRed : handleShrinkRed}
                        ref={el => circleRed = el}
                        className="circle red">
                    </div>
                    <div 
                        onClick={state !== true ? handleExpandBlue : handleShrinkBlue}
                        ref={el => circleBlue = el}
                        className="circle blue">
                    </div>
                </div>
            </header>
        </div>
    )
}

export default Gsapcircle

再创建Gsapcircle.css 文件

// Gsapcircle.css 文件
.circle {
    width: 75px;
    height: 75px;
    border-radius: 100%;
    background-color: yellow;
    margin: 50px;
  }
  
  .circle.red {
    background-color: red;
  }
  
  .circle.blue {
    background-color: blue;
  }

效果再上面。

看到这里，就用点赞或者关注或者留言来代替五星好评~
谢谢各位~

猜你喜欢