Подсказки на компьютерную тематику

Можно подсмотреть, если забыли…

Как сделать анимацию в JS

Функции для простейшей анимации javascript


Для создания анимации с помощью javascript необходимо использовать функции, выполняющие определенный код в определенное время.

    Функции времени для создания анимации на js:

  • setTimeout() запускает функцию ЧЕРЕЗ промежуток времени
    var timerId = setTimeout(function(),5000);//функция function() начнет работать через 5 секунд, 1000 = 1 секунда
  • clearTimeout(timerId);//отключить функцию и очистить
  • setInterval() запускает функцию ЧЕРЕЗ КАЖДЫЙ промежуток времени
    var timerId = setInterval(function(),5000);//функция function() будет срабатывать каждые 5 секунд, 1000 = 1 секунда
  • clearInterval(timerId);//отключить функцию и очистить
  • желательно во всех случаях присваивать ф-цию в переменную, чтобы можно было ее удалить!!!

Простые примеры анимации на js

    Примеры работающего кода для создания движения с использованием javascript:

  • /*функция сработает через 0.001 секунды*/
    var t=250;//значение с которого начинается движение
    setTimeout(function (){
    document.getElementById('block').style.left=t+'px';
    t=t+1;
    },1);
  • /*функция будет срабатывать через каждые 0.001 секунды*/
    var t=250;//значение с которого начинается движение
    setInterval(function (){
    document.getElementById('block').style.left=t+'px';
    t=t+1;
    },1);
  • /*Если вызвать функцию с setTimeout через саму себя, то функция будет работать как setInterval*/
    var t=250;//значение с которого начинается движение
    setTimeout(function tick() {
    document.getElementById('block').style.left=t+'px';
    t=t+2;
    setTimeout(tick, 1);
    }, 1);
  • /*Если вызвать функцию с setTimeout через саму себя, то функция будет работать как setInterval, но в код можно будет вставить дополнительное условие!!!*/
    /*движение блока от начала страницы до конца страницы, при этом координаты с правой стороны через js устанавливаются из вычета с координаты left и ширины элемента*/
    var t=250;//значение с которого начинается движение
    setTimeout(function tick() {
    if(document.getElementById('block').getBoundingClientRect().left<=(document.documentElement.clientWidth-200)){ document.getElementById('block').style.left=t+'px'; t=t+2; setTimeout(tick, 1); } else { document.getElementById('block').style.backgroundColor='green'; } }, 1);
  • //элемент движется по экрану по осям X и Y одновременно
    var l=250;//величина отступа слева
    var t=100;//величина отступа сверху
    setTimeout(function tick() {
    /*когда элемент упирается в правую границу браузера*/
    if(document.getElementById('block').getBoundingClientRect().right<=document.documentElement.clientWidth){ document.getElementById('block').style.left=l+'px'; l=l+2;//изменение координат слева document.getElementById('block').style.top=t+'px'; t=t*1.001;//изменение координат сверху setTimeout(tick, 1); } else { document.getElementById('block').style.backgroundColor='yellow'; } }, 1);

Что надо помнить при создании координат на javascript и CSS

    При создании координат для элемента надо помнить:

  • в CSS работает позиционирование от всех сторон браузера-
    left: 100px;
    right: 150px;
    bottom: 100px;
    top: 150px;

    Внимание, в коде на JS надо указывать единицы измерения, например:
    document.getElementById('block').style.top=10+'px';
    document.getElementById('block').style.top=10;- работать не будет!
  • в javascript отсчет координат идет сверху и слева.

Как сделать анимацию в JS

Функции для простейшей анимации javascript


Для создания анимации с помощью javascript необходимо использовать функции, выполняющие определенный код в определенное время.

    Функции времени для создания анимации на js:

  • setTimeout() запускает функцию ЧЕРЕЗ промежуток времени
    var timerId = setTimeout(function(),5000);//функция function() начнет работать через 5 секунд, 1000 = 1 секунда
  • clearTimeout(timerId);//отключить функцию и очистить
  • setInterval() запускает функцию ЧЕРЕЗ КАЖДЫЙ промежуток времени
    var timerId = setInterval(function(),5000);//функция function() будет срабатывать каждые 5 секунд, 1000 = 1 секунда
  • clearInterval(timerId);//отключить функцию и очистить
  • желательно во всех случаях присваивать ф-цию в переменную, чтобы можно было ее удалить!!!

Простые примеры анимации на js

    Примеры работающего кода для создания движения с использованием javascript:

  • /*функция сработает через 0.001 секунды*/
    var t=250;//значение с которого начинается движение
    setTimeout(function (){
    document.getElementById('block').style.left=t+'px';
    t=t+1;
    },1);
  • /*функция будет срабатывать через каждые 0.001 секунды*/
    var t=250;//значение с которого начинается движение
    setInterval(function (){
    document.getElementById('block').style.left=t+'px';
    t=t+1;
    },1);
  • /*Если вызвать функцию с setTimeout через саму себя, то функция будет работать как setInterval*/
    var t=250;//значение с которого начинается движение
    setTimeout(function tick() {
    document.getElementById('block').style.left=t+'px';
    t=t+2;
    setTimeout(tick, 1);
    }, 1);
  • /*Если вызвать функцию с setTimeout через саму себя, то функция будет работать как setInterval, но в код можно будет вставить дополнительное условие!!!*/
    /*движение блока от начала страницы до конца страницы, при этом координаты с правой стороны через js устанавливаются из вычета с координаты left и ширины элемента*/
    var t=250;//значение с которого начинается движение
    setTimeout(function tick() {
    if(document.getElementById('block').getBoundingClientRect().left<=(document.documentElement.clientWidth-200)){ document.getElementById('block').style.left=t+'px'; t=t+2; setTimeout(tick, 1); } else { document.getElementById('block').style.backgroundColor='green'; } }, 1);
  • //элемент движется по экрану по осям X и Y одновременно
    var l=250;//величина отступа слева
    var t=100;//величина отступа сверху
    setTimeout(function tick() {
    /*когда элемент упирается в правую границу браузера*/
    if(document.getElementById('block').getBoundingClientRect().right<=document.documentElement.clientWidth){ document.getElementById('block').style.left=l+'px'; l=l+2;//изменение координат слева document.getElementById('block').style.top=t+'px'; t=t*1.001;//изменение координат сверху setTimeout(tick, 1); } else { document.getElementById('block').style.backgroundColor='yellow'; } }, 1);

Что надо помнить при создании координат на javascript и CSS

    При создании координат для элемента надо помнить:

  • в CSS работает позиционирование от всех сторон браузера-
    left: 100px;
    right: 150px;
    bottom: 100px;
    top: 150px;

    Внимание, в коде на JS надо указывать единицы измерения, например:
    document.getElementById('block').style.top=10+'px';
    document.getElementById('block').style.top=10;- работать не будет!
  • в javascript отсчет координат идет сверху и слева.