canvas动画合集Vue组件

2024年3月4日 289次阅读 来源: data_Driven

vue-canvas-effect

canvas动画合集Vue组件

<p align=”center”>

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

</p>

内容

浏览器兼容

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

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

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。

TKS

circleMagic

    原文作者：data_Driven
    原文地址: https://segmentfault.com/a/1190000013178298
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞