Question

我想在演示文稿中添加一些简单的动画。我使用GSAP（TweenMax）进行这项工作。我对动画设置没有任何问题，但这些动画会在演示开始后立即触发。

如何控制它，以便只有当动画幻灯片处于活动状态时脚本才会执行？

欢迎您的帮助。此致！

编辑：

好吧，看起来像阅读图书馆的文档至少回答了90％的这类问题。对于懒惰（像我:)，这是我发现的：

要检查幻灯片的更改时间，我们使用：

 Reveal.addEventListener( 'slidechanged', function( event ) {
    // event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );

在我的animeScript.js中，我只是链接事件，就像：

Reveal.addEventListener( 'slidechanged', function( event ) {
    myTween();
} );

如果我们想要定位特定幻灯片，我们会在 data-state 标记中使用 <section></section> 参数，例如：

<section data-state="slide2">
  <img id="logo2" src="images/logo.png">
  <h2>No Theme</h2>
  <p>There's no theme included, so it will fall back on browser defaults.</p>
</section>

并链接animeScript.js中的状态，如：

Reveal.addEventListener( 'slide2', function() {
  myTween();
  TweenMax.to(logo3, 1,{opacity:1, delay:1.5});
}, false );

问候！

如何使用Reveal.js激活幻灯片时触发GSAP功能？

0 个答案: