SVG 實現動態模糊動畫效果
今天我們將向大家展示如何製作SVG動態模糊效果，並將其應用於HTML元素的常規JS或CSS動畫。
動態模糊是一種廣泛使用於動態影像和動畫的技術，它能使動作看起來更加平滑自然。
動態模糊是靜止影象或一系列影象（如電影或動畫）中快速移動物體的明顯影象拖尾。當記錄的影象在單幀記錄期間發生變化時，由於快速移動或長時間曝光從而導致動態模糊的結果。——維基百科上對動態模糊的介紹
在這篇文章中，我們將介紹如何對水平或垂直的轉換製作出類似的動態模糊效果。
注意：這種效果非常實用，但只有一些現代瀏覽器才支援。到目前為止，貌似Chrome具有最佳的效能。
為了對動畫應用動態模糊效果，我們需要在每個幀中根據物件的速度和它移動的方向應用方向模糊。
那麼，怎麼才能產生這種效果呢？
設定模糊
由於常規CSS模糊濾鏡不支援定向模糊，所以我們不得不使用SVG濾鏡。
為此，我們將只使用高斯濾鏡模糊feGaussianBlur原語。
| 1234567 | <svg xmlns="http://www.w3.org/2000/svg"version="1.1"class="filters"><defs><filter id="blur"><fegaussianblur in="SourceGraphic"stddeviation="0,0"/></filter></defs></svg> |
stdDeviation屬性用於設定模糊強度，並且可以佔用兩個引數，用於水平和垂直方向的模糊。
將濾鏡應用到一個元素上，就像我們之前看到的那樣，非常簡單：
| 1234 | .selector{-webkit-filter:url("#blur");filter:url("../index.html#blur");} |
然而，對於動態模糊效果，我們仍得通過JS動態更新每個幀的濾鏡。
首先，我們必須選擇並將濾鏡儲存在一個變數中，以便以後可以訪問它。由於jQuery與SVG元素不相容，所以我們需要使用本機JS函式選擇元素：
| 1234 | varfilters=document.querySelector(".filters"),// the SVG that contains the filtersdefs=filters.querySelector("defs"),// the element inside the SVGblur=defs.querySelector("#blur"),// the blur filterblurFilter=blur.firstElementChild;// the feGaussianBlur primitive |
然後設定強度，即改變濾鏡原語的stdDeviation屬性。例如，要設定一個水平12px的模糊：
| 1 | blurFilter.setAttribute("stdDeviation","12,0"); |
記住，此模糊濾鏡只支援X或Y方向上的方向模糊，不能任意角度，因此你需要相應地規劃好動畫效果。
還有，改變模糊濾鏡會影響與其相關聯的所有物件，因此我們需要為將應用此效果的每個物件新增一個新的元素。下面是一種動態建立這些濾鏡的簡單方法：
| 12345678910111213141516171819202122 | // go through all the objects that need a blur filter$(".js-blur").each(function(i){// clone the filtervarblurClone=blur.cloneNode(true);// create and set a new ID so we can use the filter through CSSvarblurId="blur"+i;blurClone.setAttribute("id",blurId);defs.appendChild(blurClone);// set the CSSvarfilter="url(#"+blurId+")";$(this).css({webkitFilter:filter,filter:filter})// store the filter reference on the object for practicity.data("blur",blurClone);}); |
測量速度
接下來，我們需要能夠計算得到自上一幀以來物件移動的距離。每一幀我們都要計算。實現方法可能會根據設定的不同而不同；例如動畫如何完成方面的設定等等。在本教程中，我們將採用更通用的方法，儘管它可能無法針對所有用例進行優化，但適用於大多數JS和CSS動畫。
為了得到距離結果，我們將使用jQuery的offset函式，這正是我們需要的：它返回元素的座標，相對於文件（而不是它的父類）而言，並且將transform屬性考慮在內。
為了能夠檢查改變並更新每一幀，我們將使用requestAnimationFrame。
下面是一個例子：
| 1234567891011121314151617181920212223242526272829 | // the element we want to apply the effectvar$element=$(".selector");// storing the last position, to be able to measure changesvarlastPos=$element.offset();// a multiplier, to be able to control the intensity of the effectvarmultiplier=0.25;// a helper to simplify setting the blur. functionsetBlur(x,y){blurFilter.setAttribute("stdDeviation",x+","+y);}(functionupdateMotionBlur(){// get the current position of the elementvarcurrentPos=$element.offset();// calculate the changes from the last frame and apply the multipliervarxDiff=Math.abs(currentPos.left-lastPos.left)*multiplier;varyDiff=Math.abs(currentPos.top-lastPos.top)*multiplier;// set the blursetBlur(xDiff,yDiff);// store current position for the next framelastPos=currentPos;// call to update in the next framerequestAnimationFrame(updateMotionBlur);})(); |
結果如下：
這不過是僅考慮一個要素的基本方法。更復雜的可能需要特別為其優化的程式碼。對於更復雜的拍攝，你可以考慮將動態模糊效果應用於多個物件，在沒有動畫時禁用模糊和速度計算，等等。
到這裡本教程就結束了！ 再說一次，請注意，這種效果可能很耗費資源，所以你應該避免在大型物件上使用它。