我已经制作了可以模拟3D环境的控件。默认情况下，数组中的每一帧都将交换背景图像以创建动画。
我的问题是，图像加载速度似乎不够快，并产生了闪烁效果，我想使动画在每帧之间流畅。我考虑过使新图像淡入淡出，并在每个新帧上使旧图像淡出以减少闪烁，但是我不确定如何在背景图像上使用淡入淡出效果。
此外，我不确定是否会停止闪烁，所以我想知道是否还有其他解决方案。
这是我的代码：
var imagesArray = ['https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-1.jpg',
'https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-3.jpg',
'https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-5.jpg',
'https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-7.jpg',
'https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-9.jpg',
'https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-11.jpg',
'https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-13.jpg',
'https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-15.jpg',
'https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-17.jpg',
'https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-19.jpg',
'https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-21.jpg',
'https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-23.jpg',
'https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-25.jpg',
'https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-27.jpg',
'https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-29.jpg',
'https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-31.jpg',
'https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-33.jpg',
'https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-35.jpg'];
var ImageCounter = 0;
//Turn frame backward
$(".PreviousButton").click(function() {
StartTurning = false;
ImageCounter--;
//Reset at end of loop.
if (ImageCounter < 0) {
ImageCounter = imagesArray.length - 1;
}
//Always update the image.
$('.ImageDisplay').css({
'background-image': 'url(' + imagesArray[ImageCounter] + ')'
});
});
var StartTurning = true;
//Play and Pause Button
setInterval(function() {
if (StartTurning) {
ImageCounter++;
//Reset at end of loop.
if (ImageCounter > imagesArray.length - 1) {
ImageCounter = 0;
}
//Always update the image.
$('.ImageDisplay').css({
'background-image': 'url(' + imagesArray[ImageCounter] + ')'
});
}
}, 100);
// Code to handle the pause button
$(".PlayNStopButton").click(function(ffe) {
StartTurning = !StartTurning;
});
//Turn frame forward
$(".ForwardButton").click(function() {
StartTurning = false;
ImageCounter++;
//Reset at end of loop.
if (ImageCounter > imagesArray.length - 1) {
ImageCounter = 0;
}
//Always update the image.
$('.ImageDisplay').css({
'background-image': 'url(' + imagesArray[ImageCounter] + ')'
});
});
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.ImageBox {
border: silver 1px solid;
width: 100%;
height: 100%;
text-align: center;
}
.ImageDisplay {
margin: 25px;
background-image: url('https://static.turbosquid.com/Preview/2017/02/01__12_52_27/lamborginhi1.jpgD2F77AE0-1DB0-4FC7-B143-2D141E9ADD45Original-1.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
height: 35vw;
}
.ControlBar {
width: 100%;
height: 100px;
background-color: #1F2326;
padding-top: 25px;
text-align: center;
}
.PreviousButton {
background-color: white;
width: 70px;
height: 50px;
border-radius: 3px;
text-align: center;
margin: auto;
}
.PreviousButton:hover {
background-color: #F28C09;
}
.PlayNStopButton {
background-color: white;
width: 70px;
height: 50px;
border-radius: 3px;
text-align: center;
margin: auto;
}
.PlayNStopButton:hover {
background-color: #F28C09;
}
.ForwardButton {
background-color: white;
width: 70px;
height: 50px;
border-radius: 3px;
text-align: center;
margin: auto;
}
.ForwardButton:hover {
background-color: #F28C09;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<br>
<div class="container">
<div class="ImageBox">
<div class="ImageDisplay">
</div>
</div>
<div class="ControlBar">
<div class="col-xs-4">
<div class="PreviousButton">
<svg width="35px" height="auto" viewBox="0 0 30.853 20.892" enable-background="new 0 0 30.853 20.892" xml:space="preserve">
<g>
<path fill="#1F2326" d="M29.181,0.146c-2.695,1.558-5.393,3.113-8.088,4.671c-0.9,0.521-1.803,1.039-2.701,1.56
c0-1.756,0-3.514,0-5.271c0-0.845-0.943-1.379-1.672-0.959C11.328,3.26,5.933,6.375,0.541,9.487c-0.721,0.415-0.721,1.503,0,1.918
c5.393,3.112,10.787,6.228,16.18,9.341c0.729,0.42,1.672-0.115,1.672-0.959c0-1.759,0-3.516,0-5.271
c3.598,2.077,7.191,4.153,10.789,6.23c0.729,0.42,1.672-0.115,1.672-0.959c0-6.228,0-12.454,0-18.682
C30.853,0.261,29.91-0.273,29.181,0.146z"/>
</g>
</svg>
<!-- <img src="Images/Controls/PreviousButton.png"> -->
</div>
</div>
<div class="col-xs-4">
<div class="PlayNStopButton">
<svg width="30px" height="auto" viewBox="0 0 24.404 21.643" enable-background="new 0 0 24.404 21.643" xml:space="preserve">
<g>
<g>
<path fill="#1F2326" d="M23.881,9.862C18.488,6.75,13.094,3.635,7.701,0.521C6.973,0.102,6.029,0.636,6.029,1.48
c0,6.228,0,12.454,0,18.682c0,0.844,0.943,1.379,1.672,0.959c5.393-3.113,10.787-6.229,16.18-9.341
c0.408-0.236,0.543-0.601,0.521-0.959C24.424,10.463,24.289,10.099,23.881,9.862z"/>
<path fill="#1F2326" d="M1.602,0H1.48C0.664,0,0,0.662,0,1.48v18.682c0,0.818,0.664,1.48,1.48,1.48h0.121
c0.818,0,1.481-0.662,1.481-1.48V1.48C3.083,0.662,2.42,0,1.602,0z"/>
</g>
</g>
</svg>
<!-- <img src="Images/Controls/PlayNStopButton.png"> -->
</div>
</div>
<div class="col-xs-4">
<div class="ForwardButton">
<svg width="35px" height="auto" viewBox="0 0 30.853 20.893" enable-background="new 0 0 30.853 20.893" xml:space="preserve">
<g>
<path fill="#1F2326" d="M1.672,0.146C4.367,1.704,7.064,3.26,9.76,4.817c0.9,0.521,1.803,1.039,2.701,1.56c0-1.756,0-3.514,0-5.271
c0-0.845,0.943-1.379,1.672-0.959c5.393,3.113,10.787,6.229,16.18,9.341c0.721,0.415,0.721,1.503,0,1.918
c-5.393,3.112-10.787,6.228-16.18,9.341c-0.729,0.42-1.672-0.115-1.672-0.959c0-1.759,0-3.516,0-5.271
c-3.598,2.077-7.191,4.153-10.789,6.23C0.943,21.166,0,20.631,0,19.787C0,13.56,0,7.333,0,1.105C0,0.261,0.943-0.273,1.672,0.146z"
/>
</g>
</svg>
<!-- <img src="Images/Controls/ForwardButton.png"> -->
</div>
</div>
</div>
</div>
谢谢！
答案 0 :(得分：0)
将其放入视频中，将其托管在youtube上，并使用以下代码：https://codepen.io/ccrch/pen/GgPLVW/
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var tv,
playerDefaults = {autoplay: 0, autohide: 1, modestbranding: 0, rel: 0, showinfo: 0, controls: 0, disablekb: 1, enablejsapi: 0, iv_load_policy: 3};
var vid = [
{'videoId': '2b5QNj-BVhs', 'startSeconds': 515, 'endSeconds': 690, 'suggestedQuality': 'hd720'},
{'videoId': '9ge5PzHSS0Y', 'startSeconds': 465, 'endSeconds': 657, 'suggestedQuality': 'hd720'},
{'videoId': 'OWsCt7B-KWs', 'startSeconds': 0, 'endSeconds': 240, 'suggestedQuality': 'hd720'},
{'videoId': 'qMR-mPlyduE', 'startSeconds': 19, 'endSeconds': 241, 'suggestedQuality': 'hd720'}
],
randomVid = Math.floor(Math.random() * vid.length),
currVid = randomVid;
$('.hi em:last-of-type').html(vid.length);
function onYouTubePlayerAPIReady(){
tv = new YT.Player('tv', {events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange}, playerVars: playerDefaults});
}
function onPlayerReady(){
tv.loadVideoById(vid[currVid]);
tv.mute();
}
function onPlayerStateChange(e) {
if (e.data === 1){
$('#tv').addClass('active');
$('.hi em:nth-of-type(2)').html(currVid + 1);
} else if (e.data === 2){
$('#tv').removeClass('active');
if(currVid === vid.length - 1){
currVid = 0;
} else {
currVid++;
}
tv.loadVideoById(vid[currVid]);
tv.seekTo(vid[currVid].startSeconds);
}
}
function vidRescale(){
var w = $(window).width()+200,
h = $(window).height()+200;
if (w/h > 16/9){
tv.setSize(w, w/16*9);
$('.tv .screen').css({'left': '0px'});
} else {
tv.setSize(h/9*16, h);
$('.tv .screen').css({'left': -($('.tv .screen').outerWidth()-w)/2});
}
}
$(window).on('load resize', function(){
vidRescale();
});
$('.hi span:first-of-type').on('click', function(){
$('#tv').toggleClass('mute');
$('.hi em:first-of-type').toggleClass('hidden');
if($('#tv').hasClass('mute')){
tv.mute();
} else {
tv.unMute();
}
});
$('.hi span:last-of-type').on('click', function(){
$('.hi em:nth-of-type(2)').html('~');
tv.pauseVideo();
});