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



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

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

    Поделиться публикацией
    Комментарии 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) улыбнул :) интересно, это пасхалка или автор действительно не помнит тригонометрию и то, чему идентично это выражение? И что выносить его в отдельную анимацию некорректно.

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

                            Самое читаемое