Анимация с параметрами в Javascript с использованием таймера - PullRequest
Новая
       22

Анимация с параметрами в Javascript с использованием таймера

1 голос
/ 05 марта 2010

Я пытаюсь анимировать точку из одной точки в другую на карте. Прямо сейчас у меня есть следующий код: 

function animate(){

            //animation
            var pt = oldLoc;
            for(i = 0; i < 1000; i++){
                pt.y += 5
                pt.x += 5
                graphic.setGeometry(pt); //sets the new point coordinates
                graphic.show(); //redraws the display
                dojo.byId("info").innerHTML += "testingcheck"; //print check
            }
        }

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

Я знаю, что мне нужно что-то похожее на setTimeOut (animate (), 20), но я не знаю, как включить это в мой код (я делаю новую функцию?) И как указать, когда нужно остановить анимация. Любое понимание будет высоко ценится. Заранее спасибо!

Ответы [ 5 ]

3 голосов
/ 05 марта 2010

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

Предположим, что ваша точка - это плавающий элемент с абсолютным позиционированием, идентификатор которого "точка", вы можете сделать: 

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dojo/dojo.xd.js" djConfig="parseOnLoad: true, isDebug: true"></script> 
    <script type="text/javascript">
        function moveNodeByXY(movingNode, shiftX, shiftY) {
            var startPos = dojo.position(movingNode);
            var endX = startPos.x + shiftX;
            var endY = startPos.y + shiftY;
            console.debug("Point moving from (" + startPos.x + ", " + startPos.y + ") to (" + endX + ", " + endY + ")");
            dojo.fx.slideTo({ node: movingNode, left:endX, top:endY, units:"px" }).play()
        }

        dojo.addOnLoad(function() {
            dojo.require("dojo.fx");
        });
    </script>
    <style type="text/css">
        #point {
            position : absolute;
            z-index : 1000;
            height : 10px;
            width : 10px;
            left : 50px;
            top : 50px;
            background-color : #3C3C3C;
        }
    </style>
</head>
<body>
    <div id="point" onClick="moveNodeByXY(this, 5, 5);"></div>
</body>
</html>
3 голосов
/ 05 марта 2010

Вы также можете легко заменить цикл for для вызова setInterval, например ::

function animate(){
  var pt = oldLoc, i = 0, timer; // no global variables declared...

  timer = setInterval(function () {
    pt.y += 5;
    pt.x += 5;
    graphic.setGeometry(pt);
    graphic.show();
    dojo.byId("info").innerHTML += "testingcheck";

    if (i >= 1000) { // stop condition
      clearInterval(timer);
    }

    i++;
  }, 100);
}
2 голосов
/ 16 марта 2010 

  dojo.require("dojox.fx._Line"); // multidimensional curve support
  dojo.ready(function(){
    new dojo.Animation({
        curve: new dojox.fx._Line([ [startx, endx], [starty, endy] ]),
        onAnimate:function(currentx, currenty){
            graphic.setGeometry({ x: currentx, y: currenty });
            graphic.show();
        },
        duration:1000,
        rate:10 // framerate, aka: setInterval(..., rate)
    }).play();
  });
1 голос
/ 05 марта 2010

Что-то вроде: 

function animate(){
   ....;
}
var timer = setInterval(animate, 50);

//To stop
clearInterval(timer);

В идеале вы хотите измерить реальное время, прошедшее между одушевленными вызовами, и переместить объект с учетом этого времени. Но это должно быть началом. Таймеры JavaScript немного хитры, интервалы не так точны в JavaScript.

Две хорошие ссылки для начала: Один Два

А вот хороший начальный учебник по теме.

0 голосов
/ 05 марта 2010

Что-то вроде 

var currentPoint = oldLoc;
var i = 0;

function animate()
{
    i++;
    if ( i >= 1000 )
    {
        i = 0;
        clearInterval ( timeOutId );
    }
    else
    {
       currentPoint.y += 5;
       currentPoint.x += 5
       graphic.setGeometry(currentPoint); //sets the new point coordinates
       graphic.show(); //redraws the display
       dojo.byId("info").innerHTML += "testingcheck"; //print check          
    }  
}

var timeOutId = setInterval(animate, 20);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...