Электронный научный журнал 12+

Информационно-коммуникационные технологии
в педагогическом образовании

МЕТОДИКА ИЗУЧЕНИЯ ТЕМЫ «АНИМАЦИЯ» В КУРСЕ ДИСЦИПЛИНЫ «ПРОГРАММИРОВАНИЕ НА JAVASCRIPT»

Раздел: Современные педагогические и информационные технологии в образовательном процессе

Журнал: Материалы XX Международной научно-практической конференции «Технологическое обучение школьников и профессиональное образование в России и за рубежом»

12 января 2026 г.

Авторы: Журавлев Сергей Владимирович

Информационно-коммуникационные технологии в педагогическом образовании, 2026. № 1 (100). infed.ru

_______________________________________________________________________

 

УДК 378.016:004.42

С. В. Журавлев

S. V. Zhuravlev

Журавлев Сергей Владимирович, преподаватель, КГПИ КемГУ, г. Новокузнецк, Россия.

Zhuravlev Sergei Vladimirovich, lecturer, Kuzbass Humanitarian Pedagogical Institute of Kemerovo State University, Novokuznetsk, Russia.

 

МЕТОДИКА ИЗУЧЕНИЯ ТЕМЫ «АНИМАЦИЯ» В КУРСЕ ДИСЦИПЛИНЫ «ПРОГРАММИРОВАНИЕ НА JAVASCRIPT»

METHODOLOGY FOR STUDYING THE TOPIC «ANIMATION» IN THE COURSE OF THE DISCIPLINE «JAVASCRIPT PROGRAMMING»

 

Аннотация. В статье представлена авторская методика обучения студентов направленности «Компьютерный дизайн» дисциплине «Программирование на JavaScript», которая подразумевает подробное объяснение теоретического материала с разбором решения некоторых задач. Приводится пример изучения темы «Анимация».

Annotation. The article presents the author’s methodology for teaching students of the “Computer Design” focus the discipline «JavaScript programming», which involves a detailed explanation of the theoretical material with an analysis of some problem solving. An example of studying the topic «Animation» is given.

Ключевые слова: обучение скриптовому программированию, язык программирования JavaScript, методы решения задач, программирование анимации.

Keywords: script programming training, JavaScript programming language, methods of solving problems, animation programming.

 

В профессиональную подготовку бакалавров по направлению 44.03.04 «Профессиональное обучение (по отраслям)», направленности «Компьютерный дизайн», входит ряд дисциплин, способствующих формированию профессиональной компетенции ПК-1 «Способен осваивать и использовать теоретические знания и практические умения и навыки в предметной области по профилю «Компьютерный дизайн» при решении профессиональных задач», в том числе дисциплина вариативной части блока Б1 К.М.07.01.10 «Программирование на JavaScript».

Целью данной дисциплины является формирование индикатора достижения компетенции ПК-1.3 «Демонстрирует методы использования программных и аппаратных средств для создания объектов компьютерного дизайна» [5]. Для успешного формирования этого индикатора преподавателю необходимо качественно выстраивать учебный процесс, излагать материал достаточно подробно и в доступной форме.

В предыдущей статье была рассмотрена методика изучения темы «Графика и подпрограммы» [2]. В данной статье речь пойдёт о методике изучения темы «Анимация» в курсе дисциплины «Программирование на JavaScript». Изучение данной темы также важно, т. к. студенты овладевают новыми способами графического оформления веб-страниц, позволяющими добавлять на них не только статические, но и динамические изображения.

Изучение темы начинается с объяснения преподавателем теоретического материала, необходимого для работы с анимацией.

Анимация создаётся путём последовательной смены кадров с меняющимися каждый раз координатами движущегося объекта. Таким образом, при каждой отрисовке объект отображается на новой позиции, за счет чего возникает иллюзия его движения.

В общем случае для того, чтобы создать анимацию, следует выполнить следующие шаги:

1) очистка области рисования;

2) опциональное сохранение состояния;

3) рисование отдельного кадра;

4) опциональная загрузка состояния [1].

Существует два способа создания анимации на JavaScript через:

1) методы setTimeout, setInterval;

2) функцию requestAnimationFrame.

При использовании первого способа при написании кода вручную устанавливается, как именно будет происходить анимация покадрово, что  имеет определённые недостатки. Дело в том, что частота кадров на мониторе и частота перерисовки браузером контента может быть не постоянной, это зависит от нагрузки, количества одновременно запущенных программ на компьютере. В таких случаях можно наблюдать, как какие-то кадры замирают. Кроме того,  частота кадров стремится к какому-то значению, что приводит к рассинхронизации: setTimeout принуждает перерисовывать кадры не одновременно со сменой кадров у компьютера. Ещё одна проблема состоит в том, что если открыто несколько вкладок браузера, и на одной из них есть анимация, то она работает независимо от того, активна эта вкладка или нет, что приводит к избыточной нагрузке на компьютер.

Использование функции requestAnimationFrame позволяет решить все вышеперечисленные проблемы. У неё достаточно высокая поддержка среди браузеров. Данная функция позволяет запускать другие функции в качестве анимации. Она берёт анимацию и подстраивает её под частоту обновления браузера, делая так, что анимация будет происходить в тот момент, когда обновляется страница. Это позволяет добиться плавности анимации и избежать избыточной нагрузки на компьютер. А если на странице прописано несколько анимаций, то запускаться они будут одновременно [6].

Синтаксис функции requestAnimationFrame выглядит следующим образом:

requestAnimationFrame(callback[, element]), где: callback – функция, которая будет вызвана при обновлении анимации на следующей перерисовке; необязательный параметр element – определяющий элемент, который визуально содержит всю анимацию, примером такого элемента может служить canvas [7].

Функция requestAnimationFrame вызывается внутри функции callback.

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

1. Изобразить точку и обеспечить её перемещение по экрану по диагонали от левого верхнего угла к правому нижнему.

Создадим функцию animate, которая осуществляет перемещение точки по диагонали.

function animate() {

//сначала прописываем стандартные операторы для рисования точки (в качестве точки будем использовать круг малого радиуса с координатами центра x, y)

im_1.clearRect(0,0,canvas.width,canvas.height);

im_1.beginPath();

im_1.arc(x, y, 2, 0, 2*Math.PI);
im_1.fill();
//теперь изменяем значения координат, чтобы при следующей отрисовке точка отобразилась на новой позиции

x=x+dx;

y=y+dy;

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

if (x1<=canvas.width && y<=canvas.height)

requestAnimationFrame(animate);

}

И в основной программе мы должны вызвать функцию animate.

animate();

2. Изобразить точку и обеспечить её движение по окружности.

function animate() {

//в этой задаче координаты точки должны изменяться в соответствии с параметрическим уравнением окружности, x, y в данном случае – координаты центра окружности, по которой движется точка, r – её радиус

im_1.clearRect(0,0,canvas.width,canvas.height);

im_1.beginPath();

im_1.arc(x+r*Math.sin(t), y0-r*Math.cos(t) ,2, 0, 2*Math.PI);
im_1.fill();

//в этой задаче координаты x, y остаются неизменными, меняется значение угла поворота t

t=t+0.1;

//поскольку в условии не сказано, когда должно закончиться движение, будем считать, что оно должно выполняться до тех пор, пока не будет закрыта страница браузера

requestAnimationFrame(animate);

}

animate();

Затем подробно разбираются более сложные задачи.

1. Изобразить на экране отрезок, вращающийся в плоскости экрана вокруг своей середины. При этом центр вращения должен с постоянной скоростью перемещаться вдоль диагонали экрана, идущей от левого верхнего угла к правому нижнему.

Решение

function animate() {

im_1.clearRect(0,0,canvas.width,canvas.height);

im_1.beginPath();

im_1.moveTo(x+l/2*Math.sin(t), y-l/2*Math.cos(t));

im_1.lineTo(x-l/2*Math.sin(t), y+l/2*Math.cos(t));

im_1.stroke();

//в этой задаче нужно реализовать сразу 2 вида движения – вращение отрезка вокруг своего центра и перемещение его по диагонали, поэтому изменять надо будет и координаты центра отрезка, и угол поворота

t=t+Math.PI/180;

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

if (x+dx>canvas.width || x+dx<0 || y+dy>canvas.height || y+dy<0) {

dx=-dx;

dy=-dy;

}

x=x+dx;

y=y+dy;

requestAnimationFrame(animate);

}

let canvas, im_1, l, x, y, dx,dy,t;

canvas=document.getElementById("canvas");

im_1=canvas.getContext("2d");

//задаём длину отрезка и начальные значения координат центра отрезка, шага изменения координат центра и угла поворота

l=parseFloat(prompt("Введите a "));

x=0;

y=0;

dx=2.5;

dy=1;

t=0;

animate();

2. Получить на экране слово ТЕСТ, составленное из крупных букв, и обеспечить его перемещение по экрану по диагонали от левого верхнего угла к правому нижнему. При этом буквы слова должны быть построены из отдельных отрезков, размещенных в соответствии с конфигурацией буквы в прямоугольнике определенного размера, подобно тому, как это делается при написании цифр на электронных часах или индекса на почтовом конверте.

Решение

//алгоритм начертания букв довольно объёмный, поэтому будет удобнее использовать для этого вспомогательную функцию.

function ris(x,y) {

x1=x;

im_1.beginPath();

im_1.moveTo(x1+w/2,y);

im_1.lineTo(x1+w/2,y-h);

im_1.stroke();

im_1.beginPath();

im_1.moveTo(x1,y-h);

im_1.lineTo(x1+w,y-h);

im_1.stroke();

x1=x1+w+s;

im_1.beginPath();

im_1.moveTo(x1+w,y-h);

im_1.lineTo(x1,y-h);

im_1.lineTo(x1,y);

im_1.lineTo(x1+w,y);

im_1.stroke();

im_1.beginPath();

im_1.moveTo(x1,y-h/2);

im_1.lineTo(x1+w,y-h/2);

im_1.stroke();

x1=x1+w+s;

im_1.beginPath();

im_1.moveTo(x1+w,y-h);

im_1.lineTo(x1,y-h);

im_1.lineTo(x1,y);

im_1.lineTo(x1+w,y);

im_1.stroke();

x1=x1+w+s;

im_1.beginPath();

im_1.moveTo(x1+w/2,y);

im_1.lineTo(x1+w/2,y-h);

im_1.stroke();

im_1.beginPath();

im_1.moveTo(x1,y-h);

im_1.lineTo(x1+w,y-h);

im_1.stroke();

}

function animate() {

im_1.clearRect(0,0,canvas.width,canvas.height);

//теперь просто вызываем функцию написания текста

ris(x,y);

x=x+dx;

y=y+dy;

if (x1+w<=canvas.width && y<=canvas.height)

requestAnimationFrame(animate);

}

let canvas, im_1, l, x, y, dx,dy,x1;

canvas=document.getElementById("canvas");

im_1=canvas.getContext("2d");

//задаём ширину и высоту букв, расстояние между ними, начальные значения координат точки, с которой начинается рисование и шаг изменения координат этой точки

w=parseFloat(prompt("Введите w "));

h=parseFloat(prompt("Введите h "));

s=parseFloat(prompt("Введите s "));

x=0;

y=h;

dx=2.5;

dy=1;

animate();

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

Решение

//опишем вспомогательную функцию для рисования человечка

function ris(x,y) {

im_1.beginPath();

im_1.moveTo(x,y);

im_1.lineTo(x+a/2,y-b);

im_1.lineTo(x+a,y);

im_1.stroke();

im_1.beginPath();

im_1.moveTo(x+a/2,y-b);

im_1.lineTo(x+a/2,y-b-c);

im_1.stroke();

im_1.beginPath();

im_1.moveTo(x,y-b-d+b);

im_1.lineTo(x+a/2,y-b-d);

im_1.lineTo(x+a,y-b-d+b);

im_1.stroke();

im_1.beginPath();

im_1.arc(x+a/2,y-b-c-r,r,0,2*Math.PI);

im_1.stroke();

}

function animate() {

im_1.clearRect(0,0,canvas.width,canvas.height);

ris(x,y);

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

i=i+1;

if (i>0 && i<3) {

x=x+dx;

a=a-a1/2;

b=b+e;

}

if (i>2 && i<5) {

x=x+dx;

a=a-a1/2;

b=b-e;

}

if (i>4 && i<7) {

x=x+dx;

a=a+a1/2;

b=b+e;

}

if (i>6 && i<9) {

x=x+dx;

a=a+a1/2;

b=b-e;

}

//если теперь оценить все последующие действия, можно заменить, что они будут совпадать с действиями, прописанными в предыдущих четырёх участках, соответственно, достаточно просто обнулить номер шага анимации, и весь цикл движений начнётся заново

if (i==8)

i=0;

requestAnimationFrame(animate);

}

let canvas, im_1, l, x, y, dx,dy,x1,i;

canvas=document.getElementById("canvas");

im_1=canvas.getContext("2d");

//задаём наибольшее расстояние между ногами и наибольшее расстояние между полом и окончанием туловища

a=parseFloat(prompt("Введите a "));

b=parseFloat(prompt("Введите b "));

//задаём размеры частей тела

c=parseFloat(prompt("Введите c "));

d=parseFloat(prompt("Введите d "));

e=parseFloat(prompt("Введите d "));

r=parseFloat(prompt("Введите r "));

a1=a;

//задаём начальное значение абсциссы и значение ординаты (в данном случае оно изменяться не будет) точки, с которой начинается рисование, шаг изменения абсциссы этой точки и начальное значение номера шага анимации

x=0;

y=canvas.height/2;

dx=a/4;

i=0;

animate();

Далее студентам предлагается решить задачи самостоятельно. Приведём некоторые из них.

1. Изобразить на экране отрезок, вращающийся в плоскости экрана вокруг точки, делящей отрезок в отношении m:n. При этом центр вращения отрезка должен с постоянной скоростью перемещаться от одного края экрана до другого параллельно вертикальной оси экрана.

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

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

4.* Написать программу, изображающую на экране разносторонний треугольник, вращающийся в плоскости экрана вокруг точки пересечения его медиан. При этом центр вращения должен с постоянной скоростью перемещаться вдоль одной из диагоналей экрана [4].

Предложенная методика изучения темы «Анимация» наряду с методикой изучения темы «Графика и подпрограммы» является базой для дальнейшего изучения скриптового программирования, от полученных студентами компетенций зависит не только возможность дальнейшего изучения программирования, требующего освоить работу по созданию веб-страниц с динамическими изображениями средствами JavaScript, но и овладение ими методикой обучения студентов СПО созданию объектов компьютерного дизайна при помощи JavaScript.

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

Список литературы

  1. Анимация на canvas. / METANIT.COM : [сайт]. – URL : https://metanit.com/web/javascript/21.13.php (дата обращения : 30.11.2025). – Текст : электронный.
  2. Журавлёв, С. В. Методика изучения темы «Графика и подпрограммы» в курсе дисциплины «Программирование на JavaScript» / С. В. Журавлёв. – Текст : электронный // Информационно-коммуникационные технологии в педагогическом образовании : электронный научный журнал. – 2025. – №01(94) январь. – URL : https://infed.ru/articles/10391/ (дата обращения : 30.11.2025).
  3. Кингсли, Х. Э. JavaScript в примерах: учебное пособие / Х. Э. Кингсли, Х. К. Кингсли. – М.: ДМК Пресс, 2009. – 272 с. – ISBN 978-5-94074-668-3. – Текст : электронный // Лань: электронно-библиотечная система. – URL : https://e.lanbook.com/book/1271 (дата обращения : 30.11.2025). – Режим доступа : для авториз. пользователей.
  4. Можаров, М. С. Введение в структурное программирование: Учебное пособие / М. С. Можаров, Г. Н. Бойченко. – 2-е изд., стереот. – Новокузнецк: Изд-во КузГПА, 2014. – 203 с. – Текст : непосредственный.
  5. Основная профессиональная образовательная программа высшего образования: направление подготовки 44.03.04 «Профессиональное обучение (по отраслям)», направленность (профиль) «Компьютерный дизайн», уровень бакалавриата (утверждена 12 апреля 2023 г.). – Текст : электронный. – URL : https://skado.dissw.ru/edprogramdescriptionfile/2786/ (дата обращения : 30.11.2025).
  6. Русаков, М. Ю. Функция requestAnimationFrame / М. Ю. Русаков. – Текст : электронный. – URL : https://myrusakov.ru/js-requestAnimationFrame.html (дата обращения : 30.11.2025).
  7. Window.requestAnimationFrame() / MDN : [сайт]. – URL : https://developer.mozilla.org/ru/docs/Web/API/Window/requestAnimationFrame (дата обращения : 30.11.2025). – Текст: электронный.

                                                

© Журавлев С. В., 2026

PDF