Форум

scorpion95 · #1 (**permalink**) 27.12.2015, 23:17

Собственно, если прописываю так

jc.start("canvas", true);
	
setInterval(function(){
     jc.circle(300, 300, 25, "#11111", true).animate({x: 900}, 1500, function(){this.del();});
}, 1000);

То код работает, каждую секунду появляется круг, идет в нужную точно и исчезает.

А если так:

jc.start("canvas", true);
	
jc.circle(300, 300, 25, "#11111", true).animate({x: 900}, 1500, function(){this.del();});

То не работает нифига. Загружаю страницу, круг мелькнёт на четверть секунды и исчезнет. Если прописываю animate для онклика по какому-то элементу, то тоже работает, а вот так вот нет ...

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

рони · #2 (**permalink**) 28.12.2015, 00:13

scorpion95,
а чем таймер то не устраивает, как раз же будет один раз?

Deff · #3 (**permalink**) 28.12.2015, 00:23

scorpion95,
Всякие анимации плохо ведут себя при загрузки страницы..(Ибо браузер рендит страницу и практически игнорит до конца рендинга подвижные элементы)
Желательно анимацию делать их уже после загрузки страницы
Мон делать css -анимацию, задавая смену положения тож после загрузки страницы

Типично, на этапе загрузки страницы нормально работает ток gif-анимация в картинках и флеш-анимация

рони · #4 (**permalink**) 28.12.2015, 00:53

scorpion95,

<!DOCTYPE HTML>

<html>
    <head>
    </head>
    <body>
<canvas height="600" width="1000" id="canvas"></canvas>
   <script type="text/javascript" src="http://www.jcscript.com/data/js/jCanvaScript.1.5.18.js"></script>
   <script>
   function startShow()
{
  jc.circle(300, 300, 25, "#11111", true).animate({x: 900}, 1500, function(){this.del();});
  jc.circle(300, 300, 25, "#FFFF00", true).animate({x: 0}, 1500, function(){this.del();});
  jc.circle(300, 300, 25, "#FF00FF", true).animate({y: 0}, 1500, function(){this.del();});
}
function simpleExample()
{
  jc.start('canvas', true);
  window.setTimeout(startShow,1000/55);

}
simpleExample()
</script>
    </body>
    </html>

Форум

Справочник

Discord чат

Курсы javascript