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。

$('#press').click(firstFunction);

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

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");
        });
    });

});

最后，在幻灯片上设置最初处于活动状态的哈希值

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();
}

带有HTML5横幅内容的Bootstrap轮播 - 如何在用户查看幻灯片之前暂停动画？

1 个答案: