vfg
vue-fucking-gallery
npm i vue-fucking-gallery
vfg

vue-fucking-gallery

A simple gallery library for vue, and for you to fuck!

by Ann Ann

1.0.1 (see all)License:GPL-3.0-onlyTypeScript:Not Found
npm i vue-fucking-gallery
Readme

GitHub stars GitHub issues GitHub forks GitHub last commit
npm npm

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

引入

import Vue from 'vue'
import FuckingGallery from 'vue-fucking-gallery'

Vue.use(FuckingGallery)

使用

基础

<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>

配置选项

所有的配置选项均是响应式的,并且除非是需要重置页面布局的,否则不会停止当前动画并直接绘制下一张

基础配置

名称类型默认值说明
elementIdString'vue-fucking-gallery'相册元素的ID
animationSolutionString'byCanvas'动画绘制方式,在以下选项中选择
'byCss3': 使用Css3绘制动画
'byCanvas': 使用Canvas绘制动画
showCanvasBooleantrue是否显示本组件
gridMaxWidthInteger200每个动画单元的最大宽度,基于性能考虑,不要小于48
gridMaxHeightInteger200每个动画单元的最大高度,基于性能考虑,不要小于48
gridDividerWidthInteger1动画单元之间的分割线,可以设置为0
gridDividerColorString'#fff'分割线颜色,支持3位或6位Hex色值,例如'#fff''#ffffff'
useAnimateBooleantrue是否使用动画,不使用动画将直接在等待时间完成后绘制下一张图片
slideWaitTimeInteger5000每次动画完毕到下一次动画开始前的等待时间,单位为毫秒,不能小于1000
animateSpeedInteger150动画速度,与animateSpeedDelay值共用以确定动画运行时间,单位为毫秒,不能小于100
animateSpeedDelayInteger10动画运行速度积,与animateSpeed值共用以确定动画运行时间,不能小于5
animateItemDirectionString'left'每个动画单元的行进方向,在以下选项中选择
'left': 从左到右
'top': 从上到下
'right':从右到左
'bottom': 从下到上
'random': 全部随机,使用该值,则animateShowOrder会强制使用'random'
'none': 不使用移动效果,使用该值,则animateEffect会强制使用'opacity'
'snake': 贪吃蛇模式,使用该值,则起始位置强制为左上第一个,逆时针绕圈,animateShowOrder会强制使用'singleItem'
animateRowDirectionString'left'每一行的展示方向,在以下选项中选择
'left': 每行中动画单元从左到右展示
'right': 每行中动画单元从右到左展示
'random': 随机选择'left'或者'right'
animateColumnDirectionString'top'每一列的展示方向,在以下选项中选择
'top': 每列中动画单元从上到下展示
'bottom': 每列中动画单元从下到上展示
'random': 随机选择'top'或者'bottom'
animateShowOrderString'singleItem'动画单元的展示间隔,具体时间间隔由animateSpeedanimateSpeedDelay共同决定,在一下选项中选择
'singleItem': 每个动画单元会在上一个动画单元出现后再出现
'multiLine': 每一行/列的动画单元会一起出现,并按照animateItemDirection指定的方向开始整行/列出现
'random': 随机设置每个动画单元的动画开始时间
animateEffectString'opacity'动画单元的效果,在以下选项中选择
'opacity': 从完全透明到完全不透明
'none': 不使用效果
'sameRandom': 所有动画单元随机选择'opacity''none'中的一个
'allRandom': 每个动画单元单独随机选择
imageListArray[]设置的图片列表,为空则自动使用UnSplash服务
useUnSplashBooleanfalse是否使用UnSplash服务,即使设置为false,如果imageList为空,依然会按true处理
unSplashTagString'japan'UnSplash的图片标签,不同的标签会返回符合不同标签的随机图片
initLoadFinishCallbackFunctionnull初始化读取第一张图片完成后的回调
photoLoadSuccessCallbackFunctionnull读取图片完成后的回调,包括第一次读取图片完成也会回调
animateBeginCallbackFunctionnull动画开始的回调
animateEndCallbackFunctionnull动画结束的回调

animationSolution使用byCss3时有效配置

名称类型默认值说明
css3AnimateEasingString'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时有效配置

名称类型默认值说明
canvasAnimateEasingString'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传入图片,但所有其中的图片都加载失败了,本组件会停止加载,直到你重新设置配置后,重新响应新配置
  • 本组件会判断连续两张图片是否完全相同,完全相同则不使用第二张图片,继续读取下一张图片

Downloads/wk

32

GitHub Stars

12

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.0.1
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial