Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Анимация шрифтовых иконок на mo.js

Дата добавления: 24.02.2016 - 07:01
Добавил: Buger
Количество просмотров: 592
Количество комментариев: 2
Размер файла: 630.6Kb
Рейтинг материала: 5.0 / 2
Анимация шрифтовых иконок на mo.js
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 5.0
/
голосов 2
Может быть, вы уже натыкались на mo.js, очень мощную библиотеку графических движений для веб. С помощью данной библиотеки Вы сможете сделать тонну удивительных вещей, и сегодня мы хотели бы поделиться вами взяв на себя некоторые иконки для анимации, использовав данную библиотеку.

Согласитесь, ведь было бы очень здорово иметь возможность оживить иконки при помощи анимации. На примере, мы будем использовать библиотеку mo.js вместе с веб шрифтом Font Awesome (от Дэвида Ганди) и посмотрим, что можно с этим сделать и что у нас получится.

Для нашего примера мы будем использовать популярные иконки, которые очень часто применяются для каких либо действий пользователем (обычно это "клики" по иконкам), как например “favorite”, “like” и “upvote”. Хотя, теоретически, можно применить эффекты и для других иконок.

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

Давайте посмотрим на примере. Мы использовали шрифт Font Awesome, и включили его в кнопки следующим образом:
Код
<button class="icobutton icobutton--thumbs-up">
  <span class="fa fa-thumbs-up"></span>
</button>


Стили включают только некоторые сбросы и определения размера кнопки.

Создали анимацию следующим образом:
Код
var el = document.querySelector('.icobutton'),
  elSpan = el.querySelector('span'),
  // mo.js timeline obj
  timeline = new mojs.Timeline(),

  // tweens for the animation:

  // burst animation
  tween1 = new mojs.Burst({
  parent: el,
  duration: 1500,
  shape : 'circle',
  fill : [ '#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
  x: '50%',
  y: '50%',
  opacity: 0.6,
  childOptions: { radius: {20:0} },
  radius: {40:120},
  count: 6,
  isSwirl: true,
  isRunLess: true,
  easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
  }),
  // ring animation
  tween2 = new mojs.Transit({
  parent: el,
  duration: 750,
  type: 'circle',
  radius: {0: 50},
  fill: 'transparent',
  stroke: '#988ADE',
  strokeWidth: {15:0},
  opacity: 0.6,
  x: '50%',  
  y: '50%',
  isRunLess: true,
  easing: mojs.easing.bezier(0, 1, 0.5, 1)
  }),
  // icon scale animation
  tween3 = new mojs.Tween({
  duration : 900,
  onUpdate: function(progress) {
  var scaleProgress = scaleCurve4(progress);
  elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
  }
  });

// add tweens to timeline:
timeline.add(tween1, tween2, tween3);

// when clicking the button start the timeline/animation:
el.addEventListener('mouseenter', function() {
  timeline.start();
});


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

Теперь вы сможете попробовать создать свои собственные анимации. Возможности безграничны!



Источник: http://tympanus.net
Headshot96
23.08.2016 - 13:11
ахах, в последнем в демонстрации прикольно получилось!
Timur-kavkazec
27.02.2016 - 04:43
Крутой скрипт, возможно использую в будущей своей работе!
Добавлять комментарии могут только зарегистрированные пользователи.