Вращение спрайтов
Можно ли как-то задавать наклон спрайта влево или вправо, типа rotate?
И можно ли делать flip т.е. по зеркально флипать по горизонтали или вертикали?
Наклон спрайта:
var x = 45; // угол наклона, может быть отрицательным
спрайт.style.transform = "rotate("+x+"deg)";
Флип по горизонтали:
спрайт.style.transform = "scaleX(-1)";
Флип по вертикали:
спрайт.style.transform = "scaleY(-1)";
Как сделать, чтобы спрайт вращался постоянно?
Пытаюсь сделать через цикл повторяющийся параграф с циклом for, но не понимаю, как правильно сделать обнуление i, чтобы вращение продолжалось.
for(var i=0; i<360; i++) {
circ.style.transform = "rotate("+i+"deg)";
//break;
//continue;
}
Надо проверять достижение значения 360 и сбрасывать i заново в ноль.
А зачем тут нужен цикл? И есть ли какое-то ограничение на то, чему равны градусы для rotate? (Скорее всего, это просто какое-то очень большое число, на котором все сломается)
Если использовать встроенную функцию repeat, то код может выглядеть так:
:: TestPar[::]
mySprite1 = sprite("15460795687160");
mySprite1RotateDeg = 0;
mySprite1.show(0);
repeat("rotate_mySprite1", 0.1);
:: rotate_mySprite1[::]
mySprite1.style.transform = "rotate(" + mySprite1RotateDeg + "deg)";
mySprite1RotateDeg++;
if (mySprite1RotateDeg >= 360) {
mySprite1RotateDeg = mySprite1RotateDeg % 360; // берем остаток от деления на 360 и гарантированно получаем число от 0 до 359
}
Но я заметил, что примерно 0.1 секунды это минимальное значение, которое воспринимает repeat, и быстрее выполняться параграф не будет, если мы уменьшим этот аргумент. И нужно либо увеличивать mySprite1RotateDeg более чем на 1 (а тогда плавность пострадает), либо закостылить это с помощью setInterval (об этой функции ТС может почитать, например, тут: https://learn.javascript.ru/settimeout-setinterval )
Тогда код будет выглядеть так и располагаться в одном параграфе:
:: TestPar[::]
mySprite1 = sprite("15460795687160");
mySprite1RotateDeg = 0;
mySprite1.show(0);
mySprite1RotateTimerId = setInterval(function() {
mySprite1.style.transform = "rotate(" + mySprite1RotateDeg + "deg)";
mySprite1RotateDeg++;
if (mySprite1RotateDeg >= 360) {
mySprite1RotateDeg = mySprite1RotateDeg % 360;
}
}, 5); // тут 5 это милисекунды, то есть 0.005 секунды
А если нужно будет остановить вращение, то это можно сделать с помощью clearInterval, описанной также по ссылке выше:
clearInterval(mySprite1RotateTimerId);