基于JS+Canves實(shí)現(xiàn)點(diǎn)擊按鈕水波紋效果
更新時(shí)間：2016年09月15日 10:34:40 作者：野獸''''
本文給大家分享基于js和canves實(shí)現(xiàn)點(diǎn)擊按鈕水波紋效果，效果非常逼真，對此感興趣的朋友一起看看吧
近來看到個(gè)不錯(cuò)的按鈕點(diǎn)擊效果，當(dāng)點(diǎn)擊時(shí)產(chǎn)生一次水波漣漪效果，挺好玩的，于是簡單的實(shí)現(xiàn)了下(沒考慮低版本瀏覽器兼容問題)
先看看效果吧，如下圖（錄制gif軟件有點(diǎn)渣，看起來卡卡的...）
這種效果可以由元素內(nèi)嵌套canves實(shí)現(xiàn)，也可以由css3實(shí)現(xiàn)。
Canves實(shí)現(xiàn)
網(wǎng)上摘了一份canves實(shí)現(xiàn)的代碼，略微去掉了些重復(fù)定義的樣式并且給出js注釋，代碼如下
html代碼
<a class="btn color-1 material-design" data-color="#2f5398">Press me!</a>
css代碼
* {
box-sizing: border-box;
outline: none;
}
body {
font-family: 'Open Sans';
font-size: 100%;
font-weight: 300;
line-height: 1.5em;
text-align: center;
}
.btn {
border: none;
display: inline-block;
color: white;
overflow: hidden;
margin: 1rem;
padding: 0;
width: 150px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 5px;
}
.btn.color-1 {
background-color: #426fc5;
}
.btn-border.color-1 {
background-color: transparent;
border: 2px solid #426fc5;
color: #426fc5;
}
.material-design {
position: relative;
}
.material-design canvas {
opacity: 0.25;
position: absolute;
top: 0;
left: 0;
}
.container {
align-content: center;
align-items: flex-start;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
max-width: 46rem;
}
js代碼
var canvas = {},
centerX = 0,
centerY = 0,
color = '',
containers = document.getElementsByClassName('material-design')
context = {},
element = {},
radius = 0,
// 根據(jù)callback生成requestAnimationFrame動(dòng)畫
requestAnimFrame = function () {
return (
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
}
);
} (),
// 為每個(gè)指定元素生成canves
init = function () {
containers = Array.prototype.slice.call(containers);
for (var i = 0; i < containers.length; i += 1) {
canvas = document.createElement('canvas');
canvas.addEventListener('click', press, false);
containers[i].appendChild(canvas);
canvas.style.width ='100%';
canvas.style.height='100%';
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
},
// 點(diǎn)擊并且獲取需要的數(shù)據(jù)，如點(diǎn)擊坐標(biāo)、元素大小、顏色
press = function (event) {
color = event.toElement.parentElement.dataset.color;
element = event.toElement;
context = element.getContext('2d');
radius = 0;
centerX = event.offsetX;
centerY = event.offsetY;
context.clearRect(0, 0, element.width, element.height);
draw();
},
// 繪制圓形，并且執(zhí)行動(dòng)畫
draw = function () {
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = color;
context.fill();
radius += 2;
// 通過判斷半徑小于元素寬度，不斷繪制 radius += 2 的圓形
if (radius < element.width) {
requestAnimFrame(draw);
}
};
init();
CSS3實(shí)現(xiàn)
接下來就是純手打的代碼了...覺得還是css3實(shí)現(xiàn)的方便些，可能是css寫習(xí)慣了...
html代碼
<a class="waves ts-btn">Press me!</a>
css代碼
.waves{
position:relative;
cursor:pointer;
display:inline-block;
overflow:hidden;
text-align: center;
-webkit-tap-highlight-color:transparent;
z-index:1;
}
.waves .waves-animation{
position:absolute;
border-radius:50%;
width:25px;
height:25px;
opacity:0;
background:rgba(255,255,255,0.3);
transition:all 0.7s ease-out;
transition-property:transform, opacity, -webkit-transform;
-webkit-transform:scale(0);
transform:scale(0);
pointer-events:none
}
.ts-btn{
width: 200px;
height: 56px;
line-height: 56px;
background: #f57035;
color: #fff;
border-radius: 5px;
}
js代碼
document.addEventListener('DOMContentLoaded',function(){
var duration = 750;
// 樣式string拼湊
var forStyle = function(position){
var cssStr = '';
for( var key in position){
if(position.hasOwnProperty(key)) cssStr += key+':'+position[key]+';';
};
return cssStr;
}
// 獲取鼠標(biāo)點(diǎn)擊位置
var forRect = function(target){
var position = {
top:0,
left:0
}, ele = document.documentElement;
'undefined' != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());
return {
top: position.top + window.pageYOffset - ele.clientTop,
left: position.left + window.pageXOffset - ele.clientLeft
}
}
var show = function(event){
var pDiv = event.target,
cDiv = document.createElement('div');
pDiv.appendChild(cDiv);
var rectObj = forRect(pDiv),
_height = event.pageY - rectObj.top,
_left = event.pageX - rectObj.left,
_scale = 'scale(' + pDiv.clientWidth / 100 * 10 + ')';
var position = {
top: _height+'px',
left: _left+'px'
};
cDiv.className = cDiv.className + " waves-animation",
cDiv.setAttribute("style", forStyle(position)),
position["-webkit-transform"] = _scale,
position["-moz-transform"] = _scale,
position["-ms-transform"] = _scale,
position["-o-transform"] = _scale,
position.transform = _scale,
position.opacity = "1",
position["-webkit-transition-duration"] = duration + "ms",
position["-moz-transition-duration"] = duration + "ms",
position["-o-transition-duration"] = duration + "ms",
position["transition-duration"] = duration + "ms",
position["-webkit-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
position["-moz-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
position["-o-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
position["transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
cDiv.setAttribute("style", forStyle(position));
var finishStyle = {
opacity: 0,
"-webkit-transition-duration": duration + "ms", // 過渡時(shí)間
"-moz-transition-duration": duration + "ms",
"-o-transition-duration": duration + "ms",
"transition-duration": duration + "ms",
"-webkit-transform" : _scale,
"-moz-transform" : _scale,
"-ms-transform" : _scale,
"-o-transform" : _scale,
top: _height + "px",
left: _left + "px",
};
setTimeout(function(){
cDiv.setAttribute("style", forStyle(finishStyle));
setTimeout(function(){
pDiv.removeChild(cDiv);
},duration);
},100)
}
document.querySelector('.waves').addEventListener('click',function(e){
show(e);
},!1);
},!1);
好了，就這些， 順便，中秋快樂~
相關(guān)文章
下面小編就為大家?guī)硪黄胘s讀寫cookie的簡單方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
JS實(shí)現(xiàn)簡單的星期格式轉(zhuǎn)換功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)簡單的星期格式轉(zhuǎn)換功能,涉及JavaScript基于Date()對象的日期時(shí)間操作技巧,需要的朋友可以參考下2018-07-07
遍歷json 對象的屬性并且動(dòng)態(tài)添加屬性的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄闅vjson 對象的屬性并且動(dòng)態(tài)添加屬性的實(shí)現(xiàn)。小編覺的挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
這篇文章主要介紹了JS制作簡易計(jì)算器的方法，文中實(shí)例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
第一次接觸神奇的Bootstrap表單，Bootstrap讓W(xué)eb開發(fā)更迅速、更簡單，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了解決頁面js接受Long型損失精度問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
js實(shí)現(xiàn)無縫滾動(dòng)雙圖切換效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無縫滾動(dòng)雙圖切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
JavaScript實(shí)現(xiàn)添加、查找、刪除元素
這篇文章主要匯總介紹了JavaScript實(shí)現(xiàn)添加、查找、刪除元素的方法，十分的簡單實(shí)用，有需要的小伙伴可以參考下。2015-07-07
Echart結(jié)合圓形實(shí)現(xiàn)儀表盤的繪制詳解
EChart開源來自百度商業(yè)前端數(shù)據(jù)可視化團(tuán)隊(duì)，基于html5?Canvas，是一個(gè)純Javascript圖表庫，提供直觀，生動(dòng)，可交互，可個(gè)性化定制的數(shù)據(jù)可視化圖表。本文將利用EChart實(shí)現(xiàn)儀表盤的繪制，感興趣的可以學(xué)習(xí)一下2022-03-03
JavaScript?發(fā)布訂閱模式（Publish/Subscribe?Pattern）是一種常用的設(shè)計(jì)模式，發(fā)布訂閱模式的核心思想是解耦事件的發(fā)生和事件的處理，本文將介紹?JavaScript?發(fā)布訂閱模式的基本原理、應(yīng)用場景以及各場景的代碼示例,需要的朋友可以參考下2023-05-05