如何在进入视口时启动动画 SVG? [英] How to start an animated SVG on entering viewport?

问题描述

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

I need some help from you guys. I can't find a good solution to my problem. I got sections in my website with some animated SVGs. I used vivus.js for this. https://maxwellito.github.io/vivus-instant/ The problem is that i can't find a solution to start the animation when the user scrolls on the section with the animated SVGs.

推荐答案

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

To trigger an animation when the SVG scrolls into view, there are two steps you need to resolve:

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

检测元素何时可见

您需要为滚动事件添加一个事件处理程序.在该事件处理程序中，您将页面滚动位置 (window.scrollY) 与 SVG 在页面上的位置进行比较.您可以使用 getBoundingClientRect() 获得它.

Detecting when an element is visible

You need to add an event handler for scroll events. In that event handler, you compare the page scroll location (window.scrollY) against the SVG's location on the page. You can get that using getBoundingClientRect().

有关实现此技术的示例代码，请参阅下面的演示.

See the demos below for example code implementing this technique.

第二步其实就是触发那个时候的动画.如何让动画暂停然后开始运行取决于您使用的动画方法.

The second step is actually triggering the animation at that time. How you keep an animation paused and then start it running, depends on the method of animation you are using.

SVG SMIL 动画

在第一个示例中，我们使用 SMIL 动画元素，它们是 SVG 标准的一部分.

In this first example, we are using the SMIL animation elements that are part of the SVG standard.

要让动画等待您开始运行，请将 begin 属性设置为 "independent".您可以通过在 元素上调用 beginElement() 来启动它运行.

To have an animation wait for you to start it running, set the begin attribute to "indefinite". The you can start it running by calling beginElement() on the <animate> element.

// 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 动画时，您可以通过多种方式触发动画开始.

There are a couple of way you can trigger an animation to start when you are using CSS animations.

1. 将您的 animation 属性放在它自己的样式集类中，然后将该类添加到元素中:

1. Put your animation property in its own style set class, then add that class to the element:

 .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>

1. 第二种方法是利用 animation-play-state CSS 属性.并非所有浏览器都支持此功能.

1. The second way is to make use of the animation-play-state CSS property. Not all browsers support this yet.

这个想法是，您最初将 animation-play-state 设置为 paused，然后在您希望动画播放时将其更改为 running开始.您可以通过添加具有该属性的类来做到这一点(类似于上面).或者您可以直接设置 style.animationPlayState 属性，如下例所示.

The idea is that you set animation-play-state to paused initially, then change it to running when you want the animation to start. You can either do that by adding a class with that property (similar to above). Or you can set the style.animationPlayState property directly, as in the example below.

// 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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！