@abraj/react-gif-player 中文文档教程
react-gif-player
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 (excludingsrc
, 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
see a live demo here
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 settrue
if you want to immediately bombard your user with a moving GIF as soon as it's availableonTogglePlay
: 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 (excludingsrc
, 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.