react+gsap实现爱心点赞动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：react+gsap实现爱心点赞动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background: #b8e3ff;
}

main {
  position: relative;
}

.Button {
  width: 540px;
}
.Button .st0 {
  fill: #ed4956;
}
.Button .st1 {
  fill: #d83d50;
}
.Button #button {
  cursor: pointer;
  pointer-events: all;
}

.Count {
  position: absolute;
  right: 160px;
  top: 94px;
  font-family: "Pacifico";
  font-size: 72px;
  color: white;
  filter: drop-shadow(-3px 3px 0 #d83d50);
  pointer-events: none;
}

.Heart {
  position: absolute;
  width: 80px;
  left: 174px;
  top: 130px;
  filter: drop-shadow(-3px 3px 0 #d83d50);
  pointer-events: none;
}
.Heart .st0 {
  fill: white;
}
.Heart .st1 {
  fill: #dbdbdb;
}
</style>

</head>

<body>
    <div id="root"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/sass.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.15.4.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.15.4.2.js"></script>
    <script>
        const App = () => {
  let count = 0;

  const handleClick = e => {
    modelClick(e.currentTarget);
  };

  const modelClick = button => {
    count++;
    document.querySelector(".Count").textContent = count;

    if (count === 3) {
      viewBreakPhase1();
    } else if (count === 6) {
      viewBreakPhase2();
    } else if (count === 12) {
      viewBreakPhase3();
    } else if (count === 18) {
      viewBreakPhase4();
    } else if (count === 24) {
      viewBreakPhase5();
    }

    let clicks = 1;

    button.addEventListener("click", () => {
      clicks++;
    });

    viewClickButton();
    viewClickCount();

    setTimeout(() => {
      if (clicks === 1) {
        viewClickHeart();
      }
    }, 300);
  };

  const viewBreakPhase1 = () => {
    const tl = gsap.timeline();

    tl.to("#button #bottom", {
      duration: 1,
      ease: "back.out(4)",
      y: 12 });

  };

  const viewBreakPhase2 = () => {
    const tl = gsap.timeline();

    tl.to("#button #top", {
      duration: 1,
      ease: "back.out(4)",
      y: -12 });

  };

  const viewBreakPhase3 = () => {
    const tl1 = gsap.timeline();

    tl1.to("#button #bottom-1", {
      duration: 1,
      ease: "back.out(4)",
      x: -12,
      y: 4 });


    tl1.to("#button #top-3", {
      duration: 1,
      delay: -0.6,
      ease: "back.out(4)",
      x: 12,
      y: -4 });


    tl1.to("#tail", {
      duration: 1,
      delay: -1,
      ease: "back.out",
      rotate: 180,
      y: 200,
      opacity: 0 });

  };

  const viewBreakPhase4 = () => {
    const tl1 = gsap.timeline();

    tl1.to(".Count", {
      duration: 1,
      opacity: 0 });


    tl1.to(".Heart", {
      duration: 1,
      delay: -0.6,
      x: 58 });


    tl1.to("#button #top-1", {
      duration: 1,
      ease: "back.out",
      x: -12,
      y: -4 });


    tl1.to("#button #bottom-3", {
      duration: 1,
      delay: -0.6,
      ease: "back.out",
      x: 12,
      y: 4 });


    tl1.to("#button #bottom-5", {
      duration: 1,
      delay: -0.6,
      ease: "back.out",
      x: 12,
      y: 4 });


    const tl2 = gsap.timeline({ repeat: -1 });

    tl2.to(".shake1", {
      duration: 0.05,
      rotate: 3,
      transformOrigin: "center" });


    tl2.to(".shake1", {
      duration: 0.05,
      rotate: -3,
      transformOrigin: "center" });


    tl2.to(".shake2", {
      duration: 0.05,
      delay: -0.1,
      rotate: -3,
      transformOrigin: "center" });


    tl2.to(".shake2", {
      duration: 0.05,
      rotate: 3,
      transformOrigin: "center" });

  };

  const viewBreakPhase5 = () => {
    gsap.set("#button", {
      pointerEvents: "none" });


    gsap.to("#heart-base", {
      fill: "#ed4956" });


    gsap.to(".Heart", {
      filter: "none" });


    gsap.to("#heart-shadow-1, #heart-shadow-2", {
      opacity: 0 });


    gsap.to("#button #top-1", {
      duration: 0.6,
      ease: "back.in",
      x: -740,
      y: -720,
      opacity: 0 });


    gsap.to("#button #top-2", {
      duration: 0.6,
      ease: "back.in",
      y: -720,
      opacity: 0 });


    gsap.to("#button #top-3", {
      duration: 0.6,
      ease: "back.in",
      x: -740,
      y: -420,
      opacity: 0 });


    gsap.to("#button #mid-1,  #mid-2, #mid-3", {
      duration: 0.6,
      ease: "back.in",
      x: 740,
      y: 720,
      opacity: 0 });


    gsap.to("#button #bottom-1", {
      duration: 0.6,
      ease: "back.in",
      x: -740,
      y: 720,
      opacity: 0 });


    gsap.to("#button #bottom-2", {
      duration: 0.6,
      ease: "back.in",
      y: 720,
      opacity: 0 });


    gsap.to("#button #bottom-3", {
      duration: 0.6,
      ease: "back.in",
      y: 720,
      opacity: 0 });


    gsap.to("#button #bottom-4", {
      duration: 0.6,
      ease: "back.in",
      x: 440,
      y: 720,
      opacity: 0 });


    gsap.to("#button #bottom-5", {
      duration: 0.6,
      ease: "back.in",
      x: 740,
      y: 720,
      opacity: 0 });


    setInterval(() => {
      viewClickHeart();
    }, 1000);
  };

  const viewClickButton = () => {
    const tl = gsap.timeline();

    tl.to(".Button, .Heart", {
      duration: 0.1,
      ease: "back.out",
      transformOrigin: "center",
      scale: 0.9 });


    tl.to(".Button, .Heart", {
      duration: 0.2,
      ease: "back.out(4)",
      transformOrigin: "center",
      scale: 1 });

  };

  const viewClickHeart = () => {
    const tl = gsap.timeline();

    tl.to(".Heart", {
      duration: 0.2,
      scale: 1.2 });


    tl.to(".Heart", {
      duration: 0.2,
      ease: "back.out",
      scale: 1 });


    tl.to(".Heart", {
      duration: 0.2,
      scale: 1.2 });


    tl.to(".Heart", {
      duration: 0.2,
      ease: "back.out",
      scale: 1 });

  };

  const viewClickCount = () => {
    const tl = gsap.timeline();

    tl.to(".Count", {
      duration: 0.2,
      ease: "back.out",
      scale: 1.2 });


    tl.to(".Count", {
      duration: 0.2,
      ease: "back.out(4)",
      scale: 1 });

  };

  const viewFloat = () => {
    const tl1 = gsap.timeline({ repeat: -1 });

    tl1.to("#button, #tail", {
      duration: 1,
      ease: "power1.inOut",
      y: -18 });


    tl1.to("#button, #tail", {
      duration: 1,
      ease: "power1.inOut",
      y: 0 });


    const tl2 = gsap.timeline({ repeat: -1 });

    tl2.to(".Heart, .Count", {
      duration: 1,
     .........完整代码请登录后点击上方下载按钮下载查看