Log in

View Full Version : Animation problem.


shachi
04-20-2007, 07:19 PM
Hello all,

I am trying to create a function that smoothly moves an element to the given x & y coordinates but unfortunately all my attempts have been in vain. I'd be very appreciated if anyone can point me in the right direction.

Thank you all.
techno_race
04-20-2007, 10:05 PM
I think you should see this (http://www.dynamicdrive.com/dynamicindex11/pathgenerate.htm).
shachi
04-21-2007, 06:51 AM
Only works in IE.
jscheuer1
04-21-2007, 07:10 AM
Only works in IE.

Not actually, the wizard only works in IE. The generated code is cross browser (in quirks-mode - no DOCTYPE). By adding the px designation here in the generated code:


function moveTo(x,y)
{
if(dom||ie)
{
this.x=x;
this.y=y;
this.css.left=x+'px';
this.css.top=y+'px';
}
else this.css.moveTo(x,y);
} . . .

It will also work cross browser with a DOCTYPE.
shachi
04-21-2007, 07:30 AM
jscheuer1: unfortunately, I don't have IE.
jscheuer1
04-21-2007, 08:34 AM
How about Opera 9.01? Some other recent Opera release? The wizard works in that browser too. Still needs the +'px' fixes to the output noted earlier for use with a DOCTYPE.
shachi
04-21-2007, 11:20 AM
jscheuer1: I am not allowed to install anything here. But anyways, here's what I came up with:



<html>
<head>
<script type="text/javascript">
window.onload = init;

var testEl;
var timeout;
var ntimeout;

function init(){
initEl();
initExtra();
}

function initEl(){
testEl = get("test");
textEl = get("text");
}

function initExtra(){

}

function move(t, l){
clearTimeout(timeout);
var defT = parseInt(testEl.offsetTop);
var defL = parseInt(testEl.offsetLeft);
if(defT < t){
testEl.style.top = defT + 3 + "px";
}
//var pointY = (defT < t) ? defT + 3 : defT - 3;
//testEl.style.top = pointY;
if(defL < l){
testEl.style.left = defL + 3 + "px";
}
timeout = setTimeout("move("+t+", "+l+")", 10);
}

function get(el){
return document.getElementById(el);
}

Object.prototype.move = function(t, l){
clearTimeout(timeout);
var defT = parseInt(this.offsetTop);
var defL = parseInt(this.offsetLeft);
if(defT < t){
this.style.top = defT + 3 + "px";
} else if(defT == t){

}
if(defL < l){
this.style.left = defL + 3 + "px";
} else if(defL == l){

}
timeout = setTimeout("this.move("+t+", "+l+")", 10);
}

Object.prototype.resetPos = function(){
clearTimeout(timeout);
this.style.top = "";
this.style.left = "";
}

window.alert = function(text){
get("alert").innerHTML += text+"<br />";
}

</script>
<style type="text/css">
#test {
width: 10px;
height: 10px;
position: absolute;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="test"></div>
<div id="text"></div>
<div id="alert"></div>
</body>
</html>


The problem I am facing is that if you goto coordinates: 50,90(or any other) and try to come back to 0,0(or any other coordinate less than the previous) then it doesn't animate it back. Is there anyway to fix this issue?

Thanks everyone.
techno_race
04-21-2007, 02:20 PM
Hmm. Does it have to be exact coordinates or a certain area on the page?
jscheuer1
04-21-2007, 02:40 PM
That code doesn't work at all. Here is the generated code of one try at the wizard in Opera:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<body>

<body>

<!-- Important Notice ( Delete this after you read it ) -->
<!-- The layer used below is just a sample one to make the timeline run. -->
<!-- Delete it and paste your own layer in this place but make sure that -->
<!-- you change "sampleLayer" below and in the fifth line after the copyright message. -->
<!-- End of Notice -->

<!-- Sample Layer [Cut] -->
<div id=sampleLayer style="position:absolute; top:20px; left:15px; width:100px; height:100px; background:#EEEEEE; border: 1px solid #919191; font-family:Verdana; font-size:8pt">Sample Layer</div>
<!-- End of Sample layer -->

<script language=JavaScript>
//////////////////////////////////////////////////////////////////
// _pathGenerator v1.1 //
//////////////////////////////////////////////////////////////////
// //
// This JavaScript can be freely used as long as this message //
// stays here in the header of the script. Any modifications //
// and bugs found (and fixed) are appreciated. //
// //
// Author : Svetlin Staev w/ changes by Dynamic Drive //
// Date : 01/10/2001 //
// Email : svetlins@yahoo.com //
// Visit : http://www.dynamicdrive.com for this script //
//////////////////////////////////////////////////////////////////
var posX, posY;
var ie = document.all?1:0;
var ns = document.layers?1:0;
var dom = document.getElementById?1:0;
var dhtml = new svetLayer("sampleLayer");
var path = new Array(64,76,64,76,64,76,64,76,64,76,64,76,64,76,64,76,64,76,69,78,73,80,76,81,81,82,86,85,90,87,97,91,108,97,112,100,154,128,154,128,166,138,176,146,184,153,187 ,159,196,169,204,181,213,197,222,213,230,227,239,245,245,258,250,271,254,283,257,296,263,312,267,326,270,340,273,355,275,362,278,374,281,385,286,396,291,406,298 ,418,303,427,308,437,314,445,321,453,329,460,340,466,350,471,361,476,375,480,390,481,407,483,423,483,441,485,459,487,479,489,487,490,504,491,517,491,529,491,532 ,491,537,491,540,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541 ,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541 ,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541,491,541 ,491,541,491);
var index = 0;
var trNum = 0;
function svetLayer(id)
{
this.name = dom?document.getElementById(id):ie?document.all[id]:ns?document.layers[id]:null;
if (this.name !== null)
{
this.css = (dom||ie)?this.name.style:this.name;
this.x = dom?this.css.pixelLeft:ie?parseInt(this.css.left):this.css.left;
this.y = dom?this.css.pixelTop:ie?parseInt(this.css.top):this.css.top;
this.moveTo = moveTo;
return this;
}
else alert('Your layer does not exist');
}

function moveTo(x,y)
{
if(dom||ie)
{
this.x=x;
this.y=y;
this.css.left=x+'px';
this.css.top=y+'px';
}
else this.css.moveTo(x,y);
}
function timeline()
{
if(trNum < (path.length-1))
{
dhtml.moveTo(path[trNum],path[trNum+1])
trNum += 2;
setTimeout('timeline()',10);
}
else trNum=0;
}
window.onload=timeline;
</script>


</body>
</html>

Maybe something in there would be of use.
shachi
04-21-2007, 02:48 PM
techno_race: yes, exact coordinates.

jscheuer1: It works!! But unfortunately that's not what I was looking for. I guess I wasn't able to clear myself up. What I want is a function which can take a given x and y coordinates and move(animate) a certain element to the given coordinates.
pcbrainbuster
04-21-2007, 03:37 PM
<html>
<head>
<title></title>
</head>
<body onload="startanime()" onunload="clearTimeout(t1)">
<span id="animatedtext" style="position: absolute; top: 1px; left: 1px;">Customize here</span>
<script type="text/javascript">
var FromLeft = 100
var FromTop = 50
var curx = 0
var cury = 0
var call = document.getElementById('animatedtext')
var t1

function startanime() {

if (curx<FromLeft && cury==FromTop) {
curx++
call.style.left=curx
t1=setTimeout("startanime()", 5)}

else if (curx>FromLeft && cury==FromTop) {
curx--
call.style.left=curx
t1=setTimeout("startanime()", 5)}

if (cury<FromTop && curx==FromLeft) {
cury++
call.style.top=cury
t1=setTimeout("startanime()", 5)}

else if (cury>FromTop && curx==FromLeft) {
cury--
call.style.top=cury
t1=setTimeout("startanime()", 5)}

if (curx<FromLeft && cury<FromTop) {
curx++
cury++
call.style.top=cury
call.style.left=curx
t1=setTimeout("startanime()", 5)}

else if (curx>FromLeft && cury<FromTop) {
curx--
cury++
call.style.top=cury
call.style.left=curx
t1=setTimeout("startanime()", 5)}

else if (curx<FromLeft && cury>FromTop) {
curx++
cury--
call.style.top=cury
call.style.left=curx
t1=setTimeout("startanime()", 5)}

else if (curx>FromLeft && cury>FromTop) {
curx--
cury--
call.style.top=cury
call.style.left=curx
t1=setTimeout("startanime()", 5)}

}
</script>
</body>
</html>

This script should do the trick... -

curx (sets starting x position)
cury (sets starting y position)
FromLeft (sets ending x position)
FromTop (sets ending y position)
shachi
04-21-2007, 04:11 PM
pcbrainbuster: That's almost what I wanted except that I want it as a function where you can pass the coordinates as arguments.
tech_support
04-22-2007, 06:43 AM
<html>
<head>
<title></title>
</head>
<body onload="startanime()" onunload="clearTimeout(t1)">
<span id="animatedtext" style="position: absolute; top: 1px; left: 1px;">Customize here</span>
<script type="text/javascript">
var FromLeft = 100
var FromTop = 50
var curx = 0
var cury = 0
var call = document.getElementById('animatedtext')
var t1

function startanime() {

if (curx<FromLeft && cury==FromTop) {
curx++
call.style.left=curx
t1=setTimeout("startanime()", 5)}

else if (curx>FromLeft && cury==FromTop) {
curx--
call.style.left=curx
t1=setTimeout("startanime()", 5)}

if (cury<FromTop && curx==FromLeft) {
cury++
call.style.top=cury
t1=setTimeout("startanime()", 5)}

else if (cury>FromTop && curx==FromLeft) {
cury--
call.style.top=cury
t1=setTimeout("startanime()", 5)}

if (curx<FromLeft && cury<FromTop) {
curx++
cury++
call.style.top=cury
call.style.left=curx
t1=setTimeout("startanime()", 5)}

else if (curx>FromLeft && cury<FromTop) {
curx--
cury++
call.style.top=cury
call.style.left=curx
t1=setTimeout("startanime()", 5)}

else if (curx<FromLeft && cury>FromTop) {
curx++
cury--
call.style.top=cury
call.style.left=curx
t1=setTimeout("startanime()", 5)}

else if (curx>FromLeft && cury>FromTop) {
curx--
cury--
call.style.top=cury
call.style.left=curx
t1=setTimeout("startanime()", 5)}

}
</script>
</body>
</html>

This script should do the trick... -

curx (sets starting x position)
cury (sets starting y position)
FromLeft (sets ending x position)
FromTop (sets ending y position)
Coding with a valid DOCTYPE would be better :)