bodymovin实现将AE动画转换成HTML5动画
做一个简单的记录,直接贴代码吧,主要还是设计师提供的那个json
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f7f7f7;
}
</style>
<script src="https://www.twobike.cn/static/lib/bodymovin/bodymovin.min.js"></script>
</head>
<body>
<div class="body-movin" id="bodyMovin">
</div>
</body>
<script>
var animData = {
wrapper: document.getElementById('bodyMovin'),
animType: 'svg',
loop: true,
prerender: true,
autoplay: true,
path: "https://www.twobike.cn/static/lib/bodymovin/loading-bike.json"
};
bodymovin.loadAnimation(animData);
</script>
</html>
demo地址
https://www.twobike.cn/demo/20181210/body-movin.html