simple requestAnimationFrame не работает JavaScript

Question

В настоящее время я пытаюсь понять анимацию с использованием JavaScript и HTML5. Из того, что я собрал после исследования в Интернете, requestAnimationFrame неоднократно вызывает метод.

Я создал плоскость и создал метод, который будет перемещать плоскость по диагональной линии. Однако, кажется, нет анимации.

Я довольно новичок в этом, так что это может быть просто не совсем понятное понятие. Я не думаю, что это связано с моим браузером, поскольку я пробовал его как в Chrome, так и в Internet Explorer, и они должны быть в курсе, поскольку я только установил их несколько месяцев назад, так как это новый ноутбук.

Вот мой основной класс, он должен включать в себя все Релевент код:

/*global window, document, alert, Vector, Moth, Matrix, Plane, SceneGraphNode*/ 
function onLoad() { 
var mainCanvas, mainContext, planePosition, plane; 
// this function will initialise our variables 


function initialiseCanvasContext() { 
    // Find the canvas element using its id attribute. 
    mainCanvas = document.getElementById('mainCanvas'); 
    // if it couldn't be found 
    if (!mainCanvas) { 
     // make a message box pop up with the error. 
     alert('Error: I cannot find the canvas element!'); 
     return; 
    } 
    // Get the 2D canvas context. 
    mainContext = mainCanvas.getContext('2d'); 
    if (!mainContext) { 
     alert('Error: failed to get context!'); 
     return; 
    } 
    planePosition = new Vector(0, 0, 0); 
    plane = new Plane(planePosition); 
} 


function translate(pPosition) { 
    var matrix = Matrix.createTranslation(pPosition); 
    matrix.transform(mainContext); 
} 

function scale(pPosition) { 
    var matrix = Matrix.createScale(pPosition); 
    matrix.transform(mainContext); 
} 

function rotate(pPosition) { 
    var matrix = Matrix.createRotation(pPosition); 
    matrix.transform(mainContext); 
} 

function drawPlane() { 
    scaleVector = new Vector(0.25, 0.25, 0); 
    scale(scaleVector); 
    translate(new Vector(0, 0)); 
    rotate(0); 
    plane.draw(mainContext); 
} 

function drawMoth() { 
    var moth, mothPosition; 
    mothPosition = new Vector(mainCanvas.width/2, mainCanvas.height/2, 0); 
    moth = new Moth(mothPosition); 
    moth.draw(mainContext); 
} 

function drawPlane() { 
    plane = new Plane(planePosition); 
    scale(new Vector(0.25, 0.25, 0)); 
    plane.draw(mainContext); 
} 

function animatePlane() { 
    translate(planePosition.add(new Vector(100, 100, 0))); 
    drawPlane(); 
    window.requestAnimationFrame(animatePlane); 
} 

initialiseCanvasContext(); 
drawMoth(); 
animatePlane(); 
} 
window.addEventListener('load', onLoad, false); 

Пожалуйста, дайте мне знать, если вы думаете, что это поможет увидеть любые связанные с ними методы. Я также приложил результат.

Answer 1

Много вещей не определен здесь (матрица и векторные объекты и их методы). Пожалуйста, включите код, если он у вас есть, в противном случае продолжайте читать.

Кажется, у вас есть немного пробела в объектно-ориентированном знании JS. Я предполагаю, что вы знаете хороший кусок, но это будет стоить ваше время, чтобы укрепить свои знания из следующих действий:

• знать, как сделать новый объект. Поймите, что такое объект.
• Поймите, как создать функцию-конструктор.
• Понять, что ключевое слово просто вызывает функцию-конструктор объекта.
• Поймите наследование. это ключевое слово против прототипического наследования.
• Понять инкапсуляцию.
• Понять API холста
• Добавить комментарий к вашему коду. Если другие люди будут читать ваш код, добавьте комментарии. Помогает. Все, что вам действительно нужно, - это один комментарий для каждой функции, объясняющий, что он делает. Объяснить, какие входные параметры полезны.

Вот некоторые ресурсы, чтобы вы начали (и, возможно, законченный):

• Прочитайте это (и это две предпосылки): http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/
• ЗАКАНЧИВАТЬ встроенные методы Canvas: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

Вот код структуры, которые отсутствуют

function Vector(x, y, z) { 
 
    this.x = x; 
 
    this.y = y; 
 
    this.z = z; 
 
} 
 

 
var Matrix = { 
 
    createTranslation: function() { 
 
    
 
    }, 
 
    createRotation: function() { 
 
    
 
    }, 
 
    createScale: function() { 
 
    
 
    }, 
 
    transform: function() { 
 
    
 
    } 
 
}; 
 

 
function Plane(position) { 
 
    this.add = function() { 
 
    this.draw = function() { 
 
    
 
    }; 
 
    }; 
 
} 
 

 
function Moth(position) { 
 
    this.draw = function() { 
 
    
 
    }; 
 
}

Я знаю, что это не отвечает на вопрос, и я, вероятно, о том, чтобы быть downvoted в ад, но я не могу помочь вам, пока вы не понимаете, что вы делаете Немного лучше. Удачи!