ReactJSコードを使用してReact-GIF画像を再生する方法

Question

長い時間私は、再生と一時停止で反応するgifアニメーションにしています。facebook gifの画像とまったく同じです。

私はreact-gif npmモジュールを使用していますが、動作しません。誰かが自分のコードを確認してください。

コーディング

.......

import Markdown from 'react-markdown'; 
import Gif from 'react-gif'; 

const linkRenderer = (linkNode) => { 
    return <a href={linkNode.href} title={linkNode.title} target="_blank" children={linkNode.children} />; 
}; 


const imgixBase = 'https://chalees-min.imgix.net'; 
const imgixParameters = 'w=800&fit=max&auto=format,compress'; 
const imageRenderer = (imageNode) => { 
    const imageSource = imageNode.src.startsWith('/') 
    ? `${imgixBase}${imageNode.src}?${imgixParameters}` 
    : imageNode.src; 
    return <Gif src={imageSource} alt={imageNode.alt} title={imageNode.title} /> 
}; 

const MarkdownCustomized = (props) => (
    <Markdown 
    className={'markdown ' + (props.className || '')} 
    source={props.source || ''} 
    renderers={{ 
     'Link': linkRenderer, 
     'Image': imageRenderer, 
    }} /> 
); 

export default MarkdownCustomized; 

Answer 1

あなたがコントロールすることはできません（再生ポーズ）アニメーションGIF。 FacebookのGIFは偽装されたビデオです。

いくつかの種類の制限された制御を提供するいくつかの回避策hereがあります。

Answer 2

Gifコン​​ポーネントでコードを再生または一時停止させるロジックが表示されません。

Gifの反応コンポーネントコードを見ると、Gifの再生と一時停止を行う2つの方法があります。

1. playingをfalseに設定すると、一時停止して再生することができます。

<Gif src={imageSource} alt={imageNode.alt} title={imageNode.title} playing={true} />

を再生する例えばセットGIFが

のGIF成分はREFを使用してアクセスすることができる方法 playと pauseを有しています。

class Parent extends Component { 
    handlePlayGif() { 
    this.currentGif.play(); 
    } 

    handlePauseGif() { 
    this.currentGif.pause(); 
    } 

    render() { 
    return (//... rest of code 
     <Gif ref={(gif) => this.currentGif = gif} /> 

     // ... rest of jsx 
     // onClick play gif 
     <div onClick={() => handlePlayGif()}>play gif</div> 
    ); 
    } 
} 

：だから、GIFコンポーネントを使用するコンポーネントには、次のようなものを持つことができます