2017-10-28
Rippleエフェクト実装例
マテリアルデザインでよく見るボタンを押した際の Ripple エフェクトに関する覚書
覚書
今回実装にあたり、Vuetify.jsを主に参考にした。その過程で知ったことを以下に覚書として残しておく。
currentColorでcolorと同じ値を指定出来る
汎用的な Ripple エフェクトを作る場合、ボタンの色によって波紋の色を変更する必要がある。白いボタンに白の波紋が出ても全く意味がわからないためだ。
ボタン毎に Ripple の色を指定するのもいいが、currentColorを利用すればボタンのテキスト色と同じ色を波紋の色にする事ができる。これで波紋の色指定なしにエフェクトを実現出来る。
currentColorの利用法として覚えておきたい。
アニメーションのベジェ曲線を直感的に指定する
このサイトを利用すればcubic-bezierの値を直感的に取得することが出来る。
波紋が角丸ボタンからはみ出ないようにする
波紋エフェクトのルートにborder-radius: inheritを指定すればいい。
Vuetify でこの方法が利用されていた。角丸の値を継承するという方法は思いつかなかった。