javascript-使用百分比和svgs创建预加载屏幕

我目前正在一个项目中,必须在其中构建一个包含百分比和定制svgs动画的加载屏幕.我已经遍及整个互联网,但是找不到我所需要的东西？我似乎什至无法获得一个简单的加载栏来工作！

我在下面列出了我目前拥有的东西.我一直在使用this walkthrough作为progressbar.js,因为它包含动画和百分比,但是任何指导将不胜感激！

(我的想法是让南瓜种子在栏杆加载时彼此旋转,然后连接在一起,一旦栏杆达到100％,南瓜就会弹出)

var ProgressBar = required('progressbar.js')
var line = new ProgressBar.Line('#container');


var bar = new ProgressBar.Line('#container',{
  strokeWidth: 4,easing: 'easeInOut',duration: 1400,color: '#92D4CE',trailColor: '#78BA43',trailWidth: 1,svgStyle: {width: '100%',height: '100%'},text: {
    style: {
      // Text color.
      // Default: same as stroke color (options.color)
      color: '#999',position: 'absolute',right: '0',top: '30px',padding: 0,margin: 0,transform: null
    },autoStyleContainer: false
  },from: {color: '#92D4CE'},to: {color: '#78BA43'},step: (state,bar) => {
    bar.setText(Math.round(bar.value() * 100) + ' %');
  }
});

bar.animate(1.0);  // Number from 0.0 to 1.0

body{
  #container {
  margin: 20px;
  width: 400px;
  height: 8px;
  position: relative;
}
}

<body>

<div id="container"></div>

<div id="animated">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144">
    <style>
      .st0{fill:#fee0c4}.st1{fill:#fbcaba}.st2{fill:#feeee7}.st4{fill:#d4644b}.st6{fill:#957754}.st8{fill:none;stroke:#3a2e18;stroke-width:.3793;stroke-miterlimit:10}
    </style>
    <g id="seeds">
      <g id="seedThree">
        <path class="st0" d="M51.78 89.68c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/>
        <path class="st1" d="M46.81 74.91s8.99 17.87-1.85 20.98c.07 0 12.63.01 1.85-20.98zM43.26 76.56S40.2 85.3 39.5 88.35c.01 0 1.41-7.12 3.76-11.79z"/>
        <ellipse transform="rotate(-18.558 40.64 90.84)" class="st2" cx="40.65" cy="90.84" rx="1.14" ry="1.94"/>
        <ellipse transform="rotate(-18.558 40.319 88.068)" class="st2" cx="40.33" cy="88.07" rx=".21" ry=".36"/>
      </g>
      <g id="seedTwo">
        <path class="st0" d="M77.07 49.58c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/>
        <path class="st1" d="M72.1 34.81s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM68.55 36.46s-3.06 8.74-3.76 11.79c.01 0 1.4-7.12 3.76-11.79z"/>
        <ellipse transform="rotate(-18.558 65.931 50.743)" class="st2" cx="65.94" cy="50.74" rx="1.14" ry="1.94"/>
        <ellipse transform="rotate(-18.558 65.61 47.97)" class="st2" cx="65.62" cy="47.97" rx=".21" ry=".36"/>
      </g>
      <g id="seedOne">
        <path class="st0" d="M100.36 87.93c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2S91 72.78 93.55 70.01c2.15-2.34 6.81 13.95 6.81 17.92z"/>
        <path class="st1" d="M95.39 73.16s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM91.84 74.81s-3.06 8.74-3.76 11.79c0 0 1.4-7.12 3.76-11.79z"/>
        <ellipse transform="rotate(-18.558 89.215 89.095)" class="st2" cx="89.22" cy="89.09" rx="1.14" ry="1.94"/>
        <ellipse transform="rotate(-18.558 88.895 86.322)" class="st2" cx="88.9" cy="86.32" rx=".21" ry=".36"/>
      </g>
    </g>
    <g id="pumpkin">
      <path d="M72.08 50.12S41.63 36.8 26.62 58.96c-11.11 16.4-7.86 43.14 11.56 54.45 11.99 6.98 36.45 9.02 58.99 3.15 23.51-6.12 33.21-33.49 21.8-54.65-2.51-4.61-14.42-20.63-46.89-11.79z" fill="#f89a56"/>
      <path class="st4" d="M99.35 56.7s11.81 33.21 6.18 52.43c0 0 10.52-25.04-6.18-52.43zM44.23 55.24s-12.18 25.09-4.16 52.15c-.59-.32-14.85-25.74 4.16-52.15zM72.54 60.93s-4.81 36.14 0 49.93c.23-.01.92-45.46 0-49.93z"/>
      <path d="M68.3 53.41s2.94 4.05 7.6 1.84 4.05-17.42 16.93-24.41c0-.37-5.27-3.68-10.18-3.43-.37.12-.26 1.56-.26 1.56l-.74-1.57S73.68 42.27 68.3 53.41z" fill="#92985c"/>
      <path class="st6" d="M68.3 53.41s5.9 1.12 7.8-2.89c0 0-.05 1.52-.43 2.11-.38.6 4.01-3.83 6.01-8.71-.03.06-3.36 9.03-4.29 10.01-.05.06-3.94 4.7-9.09-.52zM82.61 29.73s6.91 1.39 7.65 1.43c.73.04 1.22-.39 1.54-.15 0 .04-.17-.31-1.32.4-.01-.04.21.42-7.87-1.68z"/>
      <path d="M69.14 53.41s4.44-12.01-3.34-11.06c-7.78.94-7.15-6.84-7.15-6.84" fill="none" stroke="#3a2e18" stroke-width=".576" stroke-miterlimit="10"/>
      <circle class="st8" cx="70.07" cy="41.27" r="1.92"/>
      <path class="st8" d="M74.38 54.44s7.58-4.77 7.91.8-4.83 7.44 2.2 10.95"/>
    </g>
  </svg>
</div>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Greensock -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="js/progressbar.js/dist/progressbar.js"></script>
<script src="js/scripts.js"></script>
</body>

最佳答案

我对progressbar.js并不熟悉,所以我真的不能为您提供太多帮助.

但是,使用CSS动画和过渡非常简单.结合了少量的Javascript.

为了演示设置越来越多的进度,我使用了一个简单的requestAnimationFrame()动画循环.
其余代码的工作方式在代码中.

var  mysvg = document.querySelector("#animated svg");


//
// Call this function to set the amount of progress (0 .. 1)
// 
function setProgress(progress)
{
  // For debug purposes only: show the progress amount in a div so we can see the progress
  document.getElementById("test").textContent = progress.toFixed(2);

  // When progress is complete (1) start the pumpkin animation by adding a class to the SVG
  if (progress >= 1) {
    mysvg.classList.add("show-pumpkin");
  } else {
    mysvg.classList.remove("show-pumpkin");
  }
}


// Set the initial state of the progress to 0
setProgress(0);


// Everything else below is just to simulate you calling setProgress() with an increasing value.
//
// A little animation that increments the progress amount for us.
// In a real situation you would be setting this yourself based on how much of your initialisation is complete etc.
//
var amt = 0;

function incrementPogress() {
  amt += 0.005;
  setProgress(amt);
  if (amt <= 1)
    window.requestAnimationFrame(incrementPogress);
}


// Start our progress incrementing simulation
window.requestAnimationFrame(incrementPogress);

svg {
  width: 500px;
}

/* pumkin starts out very small and invisible */
#pumpkin {
  transform-Box: fill-Box;
  transform-origin: 50% 50%;
  transform: scale(0.0001);
  opacity: 0;
}

/* When the "show-pumkin" class is added to the SVG,wait 0.5s,then
   make the pumkin visible,and scale it up with a bounce easing function. */
.show-pumpkin #pumpkin {
  opacity: 1;
  transition: transform 0.5s;
  transition-delay: 0.45s;
  transform: scale(1);
  transition-timing-function: cubic-bezier(0.550,1.650,0.615,0.840);
}


/* The group of seeds rotates constantly */
#seeds {
  transform-origin: 72px 72px;
  animation: rotate-clockwise 2s linear infinite;
}

/* The individual seeds have their own rotations.
   With varying durations and directions. */
#seeds g {
  transform-Box: fill-Box;
  transform-origin: 50% 50%;
  animation: rotate-clockwise 1.8s linear infinite;
  animation-direction: reverse;
}

#seeds #seedTwo {
  animation-direction: normal;
  animation-duration: 10s;
}

#seeds #seedThree {
  animation-duration: 1s;
}

/* Keyframe definition to cause a 360 degree rotation.
   Used for the group and individual seed rotations. */
@keyframes rotate-clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* When the "show-pumkin" class is added to the SVG,start shrinking the seeds
   towards the centre of the SVG.  We apply this transform to a new "seed-container"
   group so that it doesn't interfere with the rotation transform that's already
   happening to "#seeds". */
.show-pumpkin #seeds-container {
  transform-origin: 72px 72px;
  transition: transform 0.5s;
  transform: scale(0.1);
  transition-timing-function: ease-out;
}

<div id="animated">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144">
    <style>
      .st0{fill:#fee0c4}.st1{fill:#fbcaba}.st2{fill:#feeee7}.st4{fill:#d4644b}.st6{fill:#957754}.st8{fill:none;stroke:#3a2e18;stroke-width:.3793;stroke-miterlimit:10}
    </style>
    <g id="seeds-container">
      <g id="seeds">
        <g id="seedThree">
          <path class="st0" d="M51.78 89.68c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/>
          <path class="st1" d="M46.81 74.91s8.99 17.87-1.85 20.98c.07 0 12.63.01 1.85-20.98zM43.26 76.56S40.2 85.3 39.5 88.35c.01 0 1.41-7.12 3.76-11.79z"/>
          <ellipse transform="rotate(-18.558 40.64 90.84)" class="st2" cx="40.65" cy="90.84" rx="1.14" ry="1.94"/>
          <ellipse transform="rotate(-18.558 40.319 88.068)" class="st2" cx="40.33" cy="88.07" rx=".21" ry=".36"/>
        </g>
        <g id="seedTwo">
          <path class="st0" d="M77.07 49.58c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/>
          <path class="st1" d="M72.1 34.81s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM68.55 36.46s-3.06 8.74-3.76 11.79c.01 0 1.4-7.12 3.76-11.79z"/>
          <ellipse transform="rotate(-18.558 65.931 50.743)" class="st2" cx="65.94" cy="50.74" rx="1.14" ry="1.94"/>
          <ellipse transform="rotate(-18.558 65.61 47.97)" class="st2" cx="65.62" cy="47.97" rx=".21" ry=".36"/>
        </g>
        <g id="seedOne">
          <path class="st0" d="M100.36 87.93c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2S91 72.78 93.55 70.01c2.15-2.34 6.81 13.95 6.81 17.92z"/>
          <path class="st1" d="M95.39 73.16s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM91.84 74.81s-3.06 8.74-3.76 11.79c0 0 1.4-7.12 3.76-11.79z"/>
          <ellipse transform="rotate(-18.558 89.215 89.095)" class="st2" cx="89.22" cy="89.09" rx="1.14" ry="1.94"/>
          <ellipse transform="rotate(-18.558 88.895 86.322)" class="st2" cx="88.9" cy="86.32" rx=".21" ry=".36"/>
        </g>
      </g>
    </g>
    <g id="pumpkin">
      <path d="M72.08 50.12S41.63 36.8 26.62 58.96c-11.11 16.4-7.86 43.14 11.56 54.45 11.99 6.98 36.45 9.02 58.99 3.15 23.51-6.12 33.21-33.49 21.8-54.65-2.51-4.61-14.42-20.63-46.89-11.79z" fill="#f89a56"/>
      <path class="st4" d="M99.35 56.7s11.81 33.21 6.18 52.43c0 0 10.52-25.04-6.18-52.43zM44.23 55.24s-12.18 25.09-4.16 52.15c-.59-.32-14.85-25.74 4.16-52.15zM72.54 60.93s-4.81 36.14 0 49.93c.23-.01.92-45.46 0-49.93z"/>
      <path d="M68.3 53.41s2.94 4.05 7.6 1.84 4.05-17.42 16.93-24.41c0-.37-5.27-3.68-10.18-3.43-.37.12-.26 1.56-.26 1.56l-.74-1.57S73.68 42.27 68.3 53.41z" fill="#92985c"/>
      <path class="st6" d="M68.3 53.41s5.9 1.12 7.8-2.89c0 0-.05 1.52-.43 2.11-.38.6 4.01-3.83 6.01-8.71-.03.06-3.36 9.03-4.29 10.01-.05.06-3.94 4.7-9.09-.52zM82.61 29.73s6.91 1.39 7.65 1.43c.73.04 1.22-.39 1.54-.15 0 .04-.17-.31-1.32.4-.01-.04.21.42-7.87-1.68z"/>
      <path d="M69.14 53.41s4.44-12.01-3.34-11.06c-7.78.94-7.15-6.84-7.15-6.84" fill="none" stroke="#3a2e18" stroke-width=".576" stroke-miterlimit="10"/>
      <circle class="st8" cx="70.07" cy="41.27" r="1.92"/>
      <path class="st8" d="M74.38 54.44s7.58-4.77 7.91.8-4.83 7.44 2.2 10.95"/>
    </g>
  </svg>
</div>

<div id="test"></div>

javascript-使用百分比和svgs创建预加载屏幕

猜你在找的HTML相关文章