标签: bodymovin

在slider和shuffle洛蒂动画都应该从运行0 到100，然后回0切换时; 喜欢box动画。

但是，您可以看到slider动画在最后一帧中消失，并且shuffle动画似乎只在其停止之前完成了动画的一部分。

如何让slider和shuffle动画以与box它们从 0 -> 100 运行然后再次返回的方式相同的方式运行？

请注意，slider并box有额外的代码，其中一次只能有一个打开状态。

const anim1 = lottie.loadAnimation({
  container: document.getElementById("box"),
  renderer: "svg",
  loop: false,
  autoplay: false,
  path:
    "https://cdn.statically.io/gist/moofawsaw/b8abeafe008f8b9ef040199c60a15162/raw/296dde84544ed1b41d5acfa303cca21c3ceee70f/lottie_box.json"
});
anim1.setSpeed(5);

const anim2 = lottie.loadAnimation({
  container: document.getElementById("slider"),
  renderer: "svg",
  loop: false,
  autoplay: false,
  path:
    "https://gist.githubusercontent.com/moofawsaw/de2c253620930f2d582daceebff72665/raw/c5d7f528325aed481e6479da1c6921e62066de0b/lottie_sliders.json"
});
anim2.setSpeed(16);

const anim3 = lottie.loadAnimation({
  container: document.getElementById("shuffle"),
  renderer: "svg",
  loop: false,
  autoplay: false,
  path: …

让我的动画在悬停时触发播放.我把一切都搞定了,但是当我试图再次盘旋时,似乎没有任何效果.

我写错了什么想法？

var squares = document.getElementById("test");
var animation = bodymovin.loadAnimation({
    container: test,
    renderer: "svg",
    loop: false,
    autoplay: false,
    path: "https://dl.dropboxusercontent.com/BodyMovin/squares.json"
});

squares.addEventListener("mouseenter", function () {
    animation.play();
});

function playAnim(anim, loop) {
    if(anim.isPaused) {
        anim.loop = loop;
        anim.goToAndPlay(0);
    }
}

function pauseAnim(anim) {
    if (!anim.isPaused) {
        anim.loop = false;
    }
}

为我的无知而提前道歉,因为我怀疑这是一个非常容易回答的问题,但我被困住了.

我正在使用bodymovin在网站上播放svg动画.我想使用onComplete事件在动画完成时触发一个函数,但我无法弄清楚如何编码它.

我试过了

 $("#bodymovin").on("onComplete", function(){
        console.log('test completed');
    });

和

 document.getElementById("bodymovin").addEventListener("complete", doalert);

    function doalert() {
        console.log('test completed');
    }

Bodymovin docs - https://github.com/bodymovin/bodymovin#events

谢谢

我正在尝试使用 lottie 为 After Effects 中创建的 SVG 动画制作动画。我使用 bodymovin 扩展来导出 JSON 数据文件。但是，我也注意到导出包含一些 PNG 图像。我还收到控制台错误，说找不到 PNG。

当我在 AE 中使用 SVG（AI 文件）时，为什么要导出 PNG。下面是我的代码和错误。

索引.ts

import * as lottie from 'lottie-web';
import * as header from './assets/header.json';

import './css/base.sss';

var animation = lottie.loadAnimation({
    container: document.getElementById('header'),
    animationData: header,
    renderer: 'svg/canvas/html',
    autoplay: true
});

但是我收到以下错误，无法找到图像。为什么 bodymovin 导出/寻找 png？我需要SVG。

Chrome 控制台错误（对不起，直到 10 次才能嵌入）

我似乎无法让 colorFilter 属性与我的 .json 文件一起使用。没有错误，但颜色显然没有改变。

<LottieView
     style={{
         width: 90,
         height: 90,
     }}
     colorFilters={
       [
         {
         keypath: "asdf",
         color: "#abcdef",
         }
       ]
     }
     source={badge.icon}
     loop={false}
/>

我正在使用 BodyMovin 从 After Effects 导入 .json，但我是否正确更改了图层名称？如果不是的话，这到底为什么不起作用？

该文档有事件和事件监听器。我可以让 EventListeners 触发，但 Events 没有足够的文档让我开始。有什么区别，你如何使用？谢谢你。

https://github.com/airbnb/lottie-web#events

事件（不行，怎么用？）

// 从文档

• 完成
• 循环完成
• 输入框
• 段开始

您还可以将 addEventListener 与以下事件一起使用：

• 完全的
• 循环完成
• 输入框
• 段开始
• config_ready（初始配置完成时）
• data_ready（当动画的所有部分都已加载时）
• data_failed（部分动画无法加载时）
• Loaded_images（当所有图像加载成功或错误时）
• DOMLoaded（当元素被添加到 DOM 时）
• 破坏

// 结束文档

从标准的 addEventListener 用法来看，这有效...

birbSequence.addEventListener('loopComplete', (e) => {
    console.log(e);
});

尽管“完成”不会触发。

但是要尝试像 onEnterFrame 这样的事件中的东西？

var birbSequence = lottie.loadAnimation({
    container: bodyMovinContainer1,
    loop: true,
    renderer: 'svg',
    path: 'Birb Sequence 1.json',
    onEnterFrame: function(e) { console.log(e); }
});

我对使用 Lottie 真的很陌生，所以可以使用一些帮助。

只是想看看如何使用 Events

我正在使用 Adob​​e After Effects 和 React Lottie 创建动画，并且我有许多由 Bodymovin 扩展生成的 json 文件。我以这种方式导入文件：

import * as initial from './white_bird.json';
import * as hoverOn from './white_bird_hover_on.json';
import * as hoverOff from './white_bird_hover_off.json';

但是，当我有 6 个其他组件时，它们看起来相同，但仅在导入的文件上彼此不同。我怎样才能把这些行写在上面，如下所示：

const data = {
    initial: import * as initial(`./${some_param}.json`),
  };

请注意，我必须像“* as”一样导入它，以另一种方式这是行不通的

react-bodymovin 非常适合我的 reactjs 应用程序，但是当迁移到 nextjs 时，它不起作用。我收到以下错误：

ReferenceError: window is not defined
    at Object.<anonymous> (/Users/xyz/work/web/dict/next/node_modules/bodymovin/build/player/bodymovin_light.min.js:1:226)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/xyz/work/web/dict/next/node_modules/react-bodymovin/lib/ReactBodymovin.js:2:17)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)

Justa 导入库 bodymovin，它会导致以上所有

import React, { Component } from 'react';
import Router from 'next/router';
import Layout from '../components/Layout';
import SuggestionList from …