用SVG製作 Button 點選特效例項

阿新 • • 發佈：2019-01-30

/*Javascript程式碼片段*/ (function() { function extend( a, b ) { for( var key in b ) { if( b.hasOwnProperty( key ) ) { a[key] = b[key]; } } return a; } function SVGButton( el, options )

{ this.el = el; this.options = extend( {}, this.options ); extend( this.options, options ); this.init(); } SVGButton.prototype.options = { speed : { reset : 800, active : 150 }, easing : { reset : mina.elastic, active : mina.easein } }; SVGButton.prototype.init = function

() { this.shapeEl = this.el.querySelector( 'span.morph-shape' ); var s = Snap( this.shapeEl.querySelector( 'svg' ) ); this.pathEl = s.select( 'path' ); this.paths = { reset : this.pathEl.attr( 'd' ), active : this.shapeEl.getAttribute( 'data-morph-active'

) }; this.initEvents(); }; SVGButton.prototype.initEvents = function() { this.el.addEventListener( 'mousedown', this.down.bind(this) ); this.el.addEventListener( 'touchstart', this.down.bind(this) ); this.el.addEventListener( 'mouseup', this.up.bind(this) ); this.el.addEventListener( 'touchend', this.up.bind(this) ); this.el.addEventListener( 'mouseout', this.up.bind(this) ); }; SVGButton.prototype.down = function() { this.pathEl.stop().animate( { 'path' : this.paths.active }, this.options.speed.active, this.options.easing.active ); }; SVGButton.prototype.up = function() { this.pathEl.stop().animate( { 'path' : this.paths.reset }, this.options.speed.reset, this.options.easing.reset ); }; [].slice.call( document.querySelectorAll( 'button.button--effect-1' ) ).forEach( function( el ) { new SVGButton( el ); } ); [].slice.call( document.querySelectorAll( 'button.button--effect-2' ) ).forEach( function( el ) { new SVGButton( el, { speed : { reset : 650, active : 650 }, easing : { reset : mina.elastic, active : mina.elastic } } ); } ); })();

用SVG製作 Button 點選特效例項

用SVG製作 Button 點選特效例項

loading動畫的效能優化-摒棄Canvas，擁抱CSS3-實現點選特效

頁面點選特效

如何實現一個滑鼠點選特效的 chrome外掛

C#自定義窗體style中 button點選事件通過Command傳遞

從原始碼分析 Android Button 點選效果

Android成長實戰系列文章之ListView Item和Button點選事件的衝突原因和解決方案

波紋按鈕點選特效

Android5.0以上的專案都會有的按鈕點選特效--水波紋

Flex控制多個button點選後的效果

安卓button點選事件設定

WPF中Button點選後閃爍的解決辦法

Button 點選後改變顏色（不是點選後改變顏色又恢復）

【iOS】Button點選事件被其父檢視點選手勢UITapGestureRecognizer的遮蔽問題

《Android那些事》——ListView中Button點選事件解決方案

部落格園主頁特效之-滑鼠點選特效

利用JS製作雙層點選選項卡

LinearLayout模仿Button點選動態縮放效果

Android 文字和按鈕Button點選效果的(selector使用)直接用

Button點選事件的五種寫法

用SVG製作 Button 點選特效例項

相關推薦