Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    Brighton, UK
    Posts
    282
    Thanks
    1
    Thanked 0 Times in 0 Posts

    animation using dhtml

    hello, I have a quick question I am trying to animate using dhtml but It is getting to complicated...

    is there any scripts or help you could give, for simple animation

    ie
    pictures that rotate (using 10 frames) + one where I can control the speed.. and to animate divisions to glide up and down

    simple is my keyword, I am only ten years old

    thanks,

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    This little Earth.
    Posts
    383
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, whizzkid

    NOTE: all the stuff below should work on IE

    The main function you need in an animation is setTimeout("function_name",speed)
    Just to get you familiar with setTimeout(), just in case you don't already know it...

    Say you've got this function:

    <script>
    function writeit(){ //this function will just write text into a textbox
    document.forms.theform.thetextbox.value="I am the text.";
    }

    </script>
    <body>
    <form name="theform">
    <input type="text" name="thetextbox">
    <input type="button" value="write it" onClick='setTimeout("writeit()",5000)'>
    </form>
    </body>

    press the button, and the writeit function will execute after 5 seconds. the speed passed to the setTimeout function is in milliseconds.

    So, you want to do an animation. I'll just give u one for gliding down. You can change it to move upwards by changing y and yMax.

    For an animation, the setTimeout() function has to be placed withIN the main function.
    This way, setTimeout() works rather like a loop, executing the function every whatever-milliseconds-you've-decided.

    <script>
    var y=0;// this HAS to be OUTSIDE the function

    function animateIt(){
    var theDivision=document.getElementById('animatedDiv'); // get required division
    var yMax=250;// the division's maximum y coordinate -- it'll travel down till here
    if(y<=yMax){ // as long as y is less than yMax, y should keep increasing
    theDivision.style.top=y;// assign y to theDivision's top y-coordinate
    y=y+10; // the y-coordinate increments each time by 10 pixels
    // if you increase the increment, it makes action a little less smooth and faster
    setTimeout("animateIt()",1); // this will force the function to repeat itself every
    //1 millisecond, until the if condition turns false
    }
    }

    </script>

    <body>
    <input type="button" value="Move!" onClick="animateIt()">
    <div id="animatedDiv" style="position:absolute; top:10; left:100;background-color: orange; width:30%; height:30%"></div>
    </body>

    Why does y=0; need to be outside the function? because setTimeout will work as a loop, executing the whole animateIt() function every 1 millisecond. If we put y=0 within the function, y will always be re-assigned 0 every time the function runs again, it'll never get past getting increased to 10.

    To make the division go up instead of down, change y and yMax, to say, 250 and 0, respectively. You'll also have to change y=y+10 to y=y-10.

    After the animation, you can probably see that the value of y is now that of yMax. so the division won't move again if you press the button, because the if condition will always be false ... y will not be y<=yMax. To see it move again, you'll have to reload the page so that the value of y is 0 once more.
    To fix this problem you can add "y=0" to the onClick part of the button:
    onClick="y=0;animateIt();"


    That was simple enough, I hope ... I can't remember my own capacity of understanding when I was your age ... that was a while ago.

    Here's a function so you can change the speed by passing it as an argument into the function.

    <script>

    var y=0;// no animation for you if you accidentally stuff this within the function,
    // like I did, a million times

    function animateIt(speed){// you can change the speed by passing whatever number as an argument
    var theDivision=document.getElementById('animatedDiv');
    var yMax=250;
    var temp='setTimeout("animateIt('+speed+')",'+speed+');';//temp holds the
    // setTimeout statement
    if(y<=yMax){
    theDivision.style.top=y;
    y=y+10;
    eval(temp); // execute the statement stored in the temp variable
    }
    }

    </script>

    <body>
    <input type="button" value="Move!" onClick="y=0;animateIt(1)">
    <!-- we're passing on the speed of the animation to a movement every one millisecond .. you can change it-->
    <div id="animatedDiv" style="position:absolute; top:10; left:100;background-color: orange; width:30%; height:30%"></div>
    </body>

    Hope it helps . Now you can enjoy seeing your friends' eyes go goo-goo...
    Last edited by ASAAKI; 07-11-2002 at 06:54 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •