Question

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

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

但我通过在线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 prop的值来制作动画。那不是怎么做的。您需要使用ref将动画引用到。

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

然后：

componentDidMount() {
  this.startAnimation();
}

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

OLD ANSWER：

您的代码看起来非常合法，如果您看到图片，就会证明您做得对。

我认为JSON有问题，或者Lottie只是错误地解释了值。

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

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

反应原生的bodymovin动画错误？

1 个答案: