モーションブラーでスピード感を出す

6741 ワード
アニメーション CSS JavaScript CSS テキストリンク

スピード感を出す実装をするには、ブラーを使うとよりスピーディーに見えます。
色々調べて面白かったので自分用まとめです。

【通常のモーション】

【ブラーをつけたモーション】

【参考サイト】
https://www.actzero.jp/developer/report-13578.html

上記参考サイトから拝借しました「早い」の動きは、中間にぼかし加工を入れることによって、通常よりもスピードを出しているという面白い手法です。

では、使用する画像を増やす以外にこのモーションブラーを実装する方法はあるのでしょうか？

CSSでモーションブラーを実装するには

残念ながら現在ではCSSでモーションブラーはサポートされていません。
なので力づくで実装することになります。

【参考サイト】
https://css-tricks.com/how-to-create-a-realistic-motion-blur-with-css-transitions/
こちらのサイトで紹介されているように、
動きの中間状態のものを複製しまくってならべる、というものです。
これは動きの速さに比例して必要な複製数が変わってきますが、場合によっては32もの複製を用意する必要があります...

参考サイトのサンプルそのまま拝借


See the Pen
Motion Blur Step 2 by Neale Van Fleet (@Nealevf)
on CodePen.


とてもしんどそうですが、確かにモーションブラーのような動きになっています。すごい。

SVGでモーションブラーを実装するには

【参考サイト】
http://tympanus.net/codrops/2015/04/08/motion-blur-effect-svg/
stdDeviation を用いて水平/垂直方向にブラーをかけることが可能です。
これをJSを利用して動的に操作することで、躍動感あるブラーを実装することができます。

// エフェクトをかけたい要素を選択
var $element=$(".selector");
// 変化を取れるよう現在のpositionを取得
var lastPos=$element.offset();
// エフェクトの強さをコントロールするために倍率を設定する
var multiplier=0.25;

// 簡単にblurを設定するためのヘルパ関数
function setBlur(x,y){
    blurFilter.setAttribute("stdDeviation",x+","+y);    
}

(function updateMotionBlur(){
    // 要素の現在のpositionを取得
    var currentPos=$element.offset();
        // 前フレームからの変更を計算し、乗数を適応
    // calculate the changes from the last frame and apply the multiplier
    var xDiff=Math.abs(currentPos.left-lastPos.left)*multiplier;
    var yDiff=Math.abs(currentPos.top-lastPos.top)*multiplier;

    // set the blur
    setBlur(xDiff,yDiff);

    // 次のフレームのために現在のポジションを保存
    lastPos=currentPos;

    // 次のフレームを呼ぶ
    requestAnimationFrame(updateMotionBlur);
})();

上記参考サイトよりサンプル

Blur_modal