Эластичные SVG элементы

Несколько примеров эластичных SVG для анимации элементов пользовательского интерфейса.

Сегодня мы бы хотели продемонстрировать несколько примеров эффекта эластичности. Идея заключается в внедрении SVG элемента в компонент страницы, с целью его дальнейшей анимации. Данную технику можно применить к меню, кнопкам или другим элементам пользовательского интерфейса.

Для анимации SVG, будем использовать Snap.svg. Это блестящая JavaScript библиотека для работы с SVG.

В качестве иконок используем Font Awesome.

Помните, что данные примеры будут работать как следует в последних версиях браузеров.

Вот как мы будем использовать SVG с компонентами (в нашем случае в меню):

Код
<nav id="menu" class="menu">
  <button class="menu__handle"><span>Menu</span></button>
  <div class="menu__inner">
  <ul>
  <li><a href="#"><i class="fa fa-fw fa-home"></i><span>Home<span></a></li>
  <li><a href="#"><i class="fa fa-fw fa-heart"></i><span>Favs<span></a></li>
  <li><a href="#"><i class="fa fa-fw fa-folder"></i><span>Files<span></a></li>
  <li><a href="#"><i class="fa fa-fw fa-tachometer"></i><span>Stats<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>


Мы используем два data атрибута для хранения SVG путей, которые в дальнейшем будем видоизменять (в зависимости от открытия и закрытия меню).

Элементы SVG будут располагаться абсолютно по отношению к меню; так же нам нужно немного пространства для того, чтобы во время анимации элементы не обрезались. Помните, что при расширении SVG на 100%, пропорции не сохраняются. Это очень важно в случае использования некоторых фигур. В данном примере мы выставляем не только 100% высоте и ширине элемента, но и задали фиксированные размеры контейнеру с SVG:

Код
.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' ) );

})();


Надеемся, что данные примеры произвели на вас впечатление!

  • FalleN

  • 5005

  • 1

  • 307
Теги: animation, EFFECT MORPH, svg

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!