Detaillierte Erläuterung der Verwendung der Vue-Ripple-Button-Komponente

Dieses Mal erkläre ich Ihnen ausführlich die Verwendung der Vue-Ripple--Tastengruppe . Was sind die Vorsichtsmaßnahmen bei der Verwendung der Vue-Ripple-Tastenkomponente? , lass uns einen Blick darauf werfen.

Lassen Sie mich zuerst über die Verwendung sprechen:

<zk-button class="btn btn-default">默认按钮</zk-button>
<zk-button class="btn btn-default btn-round">默认按钮</zk-button>
<zk-button class="btn btn-default btn-round" :speed="4" :opacity="0.6">定义速度和初始的波浪透明度</zk-button>

Prinzip:

Hier wird Leinwand verwendet + requestAnimationFrame (aus Kompatibilitätsgründen können Sie Lösungen online finden) Einige der gezeichneten Wellen werden mit CSS-Transformation + setTimeout erstellt, was mir kein gutes Gefühl gibt.

Vorlage:

<template>
 <button class="zk-btn">
  <canvas class="zk-ripple" @click="ripple"></canvas>
  <slot></slot>
 </button>
</template>

Der Klickcode lautet wie folgt (ich habe detaillierte Kommentare hinzugefügt)

ripple(event) {
 // 清除上次没有执行的动画
 if (this.timer) {
  window.cancelAnimationFrame(this.timer);
 }
 this.el = event.target;
 // 执行初始化
 if (!this.initialized) {
  this.initialized = true;
  this.init(this.el);
 }
 this.radius = 0;
 // 点击坐标原点
 this.origin.x = event.offsetX;
 this.origin.y = event.offsetY;
 this.context.clearRect(0, 0, this.el.width, this.el.height);
 this.el.style.opacity = this.opacity;
 this.draw();
},

Hier wird hauptsächlich die Leinwand initialisiert und der Benutzer abgerufen Klicken Sie auf Positionskoordinaten und beginnen Sie mit dem Zeichnen.

Schleifenzeichnung

draw() {
 this.context.beginPath();
 // 绘制波纹
 this.context.arc(this.origin.x, this.origin.y, this.radius, 0, 2 * Math.PI, false);
 this.context.fillStyle = this.color;
 this.context.fill();
 // 定义下次的绘制半径和透明度
 this.radius += this.speed;
 this.el.style.opacity -= this.speedOpacity;
 // 通过判断半径小于元素宽度或者还有透明度，不断绘制圆形
 if (this.radius < this.el.width || this.el.style.opacity > 0) {
  this.timer = window.requestAnimationFrame(this.draw);
 } else {
  // 清除画布
  this.context.clearRect(0, 0, this.el.width, this.el.height);
  this.el.style.opacity = 0;
 }
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Implementierung des Vollbild-Scrolling-Plug-Ins in ES6

vue +vue-router+vuex-Betriebsberechtigungen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der Vue-Ripple-Button-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!