<-- IE錯誤修正 --> Elastic SVG Elements - RiS社群 | FileMaker 中小企業應用

返回   RiS社群 | FileMaker 中小企業應用 > PHP / ASP.NET / HTML5 / jQuery > HTML5 = TAG + CSS3 + JavaScript APIs > jQuery 討論區 (jQuery 豐富資源)

jQuery 討論區 (jQuery 豐富資源) 包含 jQuery 有關學習、教學、Frameworks 使用、程式與應用範例等,將集中於此。

FileMaker 教學 FileMaker 14 教學課程 FileMaker 教學
FileMaker 課程(僅接受公司/單位或1對1專屬教學


FileMaker俱樂部 加入FileMaker獲取官方資訊 FileMaker俱樂部

LinkBack 主題工具 顯示模式
  #1 (permalink)  
舊 2015-01-08
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
預設 Elastic SVG Elements

Click the image to open in full size.

View demo Download source

Today we’d like to share some inspiration for adding elasticity to elements. The idea is to integrate an SVG element into a component and then animate it from one path to another with an elastic animation. Using SVGs like this can make things like menus, buttons or other elements more interesting and make the interaction look more organic with a natural feel to it. It’s of course important to keep things subtle and not exaggerate the bounciness. The nice thing is that we can give a more “realistic” interaction feedback to the user. Especially touch feedback can benefit from using this kind of effect. Based on this idea, we’ve created some inspirational examples of contexts where a morphing shape animation enhancement could make sense.

For animating the SVGs, we use Snap.svg, the excellent JavaScript SVG library for modern browsers.

The icons used in some of the demos are from the one and only Font Awesome icon set by Dave Gandy.

For the demo with the draggable & droppable elements we use Dragabilly by David DeSandro.

Please note that this is highly experimental and the demos were only tested in the latest versions of modern browsers.

An example of how we use the SVGs in the components (the sidebar menu in this case) is the following:


The SVG is inserted after the inner menu and we use two data attributes to store the paths we will be animating the default path to (depending on whether we open or close the menu).

Click the image to open in full size.

The SVG will be placed absolute into the menu, and enough spacing needs to be ensured on the sides so that we see the line moving elastically without getting cut off. Note that the SVGs are made responsive by using a width and height of 100% and not preserving the aspect ratio. This is important for some shapes as you might want to retain certain proportions and allow a stretching in one dimension only. For this example, although we always set the width and height to 100% in the HTML, we set a fixed width to the morph shape wrapper and the SVG:

.morph-shape { position: absolute; width: 240px; height: 100%; top: 0; right: 0;}.morph-shape svg path { stroke: #5f656f; stroke-width: 5px;}With Snap.svg we can then morph from one shape to another:

(function() { function SVGMenu( el, options ) { this.el = el; this.init(); } SVGMenu.prototype.init = function() { this.trigger = this.el.querySelector( 'button.menu__handle' ); this.shapeEl = this.el.querySelector( 'div.morph-shape' ); var s = Snap( this.shapeEl.querySelector( 'svg' ) ); this.pathEl = s.select( 'path' ); this.paths = { reset : this.pathEl.attr( 'd' ), open : this.shapeEl.getAttribute( 'data-morph-open' ), close : this.shapeEl.getAttribute( 'data-morph-close' ) }; this.isOpen = false; this.initEvents(); }; SVGMenu.prototype.initEvents = function() { this.trigger.addEventListener( 'click', this.toggle.bind(this) ); }; SVGMenu.prototype.toggle = function() { var self = this; if( this.isOpen ) { classie.remove( self.el, 'menu--anim' ); setTimeout( function() { classie.remove( self.el, 'menu--open' ); }, 250 ); } else { classie.add( self.el, 'menu--anim' ); setTimeout( function() { classie.add( self.el, 'menu--open' ); }, 250 ); } this.pathEl.stop().animate( { 'path' : this.isOpen ? this.paths.close : this.paths.open }, 350, mina.easeout, function() { self.pathEl.stop().animate( { 'path' : self.paths.reset }, 800, mina.elastic ); } ); this.isOpen = !this.isOpen; }; new SVGMenu( document.getElementById( 'menu' ) );})();With the right easing functions and appropriate timings, a slightly bouncy, organic movement can be created. But the options are so versatile and depend on the whole feel of a specific context, so the possibilities are endless :)

We hope you enjoy these little effects and find them inspiring!

Find this project on Github
View demo Download source

Elastic SVG Elements was written by Mary Lou and published on Codrops.


主題 主題作者 討論區 回覆 最後發表
iconmonstr 免費簡約風圖示集(PNG、SVG 格式) wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2012-09-18 10:25 PM
Google Web Elements 把你喜愛的 Google 產品放入網站裡 wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2011-05-30 11:13 AM
[下載] Ashampoo Burning Studio Elements 中文版燒錄軟體,限時免費 wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2011-04-05 04:35 PM
[下載]Ashampoo Burning Studio Elements 繁體中文燒錄軟體,教你如何獲取官方免費序號!(價值$29.99美金) wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2010-12-21 10:26 AM



開啟 BB 代碼
關閉 HTML 程式碼
Trackbacks are 關閉
Pingbacks are 關閉
Refbacks are 開啟

所有時間均為 +8。現在的時間是 04:05 AM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2019,Jelsoft Enterprises Ltd.
Advertisement System V2.6 By   Branden
RiS 社群 ( 感謝正洋資訊顧問有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger

Content Relevant URLs by vBSEO 3.6.0 PL2