How to make corrugated buttons in Vue

This article mainly introduces "Vue how to make corrugated buttons". In daily operation, I believe many people have doubts about how Vue makes corrugated buttons. Xiaobian consulted various materials and sorted out simple and easy operation methods. I hope to help you answer the doubts about "Vue how to make corrugated buttons"! Next, please follow the small series to learn together!

Let me start with the usage:

Default button Default button Defines speed and initial wave transparency

Principle:

Here is canvas + requestAnimationFrame (compatibility can be found online solution) to draw the ripple, some use css transform + setTimeout to do, I feel not very good.

Template:

Click on the code below (I have added detailed comments)

ripple(event) { //Clear animation not executed last time if (this.timer) { window.cancelAnimationFrame(this.timer); } this.el = event.target; //Execute initialization if (! this.initialized) { this.initialized = true; this.init(this.el); } this.radius = 0; //click on the origin of the mark 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();},

Here the main initialization canvas and get the user click position coordinates, and start drawing.

loop drawing

draw() { this.context. initiPath (); //Draw ripples this.context.arc (this.origin.x, this.origin.y, this.radius, 0, 2 * Math.PI, false); this.context.fillStyle = this.color; this.context.fill(); //Defines the radius and transparency of the next draw this.radius += this.speed; this.el.style.opacity -= this.speedOpacity;//Keep drawing circles if (this.radius) by judging whether the radius is smaller than the element width or whether there is transparency

< this.el.width || this.el.style.opacity >

0){ this.timer = window.requestAnimationFrame(this.draw); } else { //clear canvas this.context.clearRect(0, 0, this.el.width, this.el.height); this.el.style.opacity = 0; }} At this point, the study of "Vue how to make a ripple button" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!