如何在使用 Lottie 和 Javascript 完成动画后显示页面
How to show page after animation complete with Lottie and Javascript
我是个初学者,正在尝试 SVG 动画。
我制作了一个动画并使用 Lottie 将其加载到我的简单 html 页面中。
但我一直试图让它自我毁灭并显示其余页面内容,即页眉和p。
我看到这段代码,用谷歌搜索,但不确定把它放在哪里,按照我认为合乎逻辑的方式将它粘贴到下面。但是没有得到我想要的。
ani.addEventListener('complete', function(){
ani.destroy()
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="master.css">
<script src="master.js"></script>
<script src="lottie.js"></script>
<title>Document</title>
</head>
<body onload="start()">
<div id="velkommen"></div>
<header>
<h1>Min header</h1>
</header>
<p>tekstteksttekstketkekte</p>
</body>
</html>
window.onload(start())
function start(){
var container = document.getElementById("velkommen");
var animation = bodymovin.loadAnimation({
container: container,
renderer: 'svg',
loop: false,
autoplay: true,
path: 'data.json'
});
}
我发现了!如果有人想知道:
function start(){
var anim;
var animdata ={
container: document.getElementById("velkommen"),
renderer: "svg",
loop: false,
autoplay: true,
path: "data.json"
};
anim = bodymovin.loadAnimation(animdata);
anim.addEventListener('complete',stopa);
}
function stopa(){
document.getElementById("velkommen").style.display = "none";
}
我是个初学者,正在尝试 SVG 动画。 我制作了一个动画并使用 Lottie 将其加载到我的简单 html 页面中。 但我一直试图让它自我毁灭并显示其余页面内容,即页眉和p。
我看到这段代码,用谷歌搜索,但不确定把它放在哪里,按照我认为合乎逻辑的方式将它粘贴到下面。但是没有得到我想要的。
ani.addEventListener('complete', function(){
ani.destroy()
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="master.css">
<script src="master.js"></script>
<script src="lottie.js"></script>
<title>Document</title>
</head>
<body onload="start()">
<div id="velkommen"></div>
<header>
<h1>Min header</h1>
</header>
<p>tekstteksttekstketkekte</p>
</body>
</html>
window.onload(start())
function start(){
var container = document.getElementById("velkommen");
var animation = bodymovin.loadAnimation({
container: container,
renderer: 'svg',
loop: false,
autoplay: true,
path: 'data.json'
});
}
我发现了!如果有人想知道:
function start(){
var anim;
var animdata ={
container: document.getElementById("velkommen"),
renderer: "svg",
loop: false,
autoplay: true,
path: "data.json"
};
anim = bodymovin.loadAnimation(animdata);
anim.addEventListener('complete',stopa);
}
function stopa(){
document.getElementById("velkommen").style.display = "none";
}