bodymovin動畫在原生反應上出錯？

我正在使用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也。

所以這是我的問題，請幫助我克服這個提前感謝

來源

2017-10-04 Vijay

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）

來源

2017-10-04 09:11:01 zvona

耶同樣的問題，我面對。這個動畫即將在iPhone中...在android甚至圖像不會來...當在Android中運行應用程序正在被殺死和關閉...我通過世博會 – Vijay

使用CRNA爲什麼因爲動畫已經在json中完成正確...所以我們不需要努力動畫..不是嗎？ @zvona – Vijay

好吧現在就試試吧 – Vijay

bodymovin動畫在原生反應上出錯？

回答

相關問題