如何动态更改 div 的内容而不在 js 中闪烁
how to Dynamically change the contents of the div without flickering in js
欢迎,好吧,我有10个lottie动画,我想在同一个div中一一展示。当按下某个按钮时,我为每个动画执行一个函数,并在函数开始时删除 div 的所有内容以显示新内容,但很明显这会导致闪烁,我想知道如果有更聪明的方法,不会造成闪烁,请注意,我也算是网站开发的初学者
这是一个link
http://animationstest.atwebpages.com/ ,使用 W,A,D,S 移动,没有响应所以使用 pc
但是请注意,例如,当您快速按 a 然后按 d 时,Flickr 不会出现
<script>
var animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'idle.json',
});
var state = "idle";
document.onkeydown = function(e){
e = e || window.event;
var key = e.which || e.keyCode;
if(state === "idle"){
if(key===65){
leftmove();
}
if(key===68){
rightmove();
}
if(key===87){
upmove();
}
if(key===83){
downmove();
}
}
if(state === "leftmove"){
if(key===68){
leftback();
}
}
if(state === "rightmove"){
if(key===65){
rightback();
}
}
if(state === "upmove"){
if(key===83){
upback();
}
}
if(state === "downmoved"){
if(key===87){
downback();
}
}
}
function leftmove(){
document.getElementById('bm').innerHTML = "";
animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'leftmove.json',
});
state = "leftmove";
}
function leftback(){
document.getElementById('bm').innerHTML = "";
animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'leftback.json',
});
state = "idle";
}
function rightmove(){
document.getElementById('bm').innerHTML = "";
animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'rightmove.json',
});
state = "rightmove";
}
function rightback(){
document.getElementById('bm').innerHTML = "";
animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'rightback.json',
});
state = "idle";
}
function upmove(){
document.getElementById('bm').innerHTML = "";
animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'upmave.json',
});
state = "upmove";
}
function upback(){
document.getElementById('bm').innerHTML = "";
animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'upback.json',
});
state = "idle";
}
function downmove(){
document.getElementById('bm').innerHTML = "";
animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'downmove.json',
});
state = "downmoved";
}
function downback(){
document.getElementById('bm').innerHTML = "";
animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'downback.json',
});
state = "idle";
}
</script>
我能够找到另一种方法来更好、更快、更聪明地做我正在做的事情,对于那些关心的人,我会解释我所做的,只是我想做的是查看一个简单的svg 基于按下的按钮,所以每次用户在键盘上按下 W、S、A、D 时,我都必须删除旧的 svg 并查看新的 svg 但是,将其取下并放入会导致 Flickr 和对于网速较慢的人,切换到新的 svg 可能会延迟一秒以上,
我所做的是我使用了一个 js 动画引擎,它可以使用简单的代码为您的元素制作动画,我发现的最好的是:
https://github.com/juliangarnier/anime
欢迎,好吧,我有10个lottie动画,我想在同一个div中一一展示。当按下某个按钮时,我为每个动画执行一个函数,并在函数开始时删除 div 的所有内容以显示新内容,但很明显这会导致闪烁,我想知道如果有更聪明的方法,不会造成闪烁,请注意,我也算是网站开发的初学者
这是一个link http://animationstest.atwebpages.com/ ,使用 W,A,D,S 移动,没有响应所以使用 pc
但是请注意,例如,当您快速按 a 然后按 d 时,Flickr 不会出现
<script>
var animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'idle.json',
});
var state = "idle";
document.onkeydown = function(e){
e = e || window.event;
var key = e.which || e.keyCode;
if(state === "idle"){
if(key===65){
leftmove();
}
if(key===68){
rightmove();
}
if(key===87){
upmove();
}
if(key===83){
downmove();
}
}
if(state === "leftmove"){
if(key===68){
leftback();
}
}
if(state === "rightmove"){
if(key===65){
rightback();
}
}
if(state === "upmove"){
if(key===83){
upback();
}
}
if(state === "downmoved"){
if(key===87){
downback();
}
}
}
function leftmove(){
document.getElementById('bm').innerHTML = "";
animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'leftmove.json',
});
state = "leftmove";
}
function leftback(){
document.getElementById('bm').innerHTML = "";
animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'leftback.json',
});
state = "idle";
}
function rightmove(){
document.getElementById('bm').innerHTML = "";
animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'rightmove.json',
});
state = "rightmove";
}
function rightback(){
document.getElementById('bm').innerHTML = "";
animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'rightback.json',
});
state = "idle";
}
function upmove(){
document.getElementById('bm').innerHTML = "";
animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'upmave.json',
});
state = "upmove";
}
function upback(){
document.getElementById('bm').innerHTML = "";
animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'upback.json',
});
state = "idle";
}
function downmove(){
document.getElementById('bm').innerHTML = "";
animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'downmove.json',
});
state = "downmoved";
}
function downback(){
document.getElementById('bm').innerHTML = "";
animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'downback.json',
});
state = "idle";
}
</script>
我能够找到另一种方法来更好、更快、更聪明地做我正在做的事情,对于那些关心的人,我会解释我所做的,只是我想做的是查看一个简单的svg 基于按下的按钮,所以每次用户在键盘上按下 W、S、A、D 时,我都必须删除旧的 svg 并查看新的 svg 但是,将其取下并放入会导致 Flickr 和对于网速较慢的人,切换到新的 svg 可能会延迟一秒以上,
我所做的是我使用了一个 js 动画引擎,它可以使用简单的代码为您的元素制作动画,我发现的最好的是: https://github.com/juliangarnier/anime