Canvas Animation Collection Vue component

Time:2020-9-8

vue-canvas-effect

Canvas Animation Collection Vue component

<p align=”center”>

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

</p>

content

  • Browser compatibility
  • install
  • use

    • ES6

      • Load on demand
      • All in
    • Normal mode
  • Component list

    • neon
    • bubbles
  • Modify log
  • contribution
  • TKS

Browser compatibility

ie9+

install

NPM

npm install vue-canvas-effect --save

use

ES6

Load on demand

recommend
First install the Babel plugin import dependency

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

Then modify the. Babelrc file

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

Then, if you need the neon component, edit 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)
})

All in

Not recommended

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

Normal mode

Script tag

<html>
<head>
  ...
</head>
<body>
   <div id="app">
        <neon-effect></neon-effect>
   </div>
   <script></script>
   <script></script>
   <script>
      new Vue({
           el: '#app'
        })
   </script>
</body>
</html>

Component list

neon

  • neon-demo

name: neonEffect

//Default tag name
<neon-effect :options="options"></neon-effect>
//default options
        {
          Len: 20, // the length of one side of a Pentagon
          Count: 50, // how many lines overlap
          Rate: 20, // the smaller the speed, the faster
          Diecontrast: 0.05, // the probability of a single painting failure to redraw
          Sparkchance: 0.1, // the bigger [0,1], the more multiple the Pentagon will be drawn
          Sparkdist: 10, // distance of flashing point
          Sparksize: 2, // the size of the flicker point
          Contentlight: 60, // [0100] color block brightness
          Shadowtotimepropmult: 6, // inner ring shadow size of Pentagon
          Bgcolorarr: [0, 0, 0] // background color array
        }

bubbles

  • bubbles-demo

name: bubblesEffect

//Default tag name
<bubbles-effect :options="options"></bubbles-effect>
//default options
        {
          Color: 'RGBA (225225225,0.5)' // bubble color
          Radius: 15, // bubble radius
          Densety: 0.3, // the higher the bubble density, the denser it is (not more than 1 is recommended)
          Clearoffset: 0.2 // the larger the bubble disappearance distance [0-1], the later it disappears
        }

Modify log

See the GitHub to see the historical version

contribution

Welcome to give some comments and optimization, looking forward to yourPull Request

TKS

circleMagic