Question

很长一段时间我都想通过播放和暂停来做出反应动画。像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播放和暂停的方法。

将道具playing设置为false以暂停，并设置为true。 E.g设置gif播放

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

Gif组件包含可以使用refs访问的方法play和pause。因此，在使用Gif组件的组件上，您可以使用以下内容：

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>
    );
  }
}

我如何使用ReactJS代码播放和暂停React-gif图像

2 个答案: