JSに基づいて+Canvesでボタンクリックで水波紋効果を実現

最近、良いボタンのクリック効果を見つけました。クリックすると水の波紋効果が発生し、とても面白いです。だから簡単に実装してみました（低バージョンのブラウザの互換性については考慮していません）。

まず効果を見てみましょう。以下の図（gifキャプチャーソフトウェアが少し粗いので、少し不自然に見えるかもしれません...）

この効果は、要素内にキャンバスをネストすることで実現できます。また、CSSで実現することもできます。3実装。

キャンバス実装

ネットからキャンバス実装のコードを手に入れ、少し重複する定義を削除し、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,
// callbackを使用してrequestAnimationFrameアニメーションを生成します
requestAnimFrame = function () {
return (
window.requestAnimationFrame || 
window.mozRequestAnimationFrame || 
window.oRequestAnimationFrame || 
window.msRequestAnimationFrame || 
function (callback) {
window.setTimeout(callback, 1000 / 60);
}
);
} (),
// 指定された各要素に対して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;
}
},
// クリックして必要なデータを取得します、例えばクリック座標、要素のサイズ、色
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();}}
},
// 円を描画し、アニメーションを実行
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実現

次は手作業でのコードです...CSSがいいと思います...3実現が簡単になるかもしれません、CSSを書き慣れているからかもしれません...

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;
// スタイル文字列の組み立て
var forStyle = function(position){
var cssStr = '';
for( var key in position){
if(position.hasOwnProperty(key)) cssStr += key+:+position[key]+';';
};
return cssStr;
}
// 取得マウスクリック位置
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", // 过渡時間
"-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);

それでは、これで終わりです。それに、中秋節おめでとう～

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、本サイトは所有権を持ちません。人工的に編集されていないため、法的責任を負いません。著作権侵害の疑いがある場合は、以下のメールアドレスまでご連絡ください：notice#oldtoolbag.com（メールを送信する際には、#を@に変更してください。通報を行い、関連する証拠を提供してください。一旦確認がとりあえず、本サイトは即座に侵害される内容を削除します。）