vue-fucking-gallery v1.0.1

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>

配置选项

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

基础配置

animationSolution使用byCss3时有效配置

animationSolution使用byCanvas时有效配置

注意

• 当你修改上方配置的值时，本组件会响应新配置，按照新配置进行绘制，其中部分参数修改后，如若正在动画期间，则动画立即结束，回调animateEndCallback，立即绘制下一张图片并继续进行图片加载
• 如果使用imageList传入图片，但所有其中的图片都加载失败了，本组件会停止加载，直到你重新设置配置后，重新响应新配置
• 本组件会判断连续两张图片是否完全相同，完全相同则不使用第二张图片，继续读取下一张图片