vue canvas動效組件插件庫製做

時間 2019-11-30

標籤 vue canvas 組件插件製做简体版

原文原文鏈接

vue-canvas-effect

canvas動畫合集Vue組件javascript

🌾 online demo | 📘 English document css

內容

[瀏覽器兼容]
[安裝]
[使用]
- [ES6]
  - [按需加載]
  - [所有引入]
- [普通模式]
[組件列表]
- [neon]
- [bubbles]
[修改日誌]
[貢獻]
[TKS]

瀏覽器兼容

IE	Firefox	Chrome	Safari	iOS	Android
IE9+	✓	✓	✓	✓	✓

安裝

NPM

npm install vue-canvas-effect --save
複製代碼

使用

ES6

按需加載

推薦首先安裝babel-plugin-import依賴html

npm install babel-plugin-import --save-dev
複製代碼

而後修改 .babelrc文件vue

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

而後，若是你須要neon組件，編輯main.jsjava

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)
})
複製代碼

所有引入

不推薦git

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

普通模式

script 標籤github

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

// 默認標籤名
<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: bubblesEffectcanvas

// 默認標籤名
<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] 越大越晚消失
        }
複製代碼