Question

我发现这个donut chart animation并且想知道如何在滚动时触发动画？

$(document).ready(function() {
  $('#circle-1').circliful();
  $('#circle-2').circliful();
  $('#circle-3').circliful();
});

body {
  font-family: helvetica;
  font-weight: 100;
  background: white;
  text-align: center;
  padding: 1em;
}
.circle {
  margin: 0 auto;
  display: inline-block;
  margin-right: 1em;
}

<link href="//rawgit.com/pguso/jquery-plugin-circliful/master/css/jquery.circliful.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//rawgit.com/pguso/jquery-plugin-circliful/master/js/jquery.circliful.js"></script>

<div id="circle-1" class="circle" data-dimension="150" data-text="85%" data-info="Sweet" data-width="15" data-fontsize="24" data-percent="85" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="100" data-part="85"></div>
<div id="circle-2" class="circle" data-dimension="150" data-text="30%" data-info="Terrible" data-width="15" data-fontsize="24" data-percent="30" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="100" data-part="30"></div>
<div id="circle-3" class="circle" data-dimension="150" data-text="100%" data-info="Drunk" data-width="15" data-fontsize="24" data-percent="100" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="100" data-part="100"></div>

View on Codepen

Answer 1

可以使用GSAP来完成。您可以从以下代码中获取参考： Twilio Autopilot Python Quickstart

const tl = gsap.timeline({paused: true});

tl.from(
    ".gsap-swipe",
    {
      y: 20,
      x: 20,
      rotate: -40,
      duration: 3,
      transformOrigin: '30% 80%',
      ease: Elastic.easeOut.config(1, 0.5),
    }, 0
  )
  .fromTo(
    ".swipe",
    {
      xPercent: -100
    },
    {
      duration: 1,
      xPercent: 100,
      ease: Sine.easeInOut,
      stagger: {
        each: 0.15
      }
    }, 0
  )
  .from(
    ".maskSwipe",
    {
      xPercent: -100,
      ease: Sine.easeInOut
    },
    0.4
  )
  .from(
    "#hello",
    {
      duration: 1.5,
      drawSVG: "0%"
    },
    1
  )
  .from(
    ".swoop",
    {
      duration: 2,
      drawSVG: "0%"
    },
    1
  )
  .from(
    ".line",
    {
      drawSVG: "0%",
      duration: 0.5,
      stagger: {
        each: 0.2
      }
    },
    1
  )
  .from(
    ".shape",
    {
      scale: 0,
      duration: 1.3,
      transformOrigin: "50% 50%",
      rotate: '+=random(-60, 60)',
      ease: Elastic.easeOut.config(1, 0.8),
      stagger: {
        each: 0.2
      }
    },
    0.2
  );

// ScrubGSAPTimeline(tl);

let hover = document.querySelector('.js-hover');

hover.addEventListener('mouseover', playTl);
hover.addEventListener('mouseout', resetTl);

function playTl(){
  tl.timeScale(1.25).restart();
}

function resetTl(){
  tl.progress(0).pause();
}

圆环图触发动画滚动

1 个答案: