Как заставить анимацию холста двигаться с телефонами, используя движение устройства - PullRequest
Новая
       38

Как заставить анимацию холста двигаться с телефонами, используя движение устройства

0 голосов
/ 16 октября 2019

Мне удалось создать анимацию вращения для моего холста, но теперь я хочу добавить обработчик событий движения устройства, чтобы мой холст двигался при перемещении телефона. Например: теперь я перевел свой холст в среднюю точку экрана и начал вращение. Когда я перемещаю свой телефон влево, я хочу, чтобы моя средняя точка двигалась влево и наоборот, когда я перемещаю свой телефон вправо.

Я пытался добавить обработчик событий в свою функцию перемещения и использовать event.accelerationInclusionGravity. х, чтобы установить мою отправную точку для перевода холста, но это не сработало. Я думаю, что проблемная часть cxt.translate(c.width / 2 - x, c.height / 2 - y); Может кто-нибудь показать мне, как это сделать? Вот мои коды: 

const c = document.getElementById("canvas");
c.width = window.innerWidth;
c.height = window.innerHeight;
const cxt = c.getContext('2d');

function draw() {
    var x1 = 0;
    var y1 = 80;
    var x2 = 80;
    var y2 = 0;
    var w = 240;
    var h = 80;

for (var i = 0; i < 4; i++) {
    cxt.fillStyle = "orange";
    cxt.fillRect(x1, y1, w, h);
    cxt.fillRect(x2, y2, h, w); 

    x1 -= 80;
    y1 += 160;
    x2 -= 80;
    y2 += 160;

    cxt.fillStyle = "darkred";
    cxt.fillRect(x1, y1, w, h);
    cxt.fillRect(x2, y2, h, w); 

    x1 += 240;
    y1 -= 80;
    x2 += 240;
    y2 -= 80;

    cxt.fillStyle = "black";
    cxt.fillRect(x1, y1, w, h);
    cxt.fillRect(x2, y2, h, w); 

    x1 -= 80;
    y1 += 160;
    x2 -= 80;
    y2 += 160;

    cxt.fillStyle = "blue";
    cxt.fillRect(x1, y1, w, h);
    cxt.fillRect(x2, y2, h, w); 

    x1 += 240;
    y1 -= 80;
    x2 += 240;
    y2 -= 80;

    cxt.fillStyle = "green";
    cxt.fillRect(x1, y1, w, h);
    cxt.fillRect(x2, y2, h, w); 

    x1 -= 80;
    y1 += 160;
    x2 -= 80;
    y2 += 160;

    cxt.fillStyle = "yellow";
    cxt.fillRect(x1, y1, w, h);
    cxt.fillRect(x2, y2, h, w); 

    x1 += 240;
    y1 -= 80;
    x2 += 240;
    y2 -= 80;
}


}

function fill() {
draw();
cxt.save();

cxt.translate(0, 400);
draw();
cxt.restore();
cxt.save();

cxt.translate(160, -320);
draw();
cxt.restore();
cxt.save();

cxt.translate(960, -320);
draw();
cxt.restore();
cxt.save();

cxt.translate(-1920, -960);
draw();
cxt.restore();
cxt.save();

cxt.translate(-480, 160);
draw();
cxt.save();

cxt.translate(-480, -1440);
draw();
cxt.save();

cxt.translate(-640, 80);
draw();
cxt.save();

cxt.translate(-640, 480);
draw();
cxt.save();
}

var degree = 0;
var requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
                        window.msRequestAnimationFrame;

function move(event) {
var x = event.accelerationIncludingGravity.x;
var y = event.accelerationIncludingGravity.y;

cxt.setTransform(1, 0, 0, 1, 0, 0);
cxt.clearRect(0, 0, c.width, c.height);

cxt.translate(c.width / 2 - x, c.height / 2 - y);
cxt.rotate(degree);
fill();

degree += 0.01;

requestAnimationFrame(move);
}

move(event);

window.addEventListener("devicemotion", move, true);

1 Ответ

0 голосов
/ 16 октября 2019

Используйте deviceMotionEvent.rotationRate вместо ускорения.

https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent/rotationRate

window.addEventListener("devicemotion", updateCanvas, true);


   function updateCanvas(event) {
         var rotation = event.rotationRate.gamma;
         requestAnimationFrame(rotateAndTranslate);


   }


   function rotateAndTranslate(rotation) {



          cxt.rotate(rotation);

         cxt.setTransform(1, 0, 0, 1, 0, 0);
         cxt.clearRect(0, 0, c.width, c.height);

         cxt.translate(c.width / 2 - x, c.height / 2 - y);
         fill();






        }
...