Ionic v1 项目中的 Lottie 动画

Question

我正在更新使用 Ionic v1 制作的现有项目，我必须在其中添加 Lottie 动画。

我在 Github - https://github.com/yannbf/ionic-lottie/issues/1

上找到了类似的帖子

我试图在我的 index.html 中添加 bodymovin 脚本，并从控制器调用该函数，但没有任何反应。我没有收到任何错误，所以我不确定这里出了什么问题。

这是我正在使用的脚本 - https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.2/lottie.js

这是我用来调用 lottie 函数的代码

$scope.animData = {
  wrapper: angular.element(document.getElementById('lottie')),
  animType: 'html',
  loop: true,
  prerender: true,
  autoplay: true,
  path: 'js/data.json'
};
$scope.anim = bodymovin.loadAnimation($scope.animData);

有没有人有可行的解决方案或知道我可能哪里错了。

感谢大家的帮助！

Answer 1

我设法解决了。

如果有人遇到同样的问题，问题是 angular.element(document.getElementById('lottie')) returns 一个对象。

在 ionic v1 中显示 lottie 动画的正确方法是：

$scope.animData = {
    wrapper: angular.element(document.getElementById('lottie'))[0],
    animType: 'svg',
    loop: true,
    prerender: true,
    autoplay: true,
    path: 'js/data.json'
};
$scope.anim = bodymovin.loadAnimation($scope.animData);

Ionic v1 项目中的 Lottie 动画

Lottie animation in Ionic v1 project

angularjs

ionic-framework

lottie

bodymovin