canvas动画合集Vue组件

tigerZH 发布于2019-08-30 13:56 / 3030人阅读

摘要：动画合集组件内容浏览器兼容安装使用按需加载全部引入普通模式组件列表修改日志贡献浏览器兼容安装使用按需加载推荐首先安装依赖然后修改文件然后，如果你需要组件，编辑全部引入不推荐普通模式标签组件列表

vue-canvas-effect

canvas动画合集Vue组件

[? online demo](https://chenxuan0000.github.io/vue-canvas-effect/index.html)

内容

浏览器兼容

安装

使用

ES6

按需加载

全部引入

普通模式

组件列表

neon

bubbles

修改日志

贡献

TKS

浏览器兼容

ie9+

安装 NPM

npm install vue-canvas-effect --save

使用 ES6 按需加载

推荐
首先安装babel-plugin-import依赖

npm install babel-plugin-import --save-dev

然后修改 .babelrc文件

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "vue-canvas-effect",
    "libraryDirectory": "src/components"
  }]]
}

然后，如果你需要neon组件，编辑main.js

import Vue from "vue"
import {neon} from "vue-canvas-effect";
Vue.component(neon.name, neon);
`or`
Vue.component("customName", neon);
new Vue({
  el: "#app",
  render: h => h(App)
})

全部引入

不推荐

import Vue from "vue"
import vueCanvas from "vue-canvas-effect";
Vue.use(vueCanvas)
new Vue({
  el: "#app",
  render: h => h(App)
})

普通模式

script 标签

...

组件列表 neon

neon-demo

name: neonEffect

// 默认标签名

//default options
        {
          len: 20, //五边形的单边长度
          count: 50, //多少线重叠
          rate: 20, //速度 越小越快
          dieChance: 0.05, //单次绘画失败进行重绘的几率
          sparkChance: 0.1, //[0,1] 越大画出的五边形越多重
          sparkDist: 10, //闪烁点的距离
          sparkSize: 2,//闪烁点的大小
          contentLight: 60, // [0,100] 色块的亮度
          shadowToTimePropMult: 6, //五边形的内环阴影大小
          bgColorArr: [0, 0, 0] //背景色数组
        }

bubbles

bubbles-demo

name: bubblesEffect

// 默认标签名

//default options
        {
          color: "rgba(225,225,225,0.5)", //气泡颜色
          radius: 15, //气泡半径
          densety: 0.3, // 气泡密度 越大越密集(建议不要大于1)
          clearOffset: 0.2 // 气泡消失距离[0-1] 越大越晚消失
        }

修改日志

See the GitHub 查看历史版本.

贡献

欢迎给出一些意见和优化，期待你的 Pull Request。

TKS

circleMagic

超融合服务器服务器托管 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115649.html

canvas动画合集Vue组件

摘要：动画合集组件内容浏览器兼容安装使用按需加载全部引入普通模式组件列表修改日志贡献浏览器兼容安装使用按需加载推荐首先安装依赖然后修改文件然后，如果你需要组件，编辑全部引入不推荐普通模式标签组件列表 vue-canvas-effect canvas动画合集Vue组件 [? online demo](https://chenxuan0000.github.io/vue-canvas-effe...

AlexTuan 2019-08-26 11:38 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

Ethan815 2019-08-05 11:54 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

zxhaaa 2019-08-22 16:11 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

JouyPub 2019-08-02 10:10 评论0 收藏0