Создание экрана предварительной загрузки с процентами и svgs - PullRequest
Новая
       17

Создание экрана предварительной загрузки с процентами и svgs

0 голосов
/ 25 февраля 2019

В настоящее время я работаю над проектом, в котором мне нужно создать загрузочный экран, который включает в себя процент и анимированные svgs-анимации.Я просмотрел весь интернет, но не могу найти ничего, что мне нужно?Я не могу даже заставить работать простой бар загрузки!

Я включил то, что у меня сейчас есть ниже.Я использовал это пошаговое руководство для 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>

1 Ответ

0 голосов
/ 26 февраля 2019

Я не знаком с 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...