http://scrollmagic.io/examples/advanced/svg_drawing.html

а, вам нужна помощь. Я не могу найти хорошее решение моей проблемы. У меня есть разделы на моем сайте с некоторыми анимированными SVG. Я использовал vivus.js для этого.https://maxwellito.github.io/vivus-instant/ Проблема в том, что я не могу найти решение для запуска анимации, когда пользователь прокручивает раздел с анимированными SVG.

 Doomenik27 окт. 2017 г., 09:10
Добавьте пожалуйста минимальный рабочий фрагмент кода и то, что вы пытались достичь.

Ответы на вопрос(2)

Решение Вопроса

когда SVG прокручивается в поле зрения, необходимо выполнить два шага:

определить, когда SVG виденсначала остановите анимацию, затем активируйте ее, когда захотитеОбнаружение, когда элемент виден

Вам нужно добавить обработчик событий для событий прокрутки. В этом обработчике событий вы сравниваете местоположение прокрутки страницы (window.scrollY) против расположения SVG на странице. Вы можете получить это используяgetBoundingClientRect().

Посмотрите демонстрационные примеры ниже для примера кода, реализующего эту технику.

Запуск анимации

Второй шаг - это запуск анимации в то время. То, как вы держите анимацию, а затем запускаете ее, зависит от метода анимации, который вы используете.

SVG SMIL анимация

В этом первом примере мы используем элементы анимации SMIL, которые являются частью стандарта SVG.

Чтобы анимация ждала, пока вы запустите ее, установитеbegin приписывать"indefinite", Вы можете запустить его, позвонивbeginElement() на<animate> элемент.

// Get the position on the page of the SVG
var svgLocation = document.getElementById("mysvg").getBoundingClientRect();

// Scroll offset that triggers animation start.
// In this case it is the bottom of the SVG.
var offsetToTriggerAnimation = svgLocation.y + svgLocation.height;

// Function to handle the scroll event.
// Add an event handler to the document for the "onscroll" event
function scrollAnimTriggerCheck(evt)
{
  var viewBottom = window.scrollY + window.innerHeight;
  if (viewBottom > offsetToTriggerAnimation) {
    // Start the SMIL animation
    document.getElementById("anim").beginElement();
    // Remove the event handler so it doesn't trigger again
    document.removeEventListener("scroll", scrollAnimTriggerCheck);
  }
}

// Add an event handler to the document for the "onscroll" event
document.addEventListener("scroll", scrollAnimTriggerCheck);
svg {
  border: solid 1px grey;
}

p {
  margin-bottom: 1000px;
}
<p>Scroll down</p>

<svg id="mysvg">
  <rect x="0" width="150" height="150" fill="rebeccapurple">
    <animate id="anim" attributeName="x" from="0"  to="150" dur="2s"
             fill="freeze" begin="indefinite"/>
  </rect>
</svg>

<br>
<br>
<br>
<br>

CSS анимация

Существует несколько способов запуска анимации при использовании CSS-анимации.

Положить вашиanimation свойство в своем собственном классе набора стилей, затем добавьте этот класс к элементу:

 .anim {
   animation-name: slide;
   animation-duration: 2s;
 }

 myobject.classList.add("anim");

// Get the position on the page of the SVG
var svgLocation = document.getElementById("mysvg").getBoundingClientRect();

// Scroll offset that triggers animation start.
// In this case it is the bottom of the SVG.
var offsetToTriggerAnimation = svgLocation.y + svgLocation.height;

// Function to handle the scroll event.
// Add an event handler to the document for the "onscroll" event
function scrollAnimTriggerCheck(evt)
{
  var viewBottom = window.scrollY + window.innerHeight;
  if (viewBottom > offsetToTriggerAnimation) {
    // Start the CSS animation by adding the animation CSS rules to the rect element
    document.querySelector("rect").classList.add("anim");;
    // Remove the event handler so it doesn't trigger again
    document.removeEventListener("scroll", scrollAnimTriggerCheck);
  }
}

// Add an event handler to the document for the "onscroll" event
document.addEventListener("scroll", scrollAnimTriggerCheck);
.anim {
  animation: slide 2s linear forwards;
}

@keyframes slide {
  from {
    transform: translate(0px, 0px);
  }

  to {
    transform: translate(150px, 0px);
  }
}

svg { border: solid 1px grey; }
p { margin-bottom: 1000px; }
<p>Scroll down</p>

<svg id="mysvg">
  <rect x="0" width="150" height="150" fill="rebeccapurple"/>
</svg>

<br>
<br>
<br>
<br>

Второй способ заключается в использованииanimation-play-state CSS свойство Не все браузеры поддерживают это пока.

Идея в том, что вы установилиanimation-play-state вpaused сначала измените его наrunning когда вы хотите, чтобы анимация началась. Вы можете сделать это, добавив класс с этим свойством (аналогично описанному выше). Или вы можете установитьstyle.animationPlayState свойство напрямую, как в примере ниже.

// Get the position on the page of the SVG
var svgLocation = document.getElementById("mysvg").getBoundingClientRect();

// Scroll offset that triggers animation start.
// In this case it is the bottom of the SVG.
var offsetToTriggerAnimation = svgLocation.y + svgLocation.height;

// Function to handle the scroll event.
// Add an event handler to the document for the "onscroll" event
function scrollAnimTriggerCheck(evt)
{
  var viewBottom = window.scrollY + window.innerHeight;
  if (viewBottom > offsetToTriggerAnimation) {
    // Start the CSS animation by setting the animation-play-state to "running"
    document.querySelector("rect").style.animationPlayState = "running";
    // Remove the event handler so it doesn't trigger again
    document.removeEventListener("scroll", scrollAnimTriggerCheck);
  }
}

// Add an event handler to the document for the "onscroll" event
document.addEventListener("scroll", scrollAnimTriggerCheck);
.anim {
  animation: slide 2s linear forwards;
  animation-play-state: paused;
}

@keyframes slide {
  from {
    transform: translate(0px, 0px);
  }

  to {
    transform: translate(150px, 0px);
  }
}

svg { border: solid 1px grey; }
p { margin-bottom: 1000px; }
<p>Scroll down</p>

<svg id="mysvg">
  <rect x="0" width="150" height="150" fill="rebeccapurple" class="anim"/>
</svg>

<br>
<br>
<br>
<br>

вы пытаетесь сделать анимированный сайт. И вы хотите, чтобы ваша анимация выполнялась, когда пользователь в своем окне просмотра и для этого.

Вы должны использовать этот плагин под названиемМагический свиток он имеет все возможности для управления любой анимацией, а не SVG или любой другой.

Вы можете найти ссылку здесьhttp://scrollmagic.io/

Вот также быстрый пример для этого.http://scrollmagic.io/examples/advanced/svg_drawing.html

Ваш ответ на вопрос