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

[nick4fake]

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

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

хром

[CodeByZen]

Загрузилось со второго раза.

[slavik]

Джастин Уиндл тот ещё затейник — http://www.soulwire.co.uk/experiments/muscular-hydrostats/

[webknjaz]

Хабраэффект :(

[Deffe]

Извините, но как запустить? По ссылке только редактор открывает и внизу пустое окошкою Firefox, noscript отключил

[SSiarhei]

У меня заработало после того как переключил тумблер вверху с Editor на Details.

[silvansky]

У меня в FF не заработало никак, увы =(
В хроме — ок.

[Sauron]

Как-то без откровений. «выглядит естественно и правдоподобно» — не слишком понятно, что значит «правдоподобно» в данном случае. Умиляемся естественности синуса? Забавно.

И не понятно зачем отдельное демо для синуса и отдельное для косинуса — ну правда, зачем? (-:

[Mezomish]

Джастин Уиндл внезапно открыл для себя тригонометрические функции и их комбинации? Ух ты, срочно в печать!

Что же будет дальше? Он откроет для себя полиномиальные зависимости и обнаружит, что квадратичные и кубические easing curves тоже выглядят естественно и правдоподобно? Ждём с нетерпением!

[Iskin]

Не для техно-демо, а для быстрой справки в работе есть easings.net/ru

[Iskin]

Там для CSS есть кривые Безье

[Iskin]

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

[TheShock]

Если необходимо в практическом смысле, то можно стырить из AtomJS

Графики

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);
	});
});

[Vitalykurin]

Не знаю почему, но напомнило Gapminder.

[barkalov]

Ожидал большего.
Подобным (по сути) я занимался на бейсике в пятом классе.

[silvansky]

Не Вы один, коллега =)

[helarqjsc]

Аналогично, но на делфи с использованием канваса. Статья ни о чем, лучше бы автор сделал обзор этого мини фреймворка.

[IvanFF]

Так вот они зачем, функции то эти. А то в магазине то не пригодились.

[templarr]

соs(t)*sin(t) улыбнул :) интересно, это пасхалка или автор действительно не помнит тригонометрию и то, чему идентично это выражение? И что выносить его в отдельную анимацию некорректно.