在HTML网页上滚动播放Lottie / Bodymovin动画
Lottie / Bodymovin动画是一种基于JSON格式的动画文件，可以在HTML网页上实现滚动播放的效果。它通过将动画序列化为JSON格式，然后使用JavaScript库来解析和渲染动画。
Lottie / Bodymovin动画的优势在于它可以实现高度可定制化的动画效果，同时具有较小的文件大小和良好的性能表现。它支持多种动画特效，包括形状变换、颜色变换、透明度变换等，可以实现各种各样的动画效果，从简单的图标动画到复杂的场景动画。
Lottie / Bodymovin动画的应用场景非常广泛。它可以用于网页设计中的各种动画效果，如页面加载动画、交互式元素动画、背景动画等。此外，它还可以应用于移动应用程序的界面设计，为用户提供更加生动和吸引人的交互体验。
腾讯云提供了一款名为"腾讯云动画"的产品，可以帮助开发者在HTML网页上滚动播放Lottie / Bodymovin动画。腾讯云动画提供了丰富的动画模板和素材库，开发者可以根据自己的需求选择合适的动画效果，并通过简单的配置和集成即可在网页上实现滚动播放的效果。腾讯云动画还支持动画的自定义和交互功能，开发者可以根据自己的需求进行个性化定制。
更多关于腾讯云动画的信息和产品介绍，请访问腾讯云官方网站：腾讯云动画
相关·内容
我想要创建一个没有任何外部依赖的单一动画网页组件。
直到现在，当我使用lottie时，我提供了通向lottie JSON的路径
lottie.loadAnimation({
[...]
path: 'data.json' // the path to the animation json
});
但是我需要打包我的web组件，而不需要外部引用JSON。
我的第一个想法是将JSON内容放入blob中，然后使用URL.createObjectURL()创建本地URL。
是否有更直接的方法来创建已经加载了JSON的动画？
浏览 3提问于2019-09-17得票数 3
1回答
所以我有一个lottie动画，这正是我需要的动画，但是它只能自动播放或悬停播放，或者有视频控制。
我想要做的是在动画中伪装一个按钮，并且只在它被点击时播放动画。
我不需要担心停止按钮或重置它，因为这是一次性的事情。下面是一些捕获的动画照片，所以它会清楚我想要什么。
我希望发送按钮是一个按钮，因为现在它只是我在after effects中制作的lottie动画的一部分。
我在Adobe after effects中制作了lottie动画，并使用bodymovin将其导出为lottie动画。
我觉得肯定有一种方法让JavaScript能够在动画开始之前停止动画，而只在我点击某个按钮后播放。然后我可
浏览 65提问于2021-02-27得票数 0
1回答
我正在寻找一种方法来播放相同的lottie动画点击不同的容器，但似乎不能让它工作。我该怎么做呢？ 以下是示例代码： $('.lottie-container').on('click', function() {
playlottie($(this));
})
function playlottie(lottiecontainer) {
var animation = bodymovin.loadAnimation({
container: lottiecontainer,
renderer: 'svg',
浏览 27提问于2021-02-10得票数 0
1回答
离子v1项目中的洛蒂动画
、、、
我正在更新一个用离子v1制作的现有项目，在这个项目中我必须添加一个洛蒂动画。 我在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 =
浏览 17提问于2019-04-30得票数 0
回答已采纳
我正在尝试使用ScrollMagic来控制一个TimelineMax，它可以移动乐透动画的播放头。
因此，当用户滚动时，动画相对于滚动的速度和方向播放。我已经很接近了，需要一点帮助才能把效果带回家。
首先，我包含了我的库
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenM
浏览 35提问于2019-10-25得票数 0
回答已采纳
我正在尝试使用lottie player web组件。我在github上遵循了他们的说明，并将其与npm一起安装： npm install --save @lottiefiles/lottie-player 将lottie player添加到html中，如下所示： <header>
<div>
<lottie-player
src="https://assets7.lottiefiles.com/datafiles/gbQKQKT9Z0WGdT9/data.json"
浏览 91提问于2020-04-29得票数 0
1回答
我正在通过loadHTMLstring方法将两个JS文件加载到WKWebView中。这些脚本嵌入到应用程序中，因此不会执行HTTP调用。第一个脚本被加载到head标记中。第二个是内联。这是为Lottie web player准备的：https://github.com/LottieFiles/lottie-player。因此，第一个加载lottie-player.js，而第二个加载lottie-player元素之后的动画。 第二个脚本的功能类似于： const player = document.querySelector("lottie-player");
// or l
浏览 32提问于2020-07-08得票数 0
回答已采纳
1回答
我创造了不同的动画思想Bodymovin。当滚动条到达动画时，我想启动动画。我正在试着想办法，但不幸的是我做不到。 我正在使用Gatsby JS (React框架)。我将代码粘贴到.js文件的下面： import React, { Component } from 'react'
import Lottie from 'react-lottie'
import animationData from './paginaweb.json'
class UncontrolledLottie extends Component {
rende
浏览 21提问于2019-10-11得票数 0
1回答
我对编码很陌生，在做真正的项目时，我试着尽可能多地学习。
我有8个div，每个div都有单独的lottie动画(每个动画都有自己的.json文件)。我想在悬停时播放各自的div动画。
所以我的html看起来像这样
var containerHorloge = document.getElementById("anim-horloge");
var containerBalance = document.getElementById("anim-balance");
var containerOrdi = document.getElementById(
浏览 2提问于2022-03-23得票数 2
回答已采纳
可以在另一个组件上调用方法吗？
我已经创建了需要在单击时或在发生特定事件时进行切换的。
例如，我创建了一个React组件，其功能相当于媒体播放器上的播放按钮。我使用LottieJS和bodymovin来制作SVG按钮的动画。如果歌曲正在播放，按钮会显示暂停符号。如果歌曲停止播放，则会显示播放符号。
这是我的PlayButton组件...
import React from 'react';
import Lottie from 'react-lottie';
import PropTypes from 'prop-types';
import s
浏览 3提问于2018-03-06得票数 0
3回答
布景中的乐天动画
、、
是否可以在 canvas 画布中加载Lottie动画
我试过以下样本
bodymovin.loadAnimation({
wrapper: animateElement, // div element
loop: true,
animType: 'canvas', // fabricjs canvas
animationData: dataValue, // AE json
rendererSettings: {
浏览 1提问于2018-08-31得票数 0
我一直在搜索多个论坛，寻找这个问题的解决方案-我正在尝试编码多个lottie动画，当每个动画进入HTML网页上的浏览器窗口时播放。有没有人有可行的解决方案？ 我已经尝试了使用Waypoint.js的解决方案，但不幸的是，我无法使用该方法播放超过一个动画。如果有人知道如何让Lottie和Waypoint很好地合作，我将不胜感激。 我对任何脚本建议都持开放态度，即使它们需要我加载依赖项才能工作。任何帮助都将不胜感激。此外，我应该注意到，我是一个全新的Lottie，我是一个动画师，所以请留下详细的解释，因为我是一个javascript的初学者。
浏览 125提问于2019-03-13得票数 0
我是一个初学者，正在尝试SVG动画。我制作了一个动画，并使用Lottie将其加载到我简单的html页面中。但我一直试图让它自己销毁，并显示页面内容的其余部分，即页眉和p。 我看到了这段代码，用谷歌搜索了一下，但不知道放在哪里，找到了我认为合乎逻辑的内容，并将其粘贴在下面。但是没有得到我想要的。 ani.addEventListener('complete', function(){ ani.destroy() }) <!DOCTYPE html>
<html lang="en">
<head>
<meta ch
浏览 22提问于2019-09-24得票数 2
回答已采纳
我有一个简单的代码，它使用库进行、SVG动画。
有2动画。我需要在加载上创建第一个，并在用户单击该按钮上的时进行第二个启动。同时，当第二动画开始时，第二动画替换第一动画。
因此，在我的预期中，我需要更改、JS、函数的参数。
在lottie函数中如何更改路径参数并启动第二个动画，而不是将第一个动画替换为第二个动画，有什么选择吗？
HTML:
<div id="element">
<button onclick="myFunction()">Click me</button>
</div>
<script sr
浏览 0提问于2020-10-20得票数 0
1回答
我使用一个解释模板()来创建一些带有后效果的简短动画，并使用Bodymovin/lottie这样的工具来呈现HTML5画布/SVG动画。
不幸的是，在Pixity中使用的表达式有问题，呈现的动画在抖动中跳跃。我对后效没有太多的经验，我也不想重写这些表达式。
我想知道是否有一种方法可以将表达式简化为值。有什么建议吗？
浏览 5提问于2020-05-16得票数 1
回答已采纳
2回答
我用lottie在网页上添加了演示动画，但是播放速度太快了。怎样才能达到正常速度？下面的链接是一个问题动画。
问题动画链接：
我的动画：
After Effect aep文件：
我的代码
var animate = lottie.loadAnimation({
container: document.getElementById("hello"),
renderer: 'svg',
autoplay: true,
loop:true,
path: 'animation2.json'})
浏览 1提问于2018-05-24得票数 8
回答已采纳
1回答
我被困在这个问题上花了一整天。基本上，我试图在我的网站上实现一个动画，使用Lottie。我的动画格式是1080*1920。问题是，给定一个div，使用：
width: auto; height: auto;或width: 100%; height: 100%;
导出的动画总是大于封闭的父级动画。这个问题特别出现在智能手机大小的屏幕上。我试图改变所有的参数，但都失败了。我甚至触及了java脚本代码，在Lottie中，您可以指定呈现的选项：
您可以在这里看到动画：
import './styles/main.scss'
const lottie = require(
浏览 2提问于2019-11-13得票数 0
回答已采纳
我通过使用 Lottie -web来制作Lottie动画，现在我试图动态地更改颜色，所以我使用了Lottie API()。在这种情况下，我得到了更改颜色的keyPath，但不知道如何更改对象的颜色。
这是创建lottie对象动画的代码。
var animData = {
container: animationContainer,
renderer: "canvas",
loop: true,
autoplay: true,
rendererSettings: {
preserveAspectRatio
浏览 0提问于2019-08-01得票数 1
1回答
在我的Laravel家园项目中，我想使用airbnb/lottie来展示动画。我已经将我的lottie.js和script.js放在了资产文件夹中。我的script.js看起来是这样的：
var anim = document.getElementById('bodymovin');
var animData = bodymovin.loadAnimation({
container: anim,
renderer: 'svg',
loop: false,
autoplay: false,
path: 'data
浏览 1提问于2020-03-23得票数 1
回答已采纳
我制作了一个带有移动旗帜和波浪的船的动画，并使用Bodymovin将其导出到JSON。我使用了波形翘曲效果的旗帜和波浪，但由于Lottie不支持这种效果，我修复了它使用自动跟踪，现在动画工作时，预期在HTML。问题是，我需要它在iOS上工作，但是在iOS上运行时，标志的红色部分和小波纹在动画中丢失了。我甚至尝试在一个Android应用程序中运行它，所有的东西都在那里工作。以前有人遇到过这样的事吗？
我已经附上了我想要动画的图片，文件结构，还有
浏览 17提问于2020-12-05得票数 1
回答已采纳
1回答
我们使用来制作一些光滑的动画，但是我找不到任何关于在lottie中的scaleMode有哪些选项的文档。
var animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json',
rendererSettings: {
scaleMode: 'noScale'
}
})
有人知
浏览 0提问于2018-12-26得票数 1
macOS Mojave After Effects 17.0.2 (CC 2020)最新版本的Chrome/FF/Safari和Lottie/Bodymovin
在Safari中缩放svg动画(transform: scale(>1))时，它将被渲染为非常像素化/模糊。在Chrome和Firefox中，渲染没有问题。这是一个已知的问题吗?如果是，是否有已知的解决方法？
你可以在这里找到动画：
浏览 4提问于2020-02-17得票数 2
我有一个简单的html可以显示我在After Effects中制作的动画，但我无法在本地加载时显示动画(data.json)。但如果我通过LottieFiles上传动画，并使用在html文件中生成的链接，它就可以工作。谁能解释一下为什么我不能通过我的data.json加载动画，而不是从生成的链接？ 下面我放了我到目前为止的代码： <head>
<!-- Meta -->
<meta charset="UTF-8">
<title>Bodymovin Demo</title>
<
浏览 60提问于2019-12-17得票数 1
2回答
我想播放三个不同的乐透档案，一个后各：
所以我有三个用lottie文件制作的动画：
黄车
蓝车
红车
我想要的是首先播放黄色汽车动画，当它完成播放蓝色汽车动画，然后播放红色汽车动画，一旦完成所有的一切，一次又一次。
这是顺序:黄色轿车->蓝色轿车->红色轿车->黄色汽车..。(重复这个序列是无限的)
每部动画持续3.2秒
但它只播放一次，什么是失败？
var animation1 = bodymovin.loadAnimation({
container: document.getElementById('animation1'),
浏览 4提问于2022-09-19得票数 0
我试着和Kotlin/JS一起使用Lottie。
我用Dukat创建了一个Lottie外部声明文件，它为我提供了一个名为AnimationConfig的外部接口(表示将由LottiePlayer播放的动画参数)、一个名为LottiePlayer的外部接口(表示所有动画播放器函数)，以及一个名为Lottie (类型为LottiePlayer)的变量：
@file:JsModule("lottie-web")
@file:JsNonModule
@file:Suppress("INTERFACE_WITH_SUPERCLASS", "OVERRIDING_F
浏览 20提问于2022-09-14得票数 0
回答已采纳
我正在使用一个名为lottie-web的npm模块，它基本上为您提供了一个svg动画，如果您给它一个json数据文件，我是从adobe效果中获得的(为了保持简短，它所做的只是通过id获取一个html元素，在路径上接受一个json数据文件并在给定元素中加载svg )，.I am使用一个带有express的节点应用程序，并使用handlebar(Hbs)将前端呈现给浏览器，因此，在本例中，我们需要附加lottie-web cdn链接的脚本标记，或者另一种方法是使用浏览器处理转换下面给定的文件，然后运行浏览器化myfilename -o bundle.js命令，然后使用脚本标记中的bundle.js
浏览 3提问于2020-06-27得票数 0
回答已采纳
1回答
我遵循了Lottie的每个本机响应示例，并查看了具有相同问题的问题，比如，但是我已经成功地导入了一个通过Bodymovin通过Bodymovin导出到.json的动画，在这里使用React本机：
import React, {Component} from 'react';
import Animation from 'lottie-react-native';
import {
StyleSheet,
Text,
View,
Animated,
Easing,
ScrollView,
RefreshControl,
AppReg
浏览 3提问于2017-07-14得票数 2
我有一个iOS应用程序，将显示和播放乐透动画。我成功使用的动画来自www.lottiefiles.com，所有的动画都是从那里开始的。
我已经在After Effects中创建了自己的动画，并使用BodyMovin导出，然后尝试显示它，但没有显示任何内容。
Xcode抱怨图片丢失了，但它从来没有要求(也没有)从www.lottiefiles.com下载的JSON动画的图片，应用程序仍然在播放它们。
我添加了图像，但仍然什么都没有显示，并且仍然抱怨图像丢失。
我尝试了BodyMovin的不同设置，例如：“原始资源名称-使用原始项目名称导出资源”&“包含在JSON中-包含以json编码的光
浏览 1提问于2018-07-02得票数 1
我正在使用react Bodymovin包()嵌入Bodymovin动画，但是我想在它播放一次之后循环一段动画。
我可以看到使用Bodymovin的HTML很简单，因为您只需要使用相关的方法来完成，例如(假设div有ID bodymovin )
const params = {
container: document.getElementById('bodymovin'),
renderer: 'svg',
loop: false,
autoplay: false,
animationData: animationData
浏览 0提问于2019-11-25得票数 4
回答已采纳
2回答
为我的无知提前道歉，因为我怀疑这是一个很容易回答的问题，但我被卡住了。
我正在使用bodymovin在网站上播放svg动画。我想使用onComplete事件在动画完成时触发一个函数，但我不知道如何编写它。
我试过了
$("#bodymovin").on("onComplete", function(){
console.log('test completed');
});
和
document.getElementById("bodymovin").addEventListener("compl
浏览 14提问于2017-02-10得票数 8
回答已采纳
我有一个后效动画，超级简单，广场移动(AE形状)。我使用Bodymovin将动画导出为.json，并在我的项目中使用Lottie添加json文件。到现在为止还好。
问题从这里开始->在运行时，用我在项目中的图像替换那个“正方形”。因为这个图像可能会改变，所以我不能将它静态地添加到我的AE动画中，所以需要在运行时动态地添加它。在Android系统中，几乎没有关于如何做到这一点的信息？
浏览 1提问于2019-02-04得票数 7
回答已采纳
我将Bodymovin与ScrollMagic和GSAP结合使用，当你来回滚动时，可以通过一系列图像进行动画处理。一切都很好，除了当我走到最后的时候，它不会停留在最终的图像上，而是变成白色。
我首先加载的库：
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min
浏览 9提问于2020-04-30得票数 0
2回答
Lottie UWP支持
、、、、
我在Xamarin.Forms on iOS和UWP上尝试着和Lottie打交道，现在我完全糊涂了。因为我的UWP应用程序没有显示动画，我搜索了一下，发现UWP不受Lottie的支持。但是因为Nuget可以从我的UWP应用程序中引用，我查看了Nuget和Lottie团队的描述，它是这样的。
那么现在什么是正确的呢？如果UWP得到支持，是否还需要采取其他步骤？
浏览 0提问于2018-11-14得票数 0
回答已采纳
我已经用新的意图在android上实现了Lottie动画飞溅屏幕，在iOS中有同样的方法吗？
我知道LaunchScreen.storyboard无法做到这一点，但是有没有办法用Lottie动画在屏幕上生成一个新的UIViewController显示，在动画播放时，我将在后台任务中准备Xamarin应用程序，动画结束时调用LoadApplication( App )。
或者，当你在iOS上启动你的应用程序时，有没有其他方法可以开始播放乐天动画呢？
将Lottie动画设置为Xamarin窗体中的主页不是一个选项，等待Xamarin窗体启动应用程序需要几秒钟时间，在此期间，我想显示动画，而不是之后
浏览 2提问于2021-12-11得票数 2
回答已采纳
你好，我是第一次使用lottie动画，这是我第一次在react本机上使用它，我到了这样的地步: lottie动画播放，当动画用onAnimationFinish完成时，它应该导航到一个新页面，它在android上运行得很好，但是当我在ios上测试动画播放时，当动画结束时，它会把你留在同一个页面上，而onAnimationFinish没有触发。
const progress = useRef(new Animated.Value(0)).current;
const handleLikeAnimation = () => {
Animated.tim
浏览 9提问于2022-06-03得票数 0
1回答
我有一个lottie动画，我已经将它集成在我的代码中。我想在初始加载时显示一个特定的帧，当用户悬停它时，动画应该从头开始并完成它。
这是我想要在第一次加载中显示的内容-
这是完整的动画-
这是我的代码
let iconMenu = document.querySelector('.bodymovinanim1');
let animationMenu = bodymovin.loadAnimation({
container: iconMenu,
renderer: 'svg',
loop: false,
autoplay
浏览 76提问于2020-05-09得票数 0
回答已采纳
我有一个鼠标控制器lottie动画的问题。 因此，我创建了这支笔，用来摆弄:) https://codepen.io/duderion/pen/bGbXNqe 目标是，lottie动画从视口的顶部到底部(减去顶部菜单)，应该裁剪左侧和右侧(您不能一次显示整个动画，因此裁剪是一种自然行为) 我认为(现在仍然认为) "xMidYMax slice“是正确的方法。我认为这是“高度最大化，左右切分”…… 我试着在bodymovin渲染器设置中设置它 var animData = {
container: document.getElementById("sec"),
浏览 75提问于2019-10-02得票数 1
回答已采纳
我正在使用Airbnb的Lottie从jpg序列创建动画，当页面加载时播放。问题是，网页一打开，动画就开始了，但当图像加载时，动画似乎已经是一半甚至是结尾了。处理这个问题的最好方法是什么，以便用户从一开始就能看到动画？
我尝试过使用DOMLoaded和data_ready事件侦听，但它们似乎都不能解决这个问题。
目前我的代码如下：
var params = {
container: document.getElementById('hero-anim'),
animationData: animationData,
r
浏览 5提问于2019-11-22得票数 1
2回答
我尝试使用Bodymovin扩展在After Effects中创建的JSON文件运行动画，但不幸的是我无法在模拟中运行动画。JSON文件本身可以工作，因为我在HTML页面上演示了它，它工作得很流畅。所以代码中一定有什么地方出了问题。我已经尝试了很多教程，这么多不同的代码行，但都没有成功。 JSON文件被简单地拖到我的Xcode项目中，这个项目被称为"fire“。根据许多教程，我唯一需要做的就是在"ViewController“里面。构建它没有问题，但当模拟它时，iPhone上只有一个空白屏幕。在运行之后，它会自动在Xcode中打开调试控制台，但没有任何错误。 ViewCont
浏览 49提问于2019-08-27得票数 1
我正在使用这个动画。
由于某些原因，持续时间支柱不起作用。
<LottieView
autoPlay={true}
duration={60000}
loop={false}
source={assets.LOTTIE_LEVEL_PROGRESS}
style={styles.lottie}
/>
正如你所看到的，我正在尝试播放60秒的动画，但在实时播放大约4秒。
lottie库包含接收从0到1数字的速度属性。
有没有办法让这个动画播放60秒(动态数字，可能会变成1
浏览 36提问于2021-05-12得票数 0
我有一个AnimatedVisualPlayer在我的网页上播放彩票：
<winui:AnimatedVisualPlayer
x:Name="player"
AutoPlay="true" Width="150" Height ="150" PlaybackRate="1.5">
<lottie:LottieVisualSource
UriSource="ms-appx:///Lottie/waiter.json" />
</
浏览 1提问于2020-05-26得票数 1
回答已采纳
1回答
我有两个带有bodymovin动画的按钮，我想让它们相互交互，这样，如果其中一个按钮具有open状态，而另一个按钮被单击，则open按钮将变为closed，并且动画将再次运行，就像再次单击它以模拟关闭状态一样。
因此，例如，如果我单击#box，它将收到open状态(并且动画将运行以打开。现在，如果我单击#slider，#box将失去open状态&动画将返回到closed。
同样的情况也同样适用于滑块。
var animData1 = {
container: document.getElementById("box"),
renderer: "svg
浏览 2提问于2020-06-09得票数 0
1回答
如何目标与悬停一个特定的动画，当我有多个乐透动画在同一个页面上的反应使用lottie-web。文档指出，在lottie.play()中，我可以插入一个name参数来针对特定的动画，所以我做了这个lottie.play(container)，但是它没有工作。
import React, { useEffect, useRef } from "react";
import lottie from "lottie-web";
function App() {
const containerOne = useRef(null);
const container
浏览 5提问于2022-01-28得票数 1
回答已采纳
我正在尝试将Lottie/Bodymovin集成到一个Ionic 4应用程序中，但我没有运气。
目前我正在竞选：
“@离子/角”："4.1.0“
@角/芯："~7.1.4“
"ng-lottie"："0.3.1“
我得到的错误是：
ERROR DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's
浏览 1提问于2019-06-19得票数 0
我目前正在为ios开发一款使用SpriteKit作为框架的2d手机游戏。
我用adobe after effects制作了所有的动画，现在我必须将它们导入到应用程序中。
我没有使用Apple和其他教程推荐的纹理序列，而是读到了一个名为Bodymovin的after effects插件。它导出的帧和.json文件较少。然后在Xcode中，我安装了一个名为Lottie的pod以使其正常工作。嗯，这对UIViewController来说是可以的。
有人知道有没有一种方法可以从after effects中导出动画，并使其在SpriteKit中简单地工作？
谢谢
浏览 5提问于2018-09-17得票数 5
我想按顺序播放2个Lottie文件，即在一个Lottie完成动画之后，它应该播放第二个Lottie文件。
为此，我向Lottie小部件添加了一个statuslistener (通过AnimationController)，并在first Lottie完成动画后对资产文件调用setstate()。它确实起作用了，但在切换到下一个Lottie文件时出现了延迟。
void statusListener(AnimationStatus status) {
if (status == AnimationStatus.completed) {
setState(() {
浏览 6提问于2021-01-09得票数 0
我想在我的Flutter应用程序中使用Lottie Animation作为微交互。我想这个动画播放时，用户点击它。在阅读了Lottie包的文档后，我知道了如何添加动画以及如何显示它。但我还不明白如何使用手势检测器onTap属性启动动画并只播放一次。 我尝试过使用动画控制器的forward()方法，但似乎不起作用： GestureDetector(
onTap: () {
_controller.forward();
},
child: Center(
child: Lottie.asset('as
浏览 19提问于2021-01-06得票数 0
回答已采纳
1回答
在使用HTML渲染器的同时，可以在颤振网页中使用Lottie动画json文件吗？
我在使用，但不是为网络工作。
浏览 12提问于2022-06-02得票数 2
我找到了这个Lottie Play/Pause button，但我不知道如何显示播放状态，当我的音频播放器暂停时，显示暂停状态，并在播放器播放时重复播放均衡器动画(参见lottie预览)。我已经阅读了文档，但没有针对这种情况的示例。我也没有任何关于控制动画效果的知识。
浏览 20提问于2020-01-09得票数 2
回答已采纳
2回答
我有一个lottie动画播放一次。当它播放完成后，我想淡出它。 最好的方法是什么？ 我正在尝试淡入和淡出SVG lottie动画。 var params = {
container: document.getElementById('lottie'),
renderer: 'svg',
loop: false,
autoplay: false,
animationData: animationData
};
var anim;
anim = lottie.loadAnimation(params);
anim.add
浏览 21提问于2019-07-03得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
