标签: lottie

我AnimationView在 AirBnb 的Lottie框架中定义了一个文件，它应该加载一个文件，该文件放置在我的 Xamarin.Forms 项目（便携式项目）内的 Resource 文件夹中

        <forms:AnimationView
            x:Name="AnimationView"
            Animation="SharpLibrary.Forms.Assets.Images.WineGlass.json"
            Loop="True"
            AutoPlay="True"
            VerticalOptions="FillAndExpand"
            HorizontalOptions="FillAndExpand" />

但它似乎无法解析Animation属性中的字符串，因此它不会显示动画。如果我将文件放入 Resource 文件夹并说它Animation="WineGlass.json"有效。

有没有办法从 EmbeddedResource 加载它，或者这是不可能的？

在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: …

我有以下 Lottie 动画，只播放一次，我怎样才能让它无限期地播放？

val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.search_animation))
LottieAnimation(composition = composition)

我有一个 95 帧的 Lottie 文件，我想修剪开头，使其从 15 帧标记开始。似乎应该有一个简单的方法来做到这一点，但我没有 After Effects。是否有一些在线编辑器或其他方式可以获得代表从 15 帧开始的动画的新 .json 文件？

我尝试LottieRef.current.play(15, 95)像这样使用：

const lottieRef = useRef<LottieView>(null);

useEffect(() => {
    if (lottieRef && lottieRef.current) {
      lottieRef.current.play(15, 95);
    }
  }, [renderVideo, lottieRef]);

return (
    <LottieView
      ref={lottieRef}
      source={SUCCESS.keepReading}
      onAnimationFinish={game.onFinishAnimation}
      autoPlay
      loop={false}
      style={styles.animationContainer}
    />
  );

但是当我添加onAnimationFinish道具时，它会立即调用动画完成函数，而不是等到动画播放完毕。所以我想编辑实际的 .json 文件（但是如果有一个修复程序可以让我使用此方法而不出现问题，onAnimationFinish那就太好了）。

我想在特定超时后将启动画面导航到下一个屏幕.启动画面有一个动画,在Airbnb Lottie的帮助下为React Native完成.

splashscreen代码如下:

import React from "react";
import { Animated, Easing } from "react-native";
import LottieView from "lottie-react-native";
import { NavigationActions } from "react-navigation";

export default class SplashScreen extends React.Component {
  static navigationOptions = {
    header: null
  };

  constructor() {
    super();
    this.state = {
      progress: new Animated.Value(0),
    }
  }

  componentDidMount() {
    setTimeout(() => {
      this.navigateToWalkthrough()
    }, 3500);
    
    Animated.timing(this.state.progress, {
      toValue: 1,
      duration: 3000,
      easing: Easing.linear,
    }).start();
  }

  navigateToWalkthrough = () => {
    const navigateAction = …

我有一个问题要问那些有使用 lottie json 文件经验的人。我使用 lottie 的经验并不多，所以我想我可能遗漏了一些明显的知识。当我将动画渲染到视图中时，动画对象像这样放置在视图的中心

 _____________________________________________
|                                             |
|        [animated object]                    |
|_____________________________________________|

有没有办法可以修改 json 文件以使动画对象适合整个视图：

     _____________________________________________
    |                                             |
    | [a n i m a t e d         o b j e c t s     ]|
    |_____________________________________________|

我试过在 xml 中设置视图，如下所示：

android:scaleType="centerCrop"
android:adjustViewBounds="true"

但它不起作用
我也试图设置更大的规模：

app:lottie_scale="2" 

但我没有成功。感谢您的时间！

所以，我有以下 json（它是 Lottie 的动画）。我试图找到动画本身的颜色所在的位置，但找不到它。任何帮助将不胜感激！要在浏览器中查看动画，请单击此处。它的 JSON 是这样的，我无法发布美化的 JSON，因为 StackOverflow 的字符限制是 30k：

{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"flip","ip":0,"st":0,"ind":4,"hix":2,"ks":{"o":{"a":1,"k":[{"t":0,"s":[0],"e":[0],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"t":11,"s":[0],"e":[100],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":12}]},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[13,13,0]},"p":{"s":true,"x":{"a":1,"k":[{"t":0,"s":[13.000000000000002],"e":[13],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":25}]},"y":{"a":1,"k":[{"t":0,"s":[13],"e":[13],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":25}]}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[100,100]}},"shapes":[{"ty":"gr","nm":"flip shape group","it":[{"ty":"sh","ks":{"a":1,"k":[{"t":0,"s":[{"c":true,"v":[[16.305638023935934,16.791295705480064],[9.69337294159993,10.082096893728064],[0,0],[26,26]],"i":[[0,0],[2.665677558939981,2.6058615175920092],[0,0],[0,0]],"o":[[-2.993586435256004,-3.150346206019975],[0,0],[0,0],[0,0]]}],"e":[{"c":true,"v":[[16.305638023935934,16.791295705480064],[9.69337294159993,10.082096893728064],[0,0],[26,26]],"i":[[0,0],[2.665677558939981,2.6058615175920092],[0,0],[0,0]],"o":[[-2.993586435256004,-3.150346206019975],[0,0],[0,0],[0,0]]}],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"t":12,"s":[{"c":true,"v":[[16.305638023935934,16.791295705480064],[9.69337294159993,10.082096893728064],[0,0],[26,26]],"i":[[0,0],[2.665677558939981,2.6058615175920092],[0,0],[0,0]],"o":[[-2.993586435256004,-3.150346206019975],[0,0],[0,0],[0,0]]}],"e":[{"c":true,"v":[[7,26],[0,19],[0,0],[26,26]],"i":[[0,0],[0,3.8659999999999997],[0,0],[0,0]],"o":[[-3.86599,0],[0,0],[0,0],[0,0]]}],"i":{"x":[0.22],"y":[1]},"o":{"x":[0.19],"y":[1]}},{"t":25}]}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[0.2235294117647059,0.5137254901960784,0.8627450980392157,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0}}]}],"op":25},{"ty":4,"nm":"non-flipped","ip":0,"st":0,"ind":2,"hix":1,"ks":{"o":{"a":1,"k":[{"t":0,"s":[100],"e":[100],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"t":10,"s":[100],"e":[0],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":12}]},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[13,13,0]},"p":{"s":true,"x":{"a":1,"k":[{"t":0,"s":[13],"e":[13],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":25}]},"y":{"a":1,"k":[{"t":0,"s":[12.999999999999998],"e":[13],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":25}]}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[100,100]}},"shapes":[{"ty":"gr","nm":"non-flipped shape group","it":[{"ty":"sh","ks":{"a":1,"k":[{"t":0,"s":[{"c":true,"v":[[19,0],[26,7],[26,26],[0,0]],"i":[[0,0],[0,-3.86599],[0,0],[0,0]],"o":[[3.8659999999999997,0],[0,0],[0,0],[0,0]]}],"e":[{"c":true,"v":[[9.909566681238312,9.824443462512633],[19.224521749991286,19.02647389376546],[26,26],[0,0]],"i":[[-2.145568112502759,-2.2020304312528305],[-3.287074506362524,-3.2999372823432562],[0,0],[0,0]],"o":[[2.255829134412066,2.3821960695170787],[0,0],[0,0],[0,0]]}],"i":{"x":[0.675],"y":[0.19]},"o":{"x":[0.55],"y":[0.055]}},{"t":12}]}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[0.9058823529411765,0.8901960784313725,0.8745098039215686,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0}}]}],"op":25},{"ty":4,"nm":"back","ip":0,"st":0,"ind":1,"hix":3,"ks":{"o":{"a":0,"k":100},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[13,13,0]},"p":{"s":true,"x":{"a":0,"k":13},"y":{"a":0,"k":13}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[100,100,100]}},"shapes":[{"ty":"gr","nm":"back shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"v":[[0,26],[26,26],[0,0]],"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]]}}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[0.9058823529411765,0.8901960784313725,0.8745098039215686,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0}}]}],"op":25}],"op":25,"w":26,"h":26}

我想在 flutter 应用程序中为 Lottie 文件设置动画。我尝试搜索互联网的每个角落，但未能找到任何相关信息。

我发现有一个flutter包“flutter_lottie.dart”并且有一个动画功能。

作者还提供了一个例子来说明使用 flutter_lottie.dart

但这我尝试运行确切的示例：flutter Lottie example

它给出了同样的错误：

Creating Method Channel convictiontech/flutter_lottie_0
E/flutter (11371): [ERROR:flutter/shell/common/shell.cc(199)] Dart Error: Unhandled exception:
E/flutter (11371): PlatformException(error, java.lang.IllegalStateException: Unable to parse 
composition
E/flutter (11371):  at com.airbnb.lottie.LottieAnimationView$2.onResult(LottieAnimationView.java:68)

如何在颤振中使用 Lottie 使用动画？

我想在 Flutter Android 应用程序中添加 Lottie 动画作为启动屏幕。我希望它在 Flutter 绘制第一帧之前启动，所以我正在考虑在本地执行此操作。

我在网上找到了两个例子，但它们都使用了 Flutter 的 deprecated SplashScreen：

• flutter_animated_splash_screen
• flutter_lottie_splash_app

我在构建过程中收到以下警告消息：

W/FlutterActivityAndFragmentDelegate(23263): A splash screen was
provided to Flutter, but this is deprecated. See
flutter.dev/go/android-splash-migration for migration steps.

有没有办法制作像这个视频这样的启动动画：

1. 接受 Lottie 格式
2. 在 Flutter 绘制第一帧之前的冷启动期间可见
3. 不使用已弃用的 Flutter SplashScreen

尝试过但不起作用的事情：

• Android 12 SplashScreen的文档似乎仅适用于动画矢量可绘制 (AVD) 格式的动画。
• flutter_native_splash包尚不支持 Lottie 动画格式，尽管文档指出他们会接受 PR 添加支持。

视频由flutter_animated_splash_screen提供。

如您所知，我们可以通过“Adobe After Effect”制作乐透动画，但我想知道如何通过“Photoshop”来制作？有什么方法可以将 GIF 转换为 Lottie JSON 吗？