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



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

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