Всем привет. Столкнулся с проблемой... Решил добавить в свое приложение изинг, один-два вида, чтобы не подгружать большие библиотеки, плагины и прочее. Выдернул ф-цию, использую все ок. Если двигаю квадратик от 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>