一个动效扩散组件(核爆炸式)

效果图

9. FlashMarker 组件 - 图1

FlashMarker组件使用

引入

  1. import Vue from 'vue'
  2. import {FlashMarker} from 'special-ui'
  3. Vue.use(FlashMarker)

使用

  1. <template>
  2. <div class="container">
  3.     <flash-marker :width="1920" :height="1080" :dataset="dataset" @clickIndex="clickIndex"/>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8.     data () {
  9.         return {
  10.             dataset:  [
  11.                 {
  12.                     position: {x: 300, y: 300},
  13.                     color: '#5070FF',
  14.                     type: 'circle',
  15.                     speed: 0.2
  16.                 },
  17.                 {
  18.                     position: {x: 350, y: 300},
  19.                     color: '#6EE7FF',
  20.                     type: 'ellipse',
  21.                     speed: 0.3,
  22.                     max: 40,
  23.                 },
  24.                 {
  25.                     position: {x: 400, y: 300},
  26.                     color: '#90EE90',
  27.                     type: 'circle',
  28.                     speed: 0.45,
  29.                 }, {
  30.                     position: {x: 950, y: 300},
  31.                     color: '#f8983a',
  32.                     type: 'circle',
  33.                     speed: 0.9,
  34.                     max: 100,
  35.                 }, 
  36.                 {
  37.                     position: {x: 700, y: 300},
  38.                     color: '#FAFA32',
  39.                     type: 'ellipse',
  40.                     speed: 1,
  41.                     max: 100,
  42.                 }
  43.             ]
  44.         }
  45.     },
  46.     methods: {
  47.         clickIndex (index) {
  48.             console.log(index)
  49.         }
  50.     }
  51. }
  52. </script>
  53. <style lang="scss" scoped>
  54. .container {
  55.   height: 100%;
  56. }
  57. </style>

组件参数

属性 说明 默认值
dataset 数据 []
width 画布宽度 0, 必传
height 画布高度 0, 必传
zIndex 视图层级 0

dataset数据项说明:
position: 动效中心坐标点;
color: 动效颜色;
type: 动效类型(circle | ellipse), 默认circle;
max: 动效最大范围, 默认20;
speed: 动效速度, 越大越快, 默认0.15