Desenvolvimento

Teste 4 - Animando um Objeto

Fazendo uma função ser executada repetidamente, é possível alterar repetidamente o posicionamento de um objeto, fazendo-o 'deslizar' de um ponto a outro.

Quando esta página é carregada o evento onLoad da tag <body> dispara uma função que executa o processo.

O Iluminado   Este é o Jack!









Eis as partes cruciais do código desta página:

<head>
   <style type="text/css">
      #jack {position: relative; top: 10px}
   </style>
   <script type='text/javascript' src="../js/findDOM.js"></script>
   <script type='text/javascript' >
      var animaeDelay = 5
      var domStyle = null
      var fx = null
      var fy = null

      function findLeft(objectID) {
         var domStyle = findDOM(objectID,1)
         var dom = findDOM(objectID,0)
         if (domStyle.left)
            return domStyle.left
         if (domStyle.pixelLeft)
            return domStyle.pixelLeft
         if (dom.offsetLeft)
            return dom.offsetLeft
         return (null)
      }

      function findTop(objectID) {
         var domStyle = findDOM(objectID,1)
         var dom = findDOM(objectID,0)
         if (domStyle.top)
            return domStyle.top
         if (domStyle.pixelTop)
            return domStyle.pixelTop
         if (dom.offsetTop)
            return dom.offsetTop
         return (null)
      }

      function startAnimate(objectID,x,y) {
         fx = x // coordenada x de destino
         fy = y // coordenada y de destino
         var cX = findLeft(objectID) // coordenada x de origem
         var cY = findTop(objectID) // coordenada y de origem
         domStyle = findDOM(objectID,1)
         animateObject(cX,cY)
      }

      function animateObject(cX,cY) {
         if (cX != fx) {
            if (cX > fx) { cX -=1 }
            else { cX +=1 }
         }
         if (cY != fy) {
            if (cY > fy) { cY -=1 }
            else { cY +=1 }
         }
         if ( (cX != fx) || (cY != fy) ) {
            if (domStyle.pixelLeft) {
               domStyle.pixelLeft = cX
               domStyle.pixelTop = cY
            }
            else {
               domStyle.left = cX+'px'
               domStyle.top = cY+'px'
            }
            setTimeout ('animateObject(' + cX + ',' + cY + ')',animaeDelay)
         }
      }
   </script>
</head>

<body onLoad="startAnimate('jack',300,50)">
   ...
   <div style='position: absolute'><div id="jack">
      <img src="../pics/theshining_1.jpg" alt="O Iluminado" />
      &nbsp;&nbsp;&nbsp; <strong>Este é o Jack!</strong>
   </div></div>
</body>

O evento onLoad da tag <body> aciona a função startAnimate(), que fornece como argumentos o id do objeto a ser movido e as coordenadas X e Y de sua nova posição.

A função startAnimate() busca a posição atual do objeto, através das funções auxiliares findLeft() e findTop(). As coordenadas de origem cX e cY são então repassadas à função animateObject(), que faz o processamento necessário à movimentação do objeto selecionado.

animateObject() verifica se as coordenadas de origem cX e cY são iguais às coordenadas de destino fx e fy. Se não forem, elas são incrementadas em uma unidade. Sendo tanto as coordenadas cX ou cY ainda diferentes, as novas posições são efetivadas e a função setTimeout() é utilizada para repetir a função animateObject(), desta vez com as novas coordenadas de origem cX e cY. O tempo de repetição é definido pela variável animaeDelay, aqui ajustada em 5 (ms). O processo se repete até que cX = fx e cY = fy, quando a declaração if de setTimeout() é desabilitada.