0

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

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

但我通过在线 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。

所以这是我的问题请帮助我克服这个提前谢谢

4

1 回答 1

0

更新：现在我仔细查看了您的代码，我发现您正在通过更改进度道具的值来制作动画。这不是怎么做的。您需要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 ）

于 2017-10-04T09:11:01.313 回答