当前位置：文江博客 Node Package Readme @abraj/react-gif-player 中文文档教程

@abraj/react-gif-player 中文文档教程

发布于 3年前浏览 23 项目主页更新于 3年前

react-gif-player

react-gif-player in action

see a live demo here

与 Facebook 的 GIF 切换 UI 类似，此 React 组件默认显示静态图像预览，并在单击时切换为动画 GIF。一旦组件安装，或每当传递新源时，图像就会预加载。

注意： 与使用 HTML 视频元素来保存播放进度的 Facebook 用户界面不同，此组件使用实际的 GIF，并且会在每次点击时重置。

install

npm install react-gif-player react react-dom

如果您无法使用 npm 并且需要生产就绪脚本，请查看版本。

usage

quick start

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- gifplayer.css v0.4.2 -->
    <link rel="stylesheet" href="https://unpkg.com/react-gif-player@0.4.2/dist/gifplayer.css">
  </head>
  <body>
    <div id="cat"></div>
    <!-- react/react-dom served over CDN -->
    <script src="https://unpkg.com/react@16.3.0-alpha.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react@16.3.0-alpha.1/umd/react-dom.development.js"></script>
    <!-- gifplayer.js v0.4.2 -->
    <script src="https://unpkg.com/react-gif-player@0.4.2/dist/gifplayer.js"></script>
    <script>
      ReactDOM.render(
        React.createElement(GifPlayer, {
          gif: '/img/cat.gif',
          still: '/img/cat.jpg'
        }),
        document.getElementById('cat')
      );
    </script>
  </body>
</html>

with a module bundler

var React = require('react');
var ReactDOM = require('react-dom');
var GifPlayer = require('react-gif-player');

// with JSX
ReactDOM.render(
  <GifPlayer gif="/img/cat.gif" still="/img/cat.jpg" />,
  document.getElementById('cat')
);

options

选项可以作为道具传递给 GifPlayer 元素。

gif：GIF 动画图像的字符串 地址。
still：一个 string 地址到 GIF 的静态预览（例如 JPG、PNG 等）
autoplay：一个 boolean< /em> 如果您想立即用移动的 GIF 可用时立即轰炸您的用户，可以将其设置为 true
onTogglePlay：函数每当 GIF 在播放和暂停之间切换时调用。接收一个参数，playing，它是一个布尔值。
pauseRef：一个 function 回调被另一个函数调用，pause - 这可以保存并稍后调用以远程暂停 GIF 的播放，在可能需要的情况下。例如，您可能希望在 GIF 滚动到屏幕外时停止它。使用“ref”这个词是因为它的使用模式类似于React element refs：

  // here's an example
  class MyGifWrapper extends React.Component {
    componentDidMount () {
      addEventListenerWhenGifFlowsOffscreen(this.pauseGif);
    }

    render () {
      return (
        <GifPlayer
          gif={src}
          still={still}
          pauseRef={pause => this.pauseGif = pause}
        />
      );
    }
  }

仍然很困惑？这是一个 jsfiddle，它展示了如何使用 pauseRef。

Any other attribute available on the HTML img tag can be passed as well (excluding src, which would be overwritten), though keep in mind React's version of that attribute may be different than you expect.

GifPlayer 需要一个或两个 gif 和 still 道具。如果一个被遗漏，另一个将被用作后备。

但是，如果仅提供了 gif 属性，则 GIF 图像完全加载后，第一帧将被提取并用作静态预览。

generating still frame at build time

不提供 still 道具的缺点是，即使会生成替身，您的 GIF 必须在静止帧出现之前完全加载，而不是（可能缓慢移动的）GIF。

一种提前生成静止帧的简化方法是合并 gif-frames 模块，它只有纯 JavaScript 依赖项，进入您的构建过程。

例如

var gifFrames = require('gif-frames');
var fs = require('fs');

gifFrames({ url: 'src/image.gif', frames: 0 }).then(function (frameData) {
  frameData[0].getImageStream().pipe(fs.createWriteStream('build/still.jpg'));
});

，如果您需要对图像质量进行更精细的控制，您可以尝试 Gifsicle。

styles

重要提示：为了使用默认样式，dist/gifplayer.css 必须包含在您的 HTML 中。

CSS 样式可以很容易地被覆盖。要在图像周围添加边框，请尝试在包含默认样式的之后包含此 CSS：

.gif_player img {
  border: 3px solid cornflowerblue;
}

usage with sass

如果您使用 Sass 预处理样式，则可以通过 Sass 变量进行更强大的控制。默认值位于 src/GifPlayer.scss 的顶部：

$gif_btn_bg_base_color: #000 !default;
$gif_btn_bg_opacity: 0.5 !default;
$gif_btn_bg_opacity_hover: 0.7 !default;
// ...etc

!default 标志表示在包含默认样式的之前声明备选方案将覆盖它们。

// Include var overrides before default styles import
$gif_btn_bg_base_color: gold;
$gif_btn_text_color: cornflowerblue;
$gif_btn_font_family: serif;

// Using webpack css/sass module import syntax
@import '~react-gif-player/src/GifPlayer';

// include other overrides afterward
.gif_player {
  margin: 1rem;

  img {
    border: 2px solid #222;
  }
}

development

有关构建和测试说明，请参阅 CONTRIBUTING.md。

原文

react-gif-player

react-gif-player in action

Similar to Facebook's GIF toggle UI, this React component displays a still image preview by default, and swaps in an animated GIF when clicked. The images are preloaded as soon as the component mounts, or whenever a new source is passed.

Note: Unlike Facebook's UI, which uses an HTML video element to preserve playback progress, this component uses the actual GIF and will be reset on each click.

install

npm install react-gif-player react react-dom

If you're unable to use npm and need production-ready scripts, check out the releases.

usage

quick start

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- gifplayer.css v0.4.2 -->
    <link rel="stylesheet" href="https://unpkg.com/react-gif-player@0.4.2/dist/gifplayer.css">
  </head>
  <body>
    <div id="cat"></div>
    <!-- react/react-dom served over CDN -->
    <script src="https://unpkg.com/react@16.3.0-alpha.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react@16.3.0-alpha.1/umd/react-dom.development.js"></script>
    <!-- gifplayer.js v0.4.2 -->
    <script src="https://unpkg.com/react-gif-player@0.4.2/dist/gifplayer.js"></script>
    <script>
      ReactDOM.render(
        React.createElement(GifPlayer, {
          gif: '/img/cat.gif',
          still: '/img/cat.jpg'
        }),
        document.getElementById('cat')
      );
    </script>
  </body>
</html>

with a module bundler

var React = require('react');
var ReactDOM = require('react-dom');
var GifPlayer = require('react-gif-player');

// with JSX
ReactDOM.render(
  <GifPlayer gif="/img/cat.gif" still="/img/cat.jpg" />,
  document.getElementById('cat')
);

options

Options can be passed to the GifPlayer element as props.

gif: a string address to an animated GIF image.
still: a string address to a still preview of the GIF (e.g. JPG, PNG, etc.)
autoplay: a boolean which can be set true if you want to immediately bombard your user with a moving GIF as soon as it's available
onTogglePlay: a function which is called whenever the GIF toggles between playing and paused. Receives one argument, playing, which is a boolean.
pauseRef: a function callback is called with another function, pause - this can be saved and called later to remotely pause the playing of the GIF, in such cases where that might be desired. For example, you might want to stop the GIF when it scrolls offscreen. The word "ref" is used because its usage pattern is similar to React element refs:

  // here's an example
  class MyGifWrapper extends React.Component {
    componentDidMount () {
      addEventListenerWhenGifFlowsOffscreen(this.pauseGif);
    }

    render () {
      return (
        <GifPlayer
          gif={src}
          still={still}
          pauseRef={pause => this.pauseGif = pause}
        />
      );
    }
  }

Still confused? Here's a jsfiddle which shows how to use pauseRef.

Any other attribute available on the HTML img tag can be passed as well (excluding src, which would be overwritten), though keep in mind React's version of that attribute may be different than you expect.

GifPlayer expects one or both of the gif and still props. If one is left out, the other will be used as a fallback.

However, if only a gif prop is provided, the first frame will be extracted and used as the still preview as soon as the GIF image has fully loaded.

generating still frame at build time

The disadvantage of not providing a still prop, even though a stand-in will be generated, is that your GIF must fully load before the still frame appears instead of the (likely slowly moving) GIF.

One streamlined way to generate a still frame ahead of time is to incorporate the gif-frames module, which has only pure JavaScript dependencies, into your build process.

e.g.

var gifFrames = require('gif-frames');
var fs = require('fs');

gifFrames({ url: 'src/image.gif', frames: 0 }).then(function (frameData) {
  frameData[0].getImageStream().pipe(fs.createWriteStream('build/still.jpg'));
});

If you need finer-tuned control over image quality, you can try Gifsicle.

styles

Important: In order for the default styles to be used, dist/gifplayer.css must be included in your HTML.

CSS styles can be overridden easily. To add a border around the image, try including this CSS after including the default styles:

.gif_player img {
  border: 3px solid cornflowerblue;
}

usage with sass

If you preprocess your styles with Sass, you can have more powerful control via Sass variables. The defaults are located at the top of src/GifPlayer.scss:

$gif_btn_bg_base_color: #000 !default;
$gif_btn_bg_opacity: 0.5 !default;
$gif_btn_bg_opacity_hover: 0.7 !default;
// ...etc

The !default flag means that declaring alternatives before including the default styles will override them.

// Include var overrides before default styles import
$gif_btn_bg_base_color: gold;
$gif_btn_text_color: cornflowerblue;
$gif_btn_font_family: serif;

// Using webpack css/sass module import syntax
@import '~react-gif-player/src/GifPlayer';

// include other overrides afterward
.gif_player {
  margin: 1rem;

  img {
    border: 2px solid #222;
  }
}

development

For building and testing instructions, see CONTRIBUTING.md.

友情链接

文江博客

@abraj/react-gif-player 中文文档教程

react-gif-player

see a live demo here

install

usage

quick start

with a module bundler

options

generating still frame at build time

styles

usage with sass

development

react-gif-player

see a live demo here

install

usage

quick start

with a module bundler

options

generating still frame at build time

styles

usage with sass

development

你可能也喜欢

友情链接