Question

我已经使用After Effects扩展程序创建了Bodymovin动画。

我遵循了tesla4给here的指示：

从生成的 demo.html 文件中提取所有非JavaScript代码通过扩展。
另存为.js文件
在Wordpress中添加了.json和.js MIME类型
在.js文件中，将animationData: animationData替换为path: '/wp-content/uploads/data.json', assetsPath: '/wp-content/uploads/'
将.js和.json文件上传到媒体库
在页面上创建了<div id = "lottie"></div>。编辑...这是错误的，请参阅下面的答案。我创建了<div class="lottie">。
在结束处<body>上方的 footer.php 中添加了此代码标签：<script src="/wp-content/uploads/bodymovin.js" type="text/javascript"></script>

.js和.json文件正在正常加载。

但是我遇到以下错误...

globe.js:formatted:4726 Uncaught TypeError: Cannot read property 'appendChild' of undefined
    at SVGRenderer.configAnimation (globe.js:formatted:4726)
    at AnimationItem.configAnimation (globe.js:formatted:6535)
    at XMLHttpRequest.a.onreadystatechange (globe.js:formatted:3806)

调试代码时，可以看到这是因为动画的wrapper变量未定义。之所以这样，是因为context变量未定义。

我发现其他人也有类似的问题，解决方案是将.js代码添加到窗口的onload()事件中。因此，我尝试将代码包含在window.addEventListener("load",function(event) { MY CODE },false);

中

我的.js文件中没有太多代码可包含在此处，但这是最后一部分，根据上述内容自定义...

var params = {
    container: document.getElementById('lottie'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'wp-content/uploads/2018/12/globe.json',
    assetsPath: 'wp-content/uploads/2018/12/'
};
var anim;
anim = lottie.loadAnimation(params);

非常感谢您的帮助。

Answer 1

不幸的是，问题出在我的人为错误上。包含的class中的id而非<div>被设置为lottie。

在Wordpress中显示bodymovin动画时出现问题-无法读取未定义的属性'appendChild'

1 个答案: