vue-canvas-effect

canvas动画合集Vue组件

? online demo | ? English document

内容

[浏览器兼容]
[安装]
[使用]
- [ES6]
  - [按需加载]
  - [全部引入]
- [普通模式]
[组件列表]
- [neon]
- [bubbles]
[修改日志]
[贡献]
[TKS]

浏览器兼容

IE	Firefox	Chrome	Safari	iOS	Android
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 标签

<html>
<head>...
</head>
<body><div id="app"><neon-effect></neon-effect></div><script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script><script src="../dist/neon.min.js"></script><script>new Vue({el: '#app'})</script>
</body>
</html>
复制代码

组件列表

neon

neon-demo

name: neonEffect

// 默认标签名
<neon-effect :options="options"></neon-effect>
复制代码

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

// 默认标签名
<bubbles-effect :options="options"></bubbles-effect>
复制代码

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

实现的方式还是相对简单的有兴趣的朋友可以一起来完善下这个项目让canvas动画在vue里面用起来更加快捷。

项目地址 vue-canvas-effect

TKS

circleMagic

转载于:https://juejin.im/post/5a79bb7b5188257a5850cb92

vue canvas动效组件插件库制作相关推荐

动效素材极速交付：腾讯PAG动效组件技术揭秘
编者按:音视频产品中的动效素材需求是源源不断的,例如贴纸花字,转场特效,照片和视频模板等,并且对它们的产量,上线速度,以及视觉效果都有比较高的要求.但在传统工作流中的交付成本却非常高,需要通过代码来手 ...
前端canvas动效实战，PIXI+GSAP仿写vanmoof刹车动效 | 猿创营
前言事情是这样的,上个月接了一个活儿.客户要我们模仿一个国外的网站 https://www.vanmoof.com/en-NL/s3?color=dark 为他们做几个展示动效. 确实很酷!这个项目 ...
AE插件在哪里找?6款AE动效必备插件来了
作为一个专注于AE的小可爱,今日就来跟你分享妥妥的干货!今天分享啥呢?没错儿!就是咱们AE动效设计师最常用的插件.之前给大家介绍过了插件安装的方法,不会的小伙伴们可以点击我的主页查看之前的笔记哦~好嘞 ...
vue + cesium加载krigingjs插件库生成等值线图
一.效果图集图一图二图三二.核心代码 1.调用drawKriging传入参数 // lons:经度数组// lats:纬度数组// values:已知的值数组// coords:是一个cesi ...
记录一次自定义动效组件
android 酷炫文案随机归位动效实现记录一次自定义控件的实现原理动画效果分解为一个随机位置归位动效和一个渐变的动效 1.根据文案在onSizechange方法里生成一个随机位置的集合和一个最终 ...
【Vue粒子动效插件】Vue3之vue-particles实现一个科技粒子动画登录页面，Picker It~
vue-particles: 安装 npm install vue-particles --save-dev 引入 main.ts import Vue from 'vue' import VuePa ...
vue的过渡动画（有vue的动画库和ui库的介绍）
一.概念 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 二.默认过渡 <template><div><button @click=" ...
Principle如何制作动效设计？简单易学的Principle动效设计教程
Principle for Mac是一款新开发的交互设计软件.相比 Pixate 更容易上手,界面类似 Sketch 等做图软件,思路有点像用 Keynote 做动画,更「可视化」一些. 如果您还没有 ...
简单3步, 不懂技术也能做出精美的高保真原型动效
用Sketch做原型设计,都有一个绕不过的坑,就是辛苦做好页面还要打开其他原型工具,长传文件再慢慢加动效.好不容易换了Adobe XD,以为专业的软件自然会好不少.结果!因为是大陆的账号,很多插件都用 ...

vue canvas动效组件插件库制作

vue-canvas-effect

内容

浏览器兼容

安装

NPM

使用

ES6

按需加载

全部引入

普通模式

组件列表

neon

bubbles

修改日志

贡献

TKS

vue canvas动效组件插件库制作相关推荐

最新文章

热门文章