full stack javascript developer
0,0
рейтинг
27 ноября 2012 в 21:10

Разработка → Примеры использования тригонометрических функций для анимации



Джастин Уиндл, программист и дизайнер из Google Creative Lab, опубликовал на Codepen.io интересное демо, показывающее примеры использования тригонометрических функций для задания динамики анимации (easing), которая выглядит естественно и правдоподобно. Демо написано с использованием легковесного анимационного фреймворка Sketch.js, написанного Уиндлом.

На сайте Джастина Уиндла можно найти ещё несколько интересных и полезных примеров креативной визуализации, например анимированное меню на CSS3 Makisu, демонстрацию работы его библиотеки Coffee Physics и многое другое.

Илья Сименко @ilya42
карма
526,7
рейтинг 0,0
full stack javascript developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (22)

  • 0
    Демо не грузится, на sketch.js сервер выдает 403

    «Failed to load resource: the server responded with a status of 403 (Forbidden) „

    хром
    • +1
      Загрузилось со второго раза.
  • +6
    Джастин Уиндл тот ещё затейник — http://www.soulwire.co.uk/experiments/muscular-hydrostats/
    • 0
      Хабраэффект :(
  • +1
    Извините, но как запустить? По ссылке только редактор открывает и внизу пустое окошкою Firefox, noscript отключил
    • 0
      У меня заработало после того как переключил тумблер вверху с Editor на Details.
      • 0
        У меня в FF не заработало никак, увы =(
        В хроме — ок.
  • НЛО прилетело и опубликовало эту надпись здесь
  • +15
    Как-то без откровений. «выглядит естественно и правдоподобно» — не слишком понятно, что значит «правдоподобно» в данном случае. Умиляемся естественности синуса? Забавно.

    И не понятно зачем отдельное демо для синуса и отдельное для косинуса — ну правда, зачем? (-:
    • +8
      Джастин Уиндл внезапно открыл для себя тригонометрические функции и их комбинации? Ух ты, срочно в печать!

      Что же будет дальше? Он откроет для себя полиномиальные зависимости и обнаружит, что квадратичные и кубические easing curves тоже выглядят естественно и правдоподобно? Ждём с нетерпением!
  • +4
    Не для техно-демо, а для быстрой справки в работе есть easings.net/ru
    • 0
      Вот только я вижу там только примеры с jQuery, а самих формул нет :(
      • 0
        Там для CSS есть кривые Безье
        • 0
          Не для всех. Для всяких сложных, вроде этой easings.net/ru#easeInOutBounce, нету.
          • 0
            Так как цель сайта чисто практическая — поэтому указано в форматах удобных для задания, а не их внутреннего смысла.
          • +2
            Если необходимо в практическом смысле, то можно стырить из AtomJS
            Графики
            image

            atom.Transition:
            Код
            atom.Transition.set({
            	Expo: function(p){
            		return Math.pow(2, 8 * (p - 1));
            	},
            
            	Circ: function(p){
            		return 1 - Math.sin(Math.acos(p));
            	},
            
            	Sine: function(p){
            		return 1 - Math.cos(p * Math.PI / 2);
            	},
            
            	Back: function(p){
            		var x = 1.618;
            		return Math.pow(p, 2) * ((x + 1) * p - x);
            	},
            
            	Bounce: function(p){
            		var value, a = 0, b = 1;
            		for (;;){
            			if (p >= (7 - 4 * a) / 11){
            				value = b * b - Math.pow((11 - 6 * a - 11 * p) / 4, 2);
            				break;
            			}
            			a += b, b /= 2
            		}
            		return value;
            	},
            
            	Elastic: function(p){
            		return Math.pow(2, 10 * --p) * Math.cos(12 * p);
            	}
            
            });
            
            ['Quad', 'Cubic', 'Quart', 'Quint'].forEach(function(transition, i){
            	atom.Transition.set(transition, function(p){
            		return Math.pow(p, i + 2);
            	});
            });
            


  • +1
    Не знаю почему, но напомнило Gapminder.
  • +10
    Ожидал большего.
    Подобным (по сути) я занимался на бейсике в пятом классе.
    • +3
      Не Вы один, коллега =)
    • 0
      Аналогично, но на делфи с использованием канваса. Статья ни о чем, лучше бы автор сделал обзор этого мини фреймворка.
  • +1
    Так вот они зачем, функции то эти. А то в магазине то не пригодились.
  • 0
    соs(t)*sin(t) улыбнул :) интересно, это пасхалка или автор действительно не помнит тригонометрию и то, чему идентично это выражение? И что выносить его в отдельную анимацию некорректно.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.