Vue Fucking Gallery
基于Vue的相册组件，Canvas使用ZRender
For english user, read here
说明
- 这是一个会让你不停骂"操"的操蛋相册组件库，配置的时候，你会骂一句"操"，搞完了刷新网页，你还会骂一句"操"！
- 你可以完全不配置任何选项，直接使用
- 支持Css3及Canvas两种动画播放模式，并可通过配置变换
- 支持动画持续时间、等待时间配置
- 支持设置动画单元的行进方向，支持流水式进入及整行/整列进入
- 使用Css3时支持所有的Css3动画时间曲线，使用Canvas时支持所有的ZRender动画时间曲线
- 大部分参数支持随机配置
- 支持配置图片地址数组，或使用Unsplash随机图片
- Unsplash随机图片支持标签设置
- 每张图片会在动画完成之后开始加载
- 支持图片动画期间透明度设置
- 支持分割线及其颜色配置
- 独特的贪吃蛇模式
示例
浏览器支持
所有现代浏览器，Internet Explorer 11，其他未测试
安装
NPM
$ npm install vue-fucking-gallery
引入
Vue
使用
基础
<template> <vue-fucking-gallery class="gallery"></vue-fucking-gallery></template> <style>/* 相册组件必须设定宽度和高度 */.gallery { width: 100%; height: 100%; margin: 0;}</style>进阶
<template> <vue-fucking-gallery :element-id="id" :show-canvas="showCanvas" :animation-solution="animationSolution" :grid-max-width="gridMaxWidth" :grid-max-height="gridMaxHeight" :grid-divider-width="gridDividerWidth" :grid-divider-color="gridDividerColor" :slide-wait-time="slideWaitTime" :use-animate="useAnimate" :animate-speed="animateSpeed" :animate-speed-delay="animateSpeedDelay" :animate-item-direction="animateItemDirection" :animate-row-direction="animateRowDirection" :animate-column-direction="animateColumnDirection" :animate-show-order="animateShowOrder" :animate-effect="animateEffect" :canvas-animate-easing="canvasAnimateEasing" :css3-animate-easing="css3AnimateEasing" :image-list="imageList" :use-un-splash="useUnSplash" :un-splash-tag="unSplashTag" :init-load-finish-callback="initLoadFinishCallback" :photo-load-success-callback="photoLoadSuccessCallback" :animate-begin-callback="animateBeginCallback" :animate-end-callback="animateEndCallback" class="gallery"></vue-fucking-gallery></template> <style>/* 相册组件必须设定宽度和高度 */.gallery { width: 100%; height: 100%; margin: 0;}</style>配置选项
所有的配置选项均是响应式的，并且除非是需要重置页面布局的，否则不会停止当前动画并直接绘制下一张
基础配置
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| elementId | String | 'vue-fucking-gallery' |
相册元素的ID |
| animationSolution | String | 'byCanvas' |
动画绘制方式，在以下选项中选择'byCss3': 使用Css3绘制动画'byCanvas': 使用Canvas绘制动画 |
| showCanvas | Boolean | true |
是否显示本组件 |
| gridMaxWidth | Integer | 200 |
每个动画单元的最大宽度，基于性能考虑，不要小于48 |
| gridMaxHeight | Integer | 200 |
每个动画单元的最大高度，基于性能考虑，不要小于48 |
| gridDividerWidth | Integer | 1 |
动画单元之间的分割线，可以设置为0 |
| gridDividerColor | String | '#fff' |
分割线颜色，支持3位或6位Hex色值，例如'#fff'或'#ffffff' |
| useAnimate | Boolean | true |
是否使用动画，不使用动画将直接在等待时间完成后绘制下一张图片 |
| slideWaitTime | Integer | 5000 |
每次动画完毕到下一次动画开始前的等待时间，单位为毫秒，不能小于1000 |
| animateSpeed | Integer | 150 |
动画速度，与animateSpeedDelay值共用以确定动画运行时间，单位为毫秒，不能小于100 |
| animateSpeedDelay | Integer | 10 |
动画运行速度积，与animateSpeed值共用以确定动画运行时间，不能小于5 |
| animateItemDirection | String | 'left' |
每个动画单元的行进方向，在以下选项中选择'left': 从左到右'top': 从上到下'right':从右到左'bottom': 从下到上'random': 全部随机，使用该值，则animateShowOrder会强制使用'random''none': 不使用移动效果，使用该值，则animateEffect会强制使用'opacity''snake': 贪吃蛇模式，使用该值，则起始位置强制为左上第一个，逆时针绕圈，animateShowOrder会强制使用'singleItem' |
| animateRowDirection | String | 'left' |
每一行的展示方向，在以下选项中选择'left': 每行中动画单元从左到右展示'right': 每行中动画单元从右到左展示'random': 随机选择'left'或者'right' |
| animateColumnDirection | String | 'top' |
每一列的展示方向，在以下选项中选择'top': 每列中动画单元从上到下展示'bottom': 每列中动画单元从下到上展示'random': 随机选择'top'或者'bottom' |
| animateShowOrder | String | 'singleItem' |
动画单元的展示间隔,具体时间间隔由animateSpeed和animateSpeedDelay共同决定，在一下选项中选择'singleItem': 每个动画单元会在上一个动画单元出现后再出现'multiLine': 每一行/列的动画单元会一起出现，并按照animateItemDirection指定的方向开始整行/列出现'random': 随机设置每个动画单元的动画开始时间 |
| animateEffect | String | 'opacity' |
动画单元的效果，在以下选项中选择'opacity': 从完全透明到完全不透明'none': 不使用效果'sameRandom': 所有动画单元随机选择'opacity'和'none'中的一个'allRandom': 每个动画单元单独随机选择 |
| imageList | Array | [] |
设置的图片列表，为空则自动使用UnSplash服务 |
| useUnSplash | Boolean | false |
是否使用UnSplash服务，即使设置为false，如果imageList为空，依然会按true处理 |
| unSplashTag | String | 'japan' |
UnSplash的图片标签，不同的标签会返回符合不同标签的随机图片 |
| initLoadFinishCallback | Function | null |
初始化读取第一张图片完成后的回调 |
| photoLoadSuccessCallback | Function | null |
读取图片完成后的回调，包括第一次读取图片完成也会回调 |
| animateBeginCallback | Function | null |
动画开始的回调 |
| animateEndCallback | Function | null |
动画结束的回调 |
animationSolution使用byCss3时有效配置
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| css3AnimateEasing | String | 'ease' |
Css3的animation-timing-function参数值，支持'linear' 'ease' 'ease-in' 'ease-out' 'ease-in-out' 'cubic-bezier(*,*,*,*)'，另外有如下两个随机选项'sameRandom': 所有的动画单元随机选择使用'linear' 'ease' 'ease-in' 'ease-out' 'ease-in-out'中的一个'allRandom': 每个动画单元单独随机选择使用'linear' 'ease' 'ease-in' 'ease-out' 'ease-in-out'中的一个 |
animationSolution使用byCanvas时有效配置
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| canvasAnimateEasing | String | 'SinusoidalInOut' |
ZRender的动画时间曲线，包含'Linear' 'QuadraticIn' 'QuadraticOut' 'QuadraticInOut' 'CubicIn' 'CubicOut' 'CubicInOut' 'QuarticIn' 'QuarticOut' 'QuarticInOut' 'QuinticIn' 'QuinticOut' 'QuinticInOut' 'SinusoidalIn' 'SinusoidalOut' 'SinusoidalInOut' 'ExponentialIn' 'ExponentialOut' 'ExponentialInOut' 'CircularIn' 'CircularOut' 'CircularInOut' 'ElasticIn' 'ElasticOut' 'ElasticInOut' 'BackIn' 'BackOut' 'BackInOut' 'BounceIn' 'BounceOut' 'BounceInOut'参数值具体效果参见ZRender官方示例，另外与上方 css3AnimateEasing一样，包含'sameRandom'和'allRandom'选项 |
注意
- 当你修改上方配置的值时，本组件会响应新配置，按照新配置进行绘制，其中部分参数修改后，如若正在动画期间，则动画立即结束，回调
animateEndCallback，立即绘制下一张图片并继续进行图片加载 - 如果使用
imageList传入图片，但所有其中的图片都加载失败了，本组件会停止加载，直到你重新设置配置后，重新响应新配置 - 本组件会判断连续两张图片是否完全相同，完全相同则不使用第二张图片，继续读取下一张图片