时间戳

首页 > 解决方案 > Ionic v1 项目中的 Lottie 动画

angularjs - Ionic v1 项目中的 Lottie 动画

问题描述

我正在更新使用 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);

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

我感谢所有的帮助！

标签： angularjsionic-frameworklottiebodymovin

解决方案

我设法解决了它。

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

在 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);

推荐阅读