SVG實現動態模糊動畫效果
本文由碼農網 – 小峰原創翻譯,轉載請看清文末的轉載要求,歡迎參與我們的付費投稿計劃!
今天我們將向大家展示如何製作SVG動態模糊效果,並將其應用於HTML元素的常規JS或CSS動畫。
動態模糊是一種廣泛使用於動態影像和動畫的技術,它能使動作看起來更加平滑自然。
動態模糊是靜止影像或一系列影像(如電影或動畫)中快速移動物體的明顯影像拖尾。當記錄的影像在單幀記錄期間發生變化時,由於快速移動或長時間曝光從而導致動態模糊的結果。——維基百科上對動態模糊的介紹
在這篇文章中,我們將介紹如何對水平或垂直的轉換製作出類似的動態模糊效果。
注意:這種效果非常實用,但只有一些現代瀏覽器才支援。到目前為止,貌似Chrome具有最佳的效能。
為了對動畫應用動態模糊效果,我們需要在每個幀中根據物件的速度和它移動的方向應用方向模糊。
那麼,怎麼才能產生這種效果呢?
設定模糊
由於常規CSS模糊濾鏡不支援定向模糊,所以我們不得不使用SVG濾鏡。
我們已經在《Creative Gooey Effects》這篇文章中介紹過SVG濾鏡的基礎知識。
為此,我們將只使用高斯濾鏡模糊feGaussianBlur原語。
<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屬性用於設定模糊強度,並且可以佔用兩個引數,用於水平和垂直方向的模糊。
將濾鏡應用到一個元素上,就像我們之前看到的那樣,非常簡單:
.selector{ -webkit-filter: url("#blur"); filter: url("../index.html#blur"); }
然而,對於動態模糊效果,我們仍得通過JS動態更新每個幀的濾鏡。
首先,我們必須選擇並將濾鏡儲存在一個變數中,以便以後可以訪問它。由於jQuery與SVG元素不相容,所以我們需要使用本機JS函式選擇元素:
var filters = document.querySelector(".filters"), // the SVG that contains the filters defs = filters.querySelector("defs"), // the element inside the SVG blur = defs.querySelector("#blur"), // the blur filter blurFilter = blur.firstElementChild; // the feGaussianBlur primitive
然後設定強度,即改變濾鏡原語的stdDeviation屬性。例如,要設定一個水平12px的模糊:
blurFilter.setAttribute("stdDeviation","12,0");
記住,此模糊濾鏡只支援X或Y方向上的方向模糊,不能任意角度,因此你需要相應地規劃好動畫效果。
還有,改變模糊濾鏡會影響與其相關聯的所有物件,因此我們需要為將應用此效果的每個物件新增一個新的<filter>元素。下面是一種動態建立這些濾鏡的簡單方法:
// go through all the objects that need a blur filter $(".js-blur").each(function(i){ // clone the filter var blurClone=blur.cloneNode(true); // create and set a new ID so we can use the filter through CSS var blurId="blur"+i; blurClone.setAttribute("id",blurId); defs.appendChild(blurClone); // set the CSS var filter="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。
下面是一個例子:
// the element we want to apply the effect var $element=$(".selector"); // storing the last position, to be able to measure changes var lastPos=$element.offset(); // a multiplier, to be able to control the intensity of the effect var multiplier=0.25; // a helper to simplify setting the blur. function setBlur(x,y){ blurFilter.setAttribute("stdDeviation",x+","+y); } (function updateMotionBlur(){ // get the current position of the element 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); // store current position for the next frame lastPos=currentPos; // call to update in the next frame requestAnimationFrame(updateMotionBlur); })();
結果如下:
這不過是僅考慮一個要素的基本方法。更復雜的可能需要特別為其優化的程式碼。對於更復雜的拍攝,你可以考慮將動態模糊效果應用於多個物件,在沒有動畫時禁用模糊和速度計算,等等。
到這裡本教程就結束了! 再說一次,請注意,這種效果可能很耗費資源,所以你應該避免在大型物件上使用它。
譯文連結:http://www.codeceo.com/article/svg-motion-blur-effect.html
英文原文:Motion Blur Effect with SVG
翻譯作者:碼農網 – 小峰
[ 轉載必須在正文中標註並保留原文連結、譯文連結和譯者等資訊。]
相關文章
- SVG 實現動態模糊動畫效果SVG動畫
- 原生JS實現拋物線動畫以及動態模糊效果JS動畫
- svg實現矩形水平運動動畫效果SVG動畫
- SVG點選實現動態放大的圓效果SVG
- SVG 動畫實現彈性的頁面元素效果SVG動畫
- SVG 漸變動畫效果SVG動畫
- Android動態高斯模糊效果教程Android
- 圖片模糊效果實現(RenderScript)
- iOS中實現模糊效果教程iOS
- React實現動畫效果React動畫
- Javascript實現動畫效果JavaScript動畫
- SVG 實現複雜線條動畫SVG動畫
- Flutter 實現底部擴散模糊動畫(二)頁面互動Flutter動畫
- SVG實現的圓環旋轉效果SVG
- 一步步教你用HTML5 SVG實現動畫效果HTMLSVG動畫
- svg實現路徑自己動態繪製的功能SVG
- Android:簡單靠譜的動態高斯模糊效果Android
- Flutter動畫實現粒子漂浮效果Flutter動畫
- 用JavaScript實現動畫效果 (轉)JavaScript動畫
- CSS3 SVG實現可愛的動物哈士奇和狐狸動畫CSSS3SVG動畫
- 巧用 CSS 動畫實現動態氣泡背景CSS動畫
- 不炫技,SVG+CSS3 旋轉動畫屬性就能實現的夢幻效果SVGCSSS3動畫
- 萬彩動畫大師教程 | 如何實現物件的閃動的動畫效果動畫物件
- javascript實現的動態時間日期效果JavaScript
- SVG 動畫SVG動畫
- 【動畫進階】巧用 CSS/SVG 實現複雜線條光效動畫動畫CSSSVG
- Flutter 類抽屜效果動畫實現。Flutter動畫
- 加入購物車動畫效果實現動畫
- Web 頁面如何實現動畫效果Web動畫
- javascript實現文字拼寫動畫效果JavaScript動畫
- 實現漫天飛雪的動畫效果動畫
- css3動畫實現數字動態增加CSSS3動畫
- SVG動畫應用-酷炫的圖片展示效果SVG動畫
- 巧用模糊實現視覺的 3D 效果視覺3D
- iOS 開發之模糊效果的五種實現iOS
- js動態新增svgJSSVG
- CSS & SVG foreignObject 實現文字鏤空波浪動畫CSSSVGObject動畫
- css實現螺紋動態進度條效果CSS