Bootstrap 带 HTML5 横幅内容的轮播 - 如何暂停动画直到用户查看该幻灯片？

Question

我正在创建一个展示 HTML5 横幅的数字作品集。我在 Bootstrap 的基础上构建它，并利用 Bootstrap 轮播让我的用户浏览不同的 HTML5 横幅广告素材。我已经使用 iframe 在轮播中显示这些横幅并且它有效，这是我的代码：

<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
    <li data-target="#carouselvideo" data-slide-to="0" class="active"></li>
    <li data-target="#carouselvideo" data-slide-to="1"></li>
    <li data-target="#carouselvideo" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
    <div class="item active">
        <iframe src="/digital-portfolio/banners/1/300x600" width="300" height="600" frameborder="0"></iframe>
    </div>
    <div class="item">
        <iframe src="/digital-portfolio/banners/2/300x600" width="300" height="600" frameborder="0"></iframe>
    </div>
    <div class="item">
        <iframe src="/digital-portfolio/banners/3/300x600" width="300" height="600" frameborder="0"></iframe>
    </div>
</div>
    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
        <span class="icon-prev" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
        <span class="icon-next" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

问题在于，无论您当前在哪张幻灯片上，横幅动画都会一直播放。因此，对于第二个和第三个横幅，一旦用户点击查看这些横幅，他们就已经完成了动画播放并停留在最后一帧。我可以循环播放动画，但理想的功能是在用户进入该幻灯片之前动画不会开始。这是我正在使用的 HTML5 横幅 JavaScript 代码示例。他们通常都使用 NanoTween 作为动画。

var loading = getElement("id", "loading");
var banner = getElement("id", "banner");
var clickTagButton = getElement("id", "clickTagButton");
var seq1 = getElement("id", "seq1");
var seq1_BW = getElement("id", "seq1_BW");
var seq1_mask = getElement("id", "seq_mask1");
var copy1 = getElement("id", "copy1");
var copy3 = getElement("id", "copy3");
var copy4 = getElement("id", "copy4");
var name1 = getElement("id", "name1");
var name2 = getElement("id", "name2");
var btn = getElement("id", "btn");
var seq2 = getElement("id", "seq2");
var seq2_BW = getElement("id", "seq2_BW");
var seq3 = getElement("id", "seq3");
var seq3_BW = getElement("id", "seq3_BW");

function init() {

setTimeout(function() {
    startAnimation();
}, 100);
}

function startAnimation() {
loading.parentNode.removeChild(loading);
banner.style.visibility = "visible";

var seqSpeed = 0.15;
var seq1_delay = 3;
var seq2_delay = 6;
var seq3_delay = 7.1;
var fadeSpeed = 0.3;
var fadeSpeed_prod = 1;

seq1.playbackRate = 1.3;
seq2.playbackRate = 1;
seq3.playbackRate = 1;

NanoTween.delayedCall(0.1, function() {
    seq1.play();
});
NanoTween.delayedCall(3.5, function() {
    seq1.pause();
});

NanoTween.to(seq1, fadeSpeed, {
    opacity: 0,
    ease: "ease-out",
    delay: 3.1
});

NanoTween.to(copy1, fadeSpeed, {
    clip: "rect(306px,300px,529px,15px)",
    ease: "linear",
    delay: 3.1
});

//frame mask animation from top left
NanoTween.to(name1, fadeSpeed, {
    opacity: 0,
    ease: "ease-out",
    delay: 3
});
NanoTween.to(seq1_mask, fadeSpeed_prod, {
    transform: "translate(848px, 150px) rotate(45deg)",
    ease: "ease-out",
    delay: 5.2
});
NanoTween.to(seq1_BW, fadeSpeed_prod, {
    transform: "translate(-598px, 597px) rotate(-45deg)",
    ease: "ease-out",
    delay: 5.2
});
NanoTween.to(copy1, fadeSpeed, {
    opacity: 0,
    ease: "ease-out",
    delay: 5.2
});

NanoTween.delayedCall(5.2, function() {
    seq2.play();
});
//NanoTween.delayedCall(seq1_delay + 3.7, function(){seq2.pause();});


NanoTween.to(seq2, fadeSpeed, {
    opacity: 0,
    ease: "ease-out",
    delay: 6.2
});


//frame mask animation from top left
NanoTween.delayedCall(seq2_delay, function() {
    seq3.play();
});

NanoTween.to(copy3, fadeSpeed, {
    clip: "rect(235px, 274px, 424px, 16px)",
    ease: "linear",
    delay: seq3_delay
});
NanoTween.to(name2, fadeSpeed, {
    opacity: 1,
    ease: "ease-out",
    delay: seq3_delay
});
NanoTween.to(copy4, fadeSpeed, {
    transform: "translate(0px, 0px)",
    ease: "ease-out",
    delay: seq3_delay
});
NanoTween.to(copy4, fadeSpeed * 2, {
    opacity: 1,
    ease: "ease-out",
    delay: seq3_delay
});
NanoTween.to(seq3, fadeSpeed, {
    opacity: 0,
    ease: "ease-out",
    delay: seq3_delay += seqSpeed
});
NanoTween.to(btn, fadeSpeed, {
    clip: "rect(0px,209px ,45px ,0px)",
    ease: "linear",
    delay: seq3_delay + 0.5
});

}

function getElement(element, id) {
var mc;
switch (element) {
    case "id":
        mc = document.getElementById(id);
        break;

    case "class":
        mc = document.getElementsByClassName(id);
        break;
}

return mc;
}


window.onload = function() {
init();
};

有没有一种方法可以初始化动画以在用户位于该幻灯片上时启动，或者可能通过单击轮播控件来触发动画？

这是滑块的外观图片：

Answer 1

不完全清楚您的 NanoTween 代码在哪里运行。我假设它在 iframe 中运行。首先，您需要知道特定幻灯片何时处于活动状态。这可以通过挂接到父页面中的轮播事件来完成。有两个事件，slide.bs.carousel 在转换到新幻灯片时触发，slid.bs.carousel 在新幻灯片处于活动状态时触发。

jQuery(function($) {
    $('.carousel').on('slide.bs.carousel', function (e) {
        // stop any active slides
        $('iframe[src*="play"]',this).each(function() {
           $(this).attr('src',$(this).attr('src').split('#')[0]+"#stop");
        });
        $('iframe',e.relatedTarget).each(function() {
           $(this).attr('src',$(this).attr('src').split('#')[0]+"#play");
        });
    });

});

一旦知道幻灯片处于活动状态，就可以通过在 url 末尾添加散列来通知 iframe。在每个 iframe 中，您将在哈希更改时启动或停止动画：

function init() {

    /* remove this
    setTimeout(function() {
        startAnimation();
    }, 100);
    */

    window.onhashchange = function(){ 
        switch(location.hash.slice(1)) {
           case 'play':
              startAnimation();
              break;
           case 'stop':
              stopAnimation();
              break;
        }
    };

    window.onhashchange();
}

最后，在初始活动的幻灯片上设置散列

<div class="item active">
    <iframe src="/digital-portfolio/banners/1/300x600#play" width="300" height="600" frameborder="0"></iframe>
</div>

Bootstrap 带 HTML5 横幅内容的轮播 - 如何暂停动画直到用户查看该幻灯片？

Bootstrap carousel with HTML5 banner content - how to pause animations until user is viewing that slide?

html

javascript

banner

tween

twitter-bootstrap