标签: lottie

我使用 Lotie 动画，将 Flutter 编译并部署为 Web 应用程序。它在桌面 chrome 上运行良好，但在 android chrome 上运行不佳。有人知道问题所在吗？

(Flutter (Channel stable, 3.3.1, on Microsoft Windows [版本 10.0.22000.856], locale de-DE)) Android Chrome 105.0.5195.79，两者都应该是最新的。

main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: Lottie.asset("assets/lottie/94729-not-found.json"))));
  }
}

在 Chrome Windows/桌面上一切正常...

在 Chrome Android（也是 Android 模拟器）上 - 以某种方式裁剪

更新：实际上，我观察到所有 Lottie 动画的问题......这是一个 Lottie 错误吗？

谢谢！

有没有办法在LOTAnimationView自动布局中使用（Lottie框架）？我试过类的设置UIView，以LOTAnimationView我的故事板，但获得nilIB出口..

我正在使用lottie本机反应本机。我刚安装了它，npm并使用react native链接将其链接起来，但是当我尝试构建它时，我在lottie的类错误中得到了一个错误：
package android.support.v4.view does not exist

这些是我对应用程序gradle的依赖

dependencies {
compile project(':lottie-react-native')
compile project(':react-native-vector-icons')
compile project(':react-native-view-overflow')
compile fileTree(include: ['*.jar'], dir: 'libs')
compile 'com.facebook.react:react-native:+'
// From node_modules
implementation "android.arch.work:work-runtime:$versions.work"
implementation 'io.reactivex.rxjava2:rxjava:2.2.0'
implementation 'io.reactivex.rxjava2:rxandroid:2.0.1'
implementation 'io.reactivex:rxandroid:1.2.1'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test:runner:1.1.0'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.0'
implementation('com.crashlytics.sdk.android:crashlytics:2.9.6@aar') {
    transitive = true;
}
implementation 'com.android.support:support-v4:28.0.3'
implementation 'com.android.support:appcompat-v7:28.0.3'

}

 compileSdkVersion 28
buildToolsVersion '28.0.3'

defaultConfig {
    applicationId "com.pois"
    minSdkVersion 19
    targetSdkVersion 28
    versionCode 1
    versionName "1.0"
    ndk {
        abiFilters "armeabi-v7a", "x86"
    } …

该文档有事件和事件监听器。我可以让 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

我在使用 Lottie 文件作为动画时遇到问题，我无法设置循环数，而加载后它正在连续循环，但我想设置固定的循环数。

活动 XML

 <com.airbnb.lottie.LottieAnimationView
        android:layout_centerInParent="true"
        android:id="@+id/animation_view_1"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:lottie_autoPlay="true"
        app:lottie_loop="true" />

活动Java

animationView.setVisibility(View.VISIBLE);
        animationView.setAnimation(fileName);
        animationView.loop(true);
        animationView.playAnimation();

为了实现标题中所述的目标，我有两个单独的问题。

第一个问题是：com.airbnb.lottie.LottieAnimationView默认情况下，a在 XML 中的可见性状态是什么？我在我的 XML 中使用了两个具有相同特征的不同 LottieAnimationView：

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie_animation_ribbon_and_confetti"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:lottie_autoPlay="false"
        app:lottie_fileName="exploding-ribbon-and-confetti.json"
        app:lottie_loop="true"
        app:lottie_repeatCount="1"/>

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie_cat_throws_cup"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/puntuacionTotal"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/puntosAtrevimiento"
        app:layout_constraintBottom_toTopOf="@id/textoAtrevimiento"
        app:lottie_autoPlay="false"
        app:lottie_fileName="cat_throws_cup.json"
        app:lottie_loop="true"
        app:lottie_repeatCount="1"
        />

虽然第一个仅在我使用lottieanimationview.playAnimation()from 代码时可见，但第二个在 Activity 启动时默认立即可见。

我的第二个问题是由于第一个问题中描述的问题。为了解决这个问题，我首先添加android:visibility="gone"到LottieAnimationView活动开始时立即可见的那些，然后我尝试了几段代码使动画在播放时可见并在完成后恢复不可见（都没有成功）：

一种尝试：

lottieCatThrowsCup.setVisibility(View.VISIBLE);
lottieCatThrowsCup.playAnimation();
if(!(lottieCatThrowsCup.isAnimating())) lottieCatThrowsCup.setVisibility(View.GONE);

另一种尝试：

lottieCatThrowsCup.setVisibility(View.VISIBLE);
lottieCatThrowsCup.playAnimation();
if(!lottieCatThrowsCup.isAnimating())lottieCatThrowsCup.cancelAnimation();

第三次尝试：

lottieCatThrowsCup.setVisibility(View.VISIBLE);
lottieCatThrowsCup.playAnimation();
lottieCatThrowsCup.cancelAnimation();

第四次尝试：

lottieCatThrowsCup.setVisibility(View.VISIBLE);
lottieCatThrowsCup.playAnimation();
lottieCatThrowsCup.addAnimatorListener(this);
@Override
    public void onAnimationEnd(Animator animation) {

        animation.setVisibility(View.GONE);


    }

在我看来，最简单的解决方案是使用 xml 属性com.airbnb.lottie.LottieAnimationView来表明它不必在默认情况下可见，除非它被播放，但它似乎不存在......你们如何解决这个问题? 提前致谢。

我只想使用 Lottie View 在 React Native 中播放动画的一部分，长度约为 5 秒，而速度= {1} 我只想播放前 3 秒，然后转到下一个屏幕，代码如下

徽标屏幕.js：

import React from 'react';
import { StyleSheet, View, Image, TextInput, StatusBar, Text } from "react-native";
import Icons from 'react-native-vector-icons/Ionicons';
import LottieView from "lottie-react-native";

export default class ChatScreen extends React.Component {

  onAnimationFinish = () => {
    this.props.navigation.navigate("Login")
  }
  render () {
    return (
      <View style={styles.container}>
        <StatusBar barStyle="light-content" backgroundColor="#161f3d" />
        <View>
          <LottieView
            source={require('../assets/animations/lottie/MotionCorpse-Jrcanest.json')}
            style={{ justifyContent: "center", alignSelf: "center", height: "100%", width: "100%" }}
            autoPlay
            loop={false}
            speed={1}
            onAnimationFinish={this.onAnimationFinish}
          /> …

我正在创建底部导航，图标需要是动画 Lottie 文件。似乎不可能为标签编写绑定适配器。有没有什么解决方案可以让我们在底部导航中拥有很多动画？

<item
    android:id="@+id/my_navigation"
    android:icon="@drawable/my_icon"
    android:title="@string/my_text" 
    **app:setLottie=@raw/my_file/>**

我试图将 LottieAnimationView 添加到项目中的 xml 布局中，但出现此异常：“java.lang.IllegalStateException：无法解析组合”。

java.lang.IllegalStateException: Unable to parse composition\n    at com.airbnb.lottie.LottieAnimationView$1.onResult(LottieAnimationView.java:78)\n    at com.airbnb.lottie.LottieAnimationView$1.onResult(LottieAnimationView.java:71)\n    at com.airbnb.lottie.LottieAnimationView$3.onResult(LottieAnimationView.java:95)\n    at com.airbnb.lottie.LottieAnimationView$3.onResult(LottieAnimationView.java:88)\n    at com.airbnb.lottie.LottieTask.notifyFailureListeners(LottieTask.java:158)\n    at com.airbnb.lottie.LottieTask.access$200(LottieTask.java:27)\n    at com.airbnb.lottie.LottieTask$1.run(LottieTask.java:133)\n    at android.os.Handler.handleCallback(Handler.java:883)\n    at android.os.Handler.dispatchMessage(Handler.java:100)\n    at android.os.Looper.loop(Looper.java:237)\n    at android.app.ActivityThread.main(ActivityThread.java:7860)\n    at java.lang.reflect.Method.invoke(Native Method)\n    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)\n    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1075)\n Caused by: java.util.concurrent.ExecutionException: java.lang.NoClassDefFoundError: Failed resolution of: Lokio/Okio;\n    at java.util.concurrent.FutureTask.report(FutureTask.java:123)\n    at java.util.concurrent.FutureTask.get(FutureTask.java:193)\n    at com.airbnb.lottie.LottieTask$LottieFutureTask.done(LottieTask.java:175)\n    at java.util.concurrent.FutureTask.finishCompletion(FutureTask.java:383)\n    at java.util.concurrent.FutureTask.setException(FutureTask.java:252)\n    at java.util.concurrent.FutureTask.run(FutureTask.java:271)\n    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)\n    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)\n    at java.lang.Thread.run(Thread.java:919)\n Caused by: java.lang.NoClassDefFoundError: Failed resolution of: Lokio/Okio;\n    at com.airbnb.lottie.LottieCompositionFactory.fromRawResSync(LottieCompositionFactory.java:265)\n    at com.airbnb.lottie.LottieCompositionFactory$3.call(LottieCompositionFactory.java:234)\n    at com.airbnb.lottie.LottieCompositionFactory$3.call(LottieCompositionFactory.java:229)\n    at …

我正在编写一个应用程序，想要有一个 Lottie 动画作为我的启动屏幕，因为我在编写这个应用程序时正在学习 java，所以我制作了一个测试应用程序来看看它是如何工作的。我发现几乎所有 Lottie 动画都显示为静态图像，并且不播放/循环动画。我按照 LottieFiles 网站上的指南以及我在其他问题上找到的信息进行操作，但仍然无法播放动画。以下正是我添加的内容：

我的应用程序的 Gradle 依赖项：

dependencies {  
        implementation 'com.airbnb.android:lottie:3.6.1'
}

到我的布局 XML：

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/splashlottie"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="opening_book.json" //Even tried placing the file in raw and using app:lottie_rawRes="@raw/opening_book"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

在我的活动中：

        LottieAnimationView splashscreen;
        splashscreen = findViewById(R.id.splashlottie);

        splashscreen.animate();
        splashscreen.playAnimation();

我不确定我到底做错了什么，因为我什至尝试了各种不同的 Lottie 动画文件，并将相同的文件放在原始和资产下。API级别是否会导致动画无法播放？