Гнучкі SVG елементи

Перекладено: Влад Мержевич

Демонстрація

Завантажити початковий код

Сьогодні ми хочемо поділитися деякими думками щодо надання гнучкості елементам. Ідея полягає в тому, щоб інтегрувати SVG елемент в компонент, а потім оживити перехід від однієї кривої до іншої за допомогою анімації. Використання SVG для таких речей як меню, кнопки та інші елементи робить їх цікавішими, а взаємодія з ними природною та органічною. Звичайно, важливо зберегти в них витонченість без надмірної пружності. Приємно, що ми можемо надати більш "реалістичний" інтерактивний зворотний зв'язок з користувачем. Особливу вигоду від такого ефекту можна отримати при взаємодії з сенсорним екраном. На основі цієї ідеї ми створили кілька вражаючих прикладів, де анімована зміна форми має сенс.

Для анімації SVG ми використовуємо Snap.svg - відмінну бібліотеку JavaScript для сучасних браузерів.

Іконки, що використовуються в деяких демонстраціях, взяті з одного набору іконок Font Awesome від Дейва Ганді.

Для демонстрації перетягування елементів ми використовуємо Dragabilly від Девіда ДеСандро.

Будь ласка, зверніть увагу, що все це є експериментальним і демонстрації були перевірені лише в останніх версіях сучасних браузерів.

Приклад того, як ми використовуємо SVG в компонентах (бічне меню у даному випадку), наступний:

<nav id="menu" class="menu">
	<button class="menu__handle"><span>Меню</span></button>
	<div class="menu__inner">
		<ul>
			<li><a href="#"><i class="fa fa-fw fa-home"></i><span>Головна<span></a></li>
			<li><a href="#"><i class="fa fa-fw fa-heart"></i><span>Улюблене<span></a></li>
			<li><a href="#"><i class="fa fa-fw fa-folder"></i><span>Файли<span></a></li>
			<li><a href="#"><i class="fa fa-fw fa-tachometer"></i><span>Статистика<span></a></li>
		</ul>
	</div>
	<div class="morph-shape" data-morph-open="M300-10c0,0,295,164,295,410c0,232-295,410-295,410" 
        data-morph-close="M300-10C300-10,5,154,5,400c0,232,295,410,295,410">
		<svg width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="none">
			<path fill="none" d="M300-10c0,0,0,164,0,410c0,232,0,410,0,410"/>
		</svg>
	</div>
</nav>

SVG вставляється після вкладеного меню і ми задіяємо два атрибути data для зберігання анімованих в майбутньому кривих, залежно від того, відкрите чи закрите меню.

SVG додається в меню абсолютно, при цьому повинно бути достатньо порожнього простору з боків, щоб ми бачили рух гнучкої лінії без її обрізання. Зверніть увагу, що SVG займає ширину та висоту 100% і не зберігає початкові пропорції. Це важливо для деяких форм, у яких, можливо, ви захочете зберегти задані пропорції і зробити розтягування тільки в одному напрямку. Для цього прикладу ми встановили фіксовану ширину для обгортки форми.

.morph-shape {
	position: absolute;
	width: 240px;
	height: 100%;
	top: 0;
	right: 0;
}

.morph-shape svg path {
	stroke: #5f656f;
	stroke-width: 5px;
}

Через Snap.svg ми потім можемо зробити перехід від однієї форми до іншої.

(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' ) );

})();

З правильно встановленою функцією часу та відповідним часом анімації отримаємо гнучкий природній рух. Але варіанти настільки змінливі та залежать від використаного контексту, що можливості просто безмежні.

Сподіваємося, вам сподобалися ці маленькі ефекти, і ви знайшли їх надихаючими!