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

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

【通常のモーション】

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

【参考サイト】
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);
})();

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