Изинг наоборот
Всем привет. Столкнулся с проблемой... Решил добавить в свое приложение изинг, один-два вида, чтобы не подгружать большие библиотеки, плагины и прочее. Выдернул ф-цию, использую все ок. Если двигаю квадратик от 50 до 310 все прекрасно... Но как сделать наоборот? если мне нужно подвинуть квадратик из 310 в 50))) Наша ф-ция уже не арбайнет... Помогите пожалуйста разобраться.
В моем случае это функция
easeInOutQuart = function (t, b, c, d) {
t /= d/2;
if (t < 1) return c/2*t*t*t*t + b;
t -= 2;
return -c/2 * (t*t*t*t - 2) + b;
}
А весь замес происходит тут:
if(myEasingStatus){
40
if (t<=d) {
41
42
context.fillStyle = "#000000";
43
context.fillRect(easeInOutQuart(t, 50, 310, d), 50, 50, 50);
44
myRectX = easeInOutQuart(t, 50, 310, d);
45
46
}else{
47
context.fillRect(myRectX, 50, 50, 50);
48
myEasingStatus = false;
49
}
50
t++;
51
52
}else{
53
context.fillRect(myRectX, 50, 50, 50);
54
myEasingStatus = false;
55
}
56
i++;
57
58
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Easing</title>
<script src="modernizr.custom.65354.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded () {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp () {
if (!canvasSupport()) {
return;
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
function drawScreen() {
context.clearRect(0,0,640,480);
if(i == 10){
myEasingStatus = true;
}
if(myEasingStatus){
if (t<=d) {
context.fillStyle = "#000000";
context.fillRect(easeInOutQuart(t, 50, 310, d), 50, 50, 50);
myRectX = easeInOutQuart(t, 50, 310, d);
}else{
context.fillRect(myRectX, 50, 50, 50);
myEasingStatus = false;
}
t++;
}else{
context.fillRect(myRectX, 50, 50, 50);
myEasingStatus = false;
}
i++;
}
var w=theCanvas.width;
var h=theCanvas.height;
var i = 0;
var d = 50;
var t = 0;
var myEasingStatus = false;
var myRectX = 50;
function gameLoop() {
window.setTimeout(gameLoop, 20);
drawScreen()
}
easeInOutQuart = function (t, b, c, d) {
t /= d/2;
if (t < 1) return c/2*t*t*t*t + b;
t -= 2;
return -c/2 * (t*t*t*t - 2) + b;
}
gameLoop();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="640" height="480">
Your browser does not support HTML 5 Canvas.
</canvas>
</div>
</body>
</html>
|
т.е. если на увеличение то все ок, а вот если наоборот... наверно в ту же вцию можно забить другие значения, но из какого принципа?
|
Разобрался))
Если ввести значения вместо 50 и 310 — 310 и -260, все ок. А как выразить эту зависимость? x=50, y=310 x=310, y=-260 |
Блин, забавно, я сам с собой общаюсь)) пора кукушку проверить)) Суть всего этого замеса проста: брать изинги по одному или несколько, вместо аттача целой либы.
например нужен изАут. Берем из фреймворка:
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
где у нас х - вообще не участвует)) его можно убрать вообще. t - начальная итерация, ноль обычно b - начальный параметр, например альфа 0, х или у значение c - конечный параметр, к которму стремится b d - конечная итерация но вот беда... если у нас b > с, то кина не будет... тут у меня возникла идея, а что если просто написать из нескольких логических операторов проверку значений. написал. получилось
function easeOutQuad(t, b, c, d) {
var b2 = b;
var c2 = c;
if(b > c){
b = c2;
c = c2-b2;
}
return -c *(t/=d)*(t-2) + b;
}
но если мне нужно, например, переместить объект из точки х = 200 в точку х = -5, то возникают осложнения... Вообще складывается ощущение, что я изобретаю велосипед... Как вот это все работает в jqwery том же? допустим я делаю баннер на канвасе, и у меня каждый байт на счету, неужели без аттача фреймворка не обойтись? помогите плиз дописать, а то я тут кажется уже ку-ку))) |
|
cyber,
Спасибо за статью.. я 5 раз прочитал её, но пришел к выводу, что это выше моих способностей к осознанию)) Jquery функции понятны и просты... Вводишь 4 значения, получаешь на выходе эту дельту... Тут как все это работает я не могу понять совершенно. Если вас не затруднит, напишите пожалуйста несколько строк, как в моем примере реализуется этот подход. Заранее благодарен. Почему тут все работает, вне зависимости от того, какие вводишь значения... https://github.com/danro/jquery-easi...uery.easing.js |
| Часовой пояс GMT +3, время: 06:02. |