Разрешить анимацию в SVG-объекте для начала на Scroll - PullRequest
Новая
       7

Разрешить анимацию в SVG-объекте для начала на Scroll

0 голосов
/ 10 января 2019

У меня есть круговая диаграмма, на которой я пытаюсь проверить анимацию. У меня проблемы с графиком, появляющимся на Scroll. Я был в состоянии добавить всю загрузку объекта на Scroll, но затем анимация начинается до полной загрузки объекта. Можно ли запустить оранжевую панель только после прокрутки пользователем объекта?

CSS 

.single-chart {
  width: 33%;
  justify-content: space-around ;
}
.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
}
.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}
.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}
.circular-chart.onScroll {
  animation: progress .9s;
}
@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}
.circular-chart.orange .circle {
  stroke: #ff9f00;
}
.percentage {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

HTML 

<div class="single-chart" style="padding-top:500px;">
    <svg viewBox="0 0 36 36" class="circular-chart orange">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle"
        stroke-dasharray="30, 100"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">30%</text>
    </svg>
</div>

JQuery 

<script>
var scrollpos = window.scrollY; // window scroll position
var wh = window.innerHeight-50; // as soon as element touches bottom with offset event starts
var element = document.querySelector(".circular-chart"); //element

window.addEventListener('scroll', function(){ 
    if(scrollpos > (element.offsetTop - wh)){
        element.classList.add("onScroll");
    }
});</script>

Ответы [ 2 ]

0 голосов
/ 10 января 2019

Вам нужно анимировать stroke-dashoffset от 100 до 100 - 30. Надеюсь, это поможет. 

let sc = document.querySelector(".single-chart");
var element = document.querySelector(".circular-chart"); 

var scrollpos = window.scrollY; // window scroll position
var wh = window.innerHeight-50; // as soon as element touches bottom with offset event starts
//element

window.addEventListener('scroll', function(e){ 
  let bcr = sc.getBoundingClientRect();
    if(bcr.y < wh){
        element.classList.add("onScroll");
    }
});
.single-chart {
  width: 33%;
  justify-content: space-around;
  
  border:5px solid red
}
.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
}
.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}
.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset:100;
  /*animation: progress 1s ease-out forwards;*/
}
.circular-chart.onScroll .circle { 
  animation: progress 4s ease-out forwards;
}
@keyframes progress {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: 70;
  }
}
.circular-chart.orange .circle {
  stroke: #ff9f00;
}
.percentage {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}
svg{border:1px solid}
<div class="single-chart" style="margin-top:700px;">
    <svg viewBox="0 0 36 36" class="circular-chart orange">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">30%</text>
    </svg>
</div>
0 голосов
/ 10 января 2019

Вместо addeventlisgener сделайте это на Scroll. Справка: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onscroll

И не пытайтесь делать все с помощью jquery, JavaScript также является языком, но он еще не освоен.

...