标签: lottie

我开发了一个底部选项卡导航器并使用 Lottie 动画作为图标。我希望它们自动播放，并且仅在焦点对准时播放一次（如币安应用程序）。我已经尝试过loop={false}，但这完全阻止了它的动画。代码如下：

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import LottieView from 'lottie-react-native';

import Home from './Home';
import Create from './Create';
import Messages from './Messages';
import Forum from './Forum';
import Profile from './Profile';

const Tab = createBottomTabNavigator();

export default function Tabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let filePath;

          switch (route.name) {
            case 'Home':
              filePath = require('../tabanimations/hometab.json');
              break;
            case 'Messages':
              filePath = require('../tabanimations/messagestab.json'); …

在这里学习React，我只是想展示一个lottie动画。看起来相当简单，但我在使用 useEffect 挂钩时遇到了一些问题。我使用钩子在页面加载时渲染动画，但它不断重复（有时两次或更多次）。我知道这是因为 useEffect 会多次触发，但我不知道如何处理这个问题。我只想在页面上显示一个动画。我怎样才能实现这个目标？

import React, { useEffect, useRef } from "react";
import "./index.scss";
import lottie from "lottie-web";

const Hero = () => {
  const lottieContainer = useRef(null);

  useEffect(() => {
    lottie.loadAnimation({
      container: lottieContainer.current,
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: require("../../assets/Lottie/developer.json"),
    });
  }, []);


  return (
    <div className="hero">
      <div ref={lottieContainer}></div>
    </div>
  );
};

export default Hero;

我遇到了缩放 Lottie 动画的问题，Chrome 模糊了动画。当动画缩放时，这一点尤其明显。

在我的示例中，原始动画的尺寸为 842x596px，渲染效果越小，效果越差：

如果您想在 Chrome 浏览器中重现它，这里是示例代码：

lottie-player {
  border: 1px solid lightblue;
}

body {
  color: lightgray;
}

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<!--
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>
300x300px 
-->
                    
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 200px; height: 200px;" loop autoplay></lottie-player>
200x200px

<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 150px; height: 150px;" loop autoplay></lottie-player>
150x150px
 
 <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 100px; height: 100px;" loop autoplay></lottie-player>
100x100px
 
 <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 50px; height: 50px;" loop autoplay></lottie-player> …

我正在将 React Native 版本从 0.63.0 升级到 0.64.0，但编译时出现此错误？你知道如何解决吗？

致命错误：模块映射文件'/Users/iteme/Library/Developer/Xcode/DerivedData/apparta-bdsropvgtdqyxfbzxyuwoltrneow/Build/Products/Debug-iphonesimulator/lottie-react-native/lottie_react_native.modulemap'找不到

在此输入图像描述

这是环境：“lottie-ios”：“^3.1.8”，“lottie-react-native”：“^4.0.2”，cocapods：1.11.2

尝试了这个但没有成功：

1-. rm -rf ~/Library/Developer/Xcode/DerivedData 2-. 消除Podfile.lock 3-。吊舱安装

和

1. 反应本机链接

和

npm 卸载lottie-ios npm 安装lottie-ios@3.1.8 cd ios pod install

我已经为 Lottie 安装了 pod 文件并从 lottiefiles.com 下载了 hello.json 文件

 LOTAnimationView *Hello_loader;
 Hello_loader = [LOTAnimationView animationNamed:@"hello"];
 [self.view addSubview:Hello_loader];

我在两者中都尝试过viewDidLoad()，viewDidAppear()但仍然没有出现

我是这个 ios 编程的新手，任何人都可以帮我解决这个问题吗？提前致谢...

我试图在我的react项目中加载很多网络动画，但我一直收到此错误并且无法理解它的含义

InvalidStateError：responseText仅在responseType为''或'document'时可用。

这是我下面的React组件：

import React, { Component } from "react";
import "./Submit.css";
import PropTypes from "prop-types";
import lottie from "lottie-web";

class Submit extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    lottie.loadAnimation({
      container: document.getElementById("animation"), // the dom element that will contain the animation
      renderer: "svg",
      loop: true,
      autoplay: true,
      path: "../anim/email.json" // the path to the animation json
    });
  }

  render() {
    return <div id="animation" />;
  }
}

Submit.propTypes = {};

export default Submit;

有什么想法吗？

我在Android和iOS上使用Xamarin.Forms。试图使Lottie动画起作用，但是支持.NET Standard 2.0的最新版本的Lottie（2.5.4）在Android项目中给出了构建错误：

The type or namespace name 'Droid' does not exist in the namespace 'Lottie.Forms' (are you missing an assembly reference?)

查看Lottie GitHub源代码显示了名称空间和类，因此我不确定为什么我的Android项目找不到引用。

我曾尝试将Lottie降级，但到目前为止还没有运气。包含参考（2.5.0）的最早版本不适用于.NET Standard。

有想法吗？

我有一个反应本机视图，其中有 Lottie 动画，但动画根本不显示，屏幕只是黄色（封闭视图的背景色）。

这是我的代码：

import React, { Component } from 'react';
import {
  StyleSheet,
  View, 
} from 'react-native';
import LottieView from 'lottie-react-native';

export default class Splash extends Component {
  constructor(props) {
    super(props);
  }
    
  static navigationOptions = {
    header: null,
  };
    
  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'yellow'}}>
        <LottieView
          style={{flex: 1}}
          source={require('../check.json')}
          autoPlay
          loop
        />
      </View>
    );
  }
}

通过赋予它自己的观点，我已经成功地将 Lottie 应用到我的程序中。虽然一旦被调用，动画只播放一次。我将如何使动画循环？谢谢你。

LottieView（与 Lottie 一起查看。）

import SwiftUI
import Lottie

struct LottieView: UIViewRepresentable {
    typealias UIViewType = UIView
    var filename: String
    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
        let view = UIView(frame: .zero)
        
        let animationView = AnimationView()
        let animation = Animation.named(filename)
        animationView.animation = animation
        animationView.contentMode = .scaleAspectFit
        animationView.play()
        
        
        animationView.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(animationView)
        
        NSLayoutConstraint.activate([
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor), animationView.heightAnchor.constraint(equalTo: view.heightAnchor)
        ])
        
        
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieView>) {
        
    }
    
    
    
    
}

ContentView 中的当前实现：

     HStack {
            
            if isScroll {
                LottieView(filename: "swipeLeft").frame(width: 200, height: …

这些天我一直在玩 Lottie 动画，但是我在如何从视图中阻止它们时遇到了一些麻烦。

这是我的 ContentView，我在其中播放动画。我有一个按钮可以实时显示布尔值：

struct ContentView: View {

@State var isShowing : Bool = true

var body: some View {
    ZStack {
         Color.green.opacity(0.3)
        VStack {
            VStack {
                LottieDosi(isShowing: .constant(isShowing)){Text("")}
                Button(action: {self.isShowing.toggle()}) {
                    
                    Text("Button is \(String(isShowing))")
                    .padding(10)
                    .background(Color.white)
                    .cornerRadius(40)
                }
            }.padding(.horizontal, 30)
        }
    }.edgesIgnoringSafeArea(.all)
}
} 

这是我的 LottieView：

struct LottieView: UIViewRepresentable {

 @Binding var isAnimating: Bool
 @State   var name  : String

 var loopMode: LottieLoopMode = .loop
 var animationView = AnimationView()

 func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
   let view = UIView() …