2017-10-04 80 views
0

我正在使用sample.json图像文件,它是我的页面中的bodymovin动画,通过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} 
      /> 
     ); 
     } 
    } 

我安装洛蒂NPM也。

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

回答

0

UPDATE:现在,我看着你的代码更接近我发现你被改变的进步值动画支柱。这不是如何做到这一点。你需要使用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答:

您的代码似乎完全合法的,如果你看到一个图像,它证明,证明你正在做的是正确的。

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

我在Android设备上遇到了小样式问题,但在iOS上却遇到了小样式问题。他们主要与对齐有关。

如果你没有得到任何适当的答案在这里的话,我会建议你到文件到GitHub上的问题(见例如:https://github.com/airbnb/lottie-react-native/issues/182

+0

耶同样的问题,我面对。这个动画即将在iPhone中...在android甚至图像不会来...当在Android中运行应用程序正在被杀死和关闭...我通过世博会 – Vijay

+0

使用CRNA为什么因为动画已经在json中完成正确...所以我们不需要努力动画..不是吗? @zvona – Vijay

+0

好吧现在就试试吧 – Vijay