只有当我使用 vivus.js 到达底部时，我的 svg 动画才会开始

My svg animation start only when I arrive at the bottom with vivus.js

本文关键字：我的 svg 动画 开始 底部 js vivus      更新时间：2023-09-26

这是我的问题：

我有一个很高的 svg（高度为 1220px，在视图中设置）。

如下所示：

<svg version="1.1" id="one-diagonal" viewBox="0 0 1160 1220" >
<g>
  <style type="text/css">
 .st1{fill:none;stroke:#939598;stroke-width:1;stroke-miterlimit:10;}
 </style>
 <defs>
</defs>
<line id="XMLID_64489_" class="st1" x1="710" y1="1" x2="0" y2="1212.9"/>
</svg>

我正在使用 vivus 来制作我所有的 svg 动画：

  function easeOutBounce (x) {
    var base = -Math.cos(x * (0.5 * Math.PI)) + 1;
    var rate = Math.pow(base,1.5);
    var rateR = Math.pow(1 - x, 2);
    var progress = -Math.abs(Math.cos(rate * (2.5 * Math.PI) )) + 1;
    return (1- rateR) + (progress * rateR);
  }
  var timing,
    timingProps = {
      type: 'delayed',
      duration: 150,
      start: 'autostart',
      pathTimingFunction: Vivus.LINEAR,
      animTimingFunction: Vivus.LINEAR
    };
  function timingTest (buttonEl, property, type) {
    var activeSibling = buttonEl.parentNode.querySelector('button.active');
    activeSibling.classList.remove('active');
    buttonEl.classList.add('active');
    timingProps.type = (property === 'type') ? type : timingProps.type;
    timingProps.pathTimingFunction = (property === 'path') ? Vivus[type] : timingProps.pathTimingFunction;
    timingProps.animTimingFunction = (property === 'anim') ? Vivus[type] : timingProps.animTimingFunction;
    timing && timing.stop().destroy();
    timing = new Vivus('timing-example', timingProps);
  }

    pola = new Vivus('one-diagonal', {type: 'delayed', duration: 50, forceRender: true, animTimingFunction: Vivus.EASE

}）;

我

遇到的问题是，由于视框设置为1220px高度，动画仅在我到达svg底部时才开始！

你可以在这里看到一个活生生的例子：http://codepen.io/anon/pen/GZJvLm

我可以使用视口在vivus的脚本中看到代码.js但如果我玩弄（如果这更清楚？

    /**
    * Reply if an element is in the page viewport
    *
    * @param  {object} el Element to observe
   * @param  {number} h  Percentage of height
  * @return {boolean}
  */
 Vivus.prototype.isInViewport = function (el, h) {
var scrolled   = this.scrollY(),
viewed       = scrolled + this.getViewportH(),
elBCR        = el.getBoundingClientRect(),
elHeight     = elBCR.height,
elTop        = scrolled + elBCR.top,
elBottom     = elTop + elHeight;
// if 0, the element is considered in the viewport as soon as it enters.
// if 1, the element is considered in the viewport only when it's fully inside
// value in percentage (1 >= h >= 0)
h = h || 0;
return (elTop + elHeight * h) <= viewed && (elBottom) >= scrolled;
};
/**
* Alias for document element
*
* @type {DOMelement}
*/
Vivus.prototype.docElem = window.document.documentElement;
/**
* Get the viewport height in pixels
*
* @return {integer} Viewport height
*/
Vivus.prototype.getViewportH = function () {
var client = this.docElem.clientHeight,
inner = window.innerHeight;
if (client < inner) {
return inner;
}
else {
return client;
}
};
  /**
* Get the page Y offset
*
* @return {integer} Page Y offset
*/
 Vivus.prototype.scrollY = function () {
return window.pageYOffset || this.docElem.scrollTop;
};

它都是白色的，但是如果您在底部滚动，您将看到SVG出现并开始动画。

有没有办法使动画开始，比如说 100 像素，当我在 svg 顶部滚动查看时？ 或者只是当它出现时？

谢谢你的帮助，我对此感到头疼，任何高光都会很棒:)

"如果需要编辑此对象，可以在 onReady 回调中访问"

https://github.com/maxwellito/vivus

onReady: function(myVivus) { // Then call myVivus.play(3); }

相关文章：