Question

我需要你们的帮助。我无法找到解决问题的好方法。我在我的网站上有一些动画SVG的部分。我为此使用了vivus.js。 https://maxwellito.github.io/vivus-instant/ 问题是，当用户在带有动画SVG的部分上滚动时，我无法找到启动动画的解决方案。

Answer 1

要在SVG滚动到视图时触发动画，您需要解决两个步骤：

检测SVG何时可见
最初暂停动画，然后在需要时触发

检测元素何时可见

您需要为滚动事件添加事件处理程序。在该事件处理程序中，您将页面滚动位置（window.scrollY）与SVG在页面上的位置进行比较。您可以使用getBoundingClientRect()来获取该内容。

请参阅下面的演示，了解实施此技术的示例代码。

开始运行动画

第二步实际上是在那时触发动画。如何让动画暂停然后开始运行取决于你正在使用的动画方法。

SVG SMIL动画

在第一个例子中，我们使用的是作为SVG标准一部分的SMIL动画元素。

要让动画等待您开始运行，请将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>

Answer 2

当我认为您正在尝试制作动画网站时。并且您希望在用户处于视口中时执行动画。

你应该使用这个名为 Scroll Magic 的插件，它具有控制任何类型的动画而不是svg或任何动画的能力。

您可以在此处找到链接 http://scrollmagic.io/

这里也是一个快速举例。 http://scrollmagic.io/examples/advanced/svg_drawing.html

如何在输入视口时启动动画SVG？

2 个答案:

检测元素何时可见

开始运行动画