React Native 中的 bodymovin 动画错误？

Question

我正在使用 sample.json 图像文件，它是通过 Lottie for React Native 在我的页面中用于 bodymovin 动画的。

我正在获取图像，但图像未完全检索到，图像的某些部分丢失，并且在图像的某些侧面，图像上粘贴了绿色。

但我通过在线 json 图片查看器检查了 sample.json。但是源头的图片没有问题

这里是问题https://i.stack.imgur.com/yFZfg.jpg

这里是原图https://i.stack.imgur.com/4sBzg.jpg

这是我的代码

 import React from 'react';
    import { Animated, Easing, easing  } from 'react-native';
    import Animation from 'lottie-react-native';

    export default class BasicExample extends React.Component {
       constructor(props) {
        super(props);
        this.state = {
         progress: new Animated.Value(0.5),
      };
    }

    componentDidMount() {
     this.startAnimation();
    }
    startAnimation() {
    Animated.timing(
      this.state.progress,
      {
      toValue: 1,
      from: 0,
      to: 1,
      duration: 5000,
      }
    )
    .start(() => {
       // Restart at end
       this.state.progress.setValue(0);
       this.startAnimation();
     });
    }
    render() {
       const easing = Easing.inOut(Easing.quad);
       const { Animate } = this.props;
      return (
          <Animation
             style={{
              width: 300,
              height: 300,
            }}
           source={this.props.Animate}
           progress={this.state.progress}
          />
         );
       }
     }

我也安装了 lottie npm。

所以这是我的问题，请帮助我解决这个问题提前致谢

Answer 1

更新： 现在我仔细查看了您的代码，发现您通过更改 progress 道具的值来制作动画。那不是怎么做的。您需要使用 ref 将动画引用到。

return (
    <Animation
      ref={(animation) => this.myAnimation = animation}
      style={{
        width: 300,
        height: 300,
      }}
      source={this.props.Animate}
    />
);

然后：

componentDidMount() {
  this.startAnimation();
}

startAnimation() {
  this.myAnimation.play();
}

旧答案：

您的代码看起来完全合法，如果您看到图片，就证明您做对了。

我假设 JSON 有问题，或者 Lottie 只是解释了错误的值。

我在 Android 设备上遇到过小的样式问题，但在 iOS 上没有。而且它们主要与对齐有关。

如果您在 SO 中没有得到任何正确的答案，我建议您向 github 提交问题（例如：https://github.com/airbnb/lottie-react-native/issues/182）

React Native 中的 bodymovin 动画错误？

Error on bodymovin animation in react native?

json

react-native

bodymovin

lottie