[js] animeren. - Softwareontwikkeling

vrijdag 7 juli 2006 19:37

Acties:

Verwijderd

Topicstarter

Ik heb vandaag geprobeert een animatie te maken met javascript.
Een div, en als je erop klik wordt deze langzaam groter, totdat de complete text zichtbaar is.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title> animatie </title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>

<style type='text/css'>
body {
    background:#777;
    color:#ccc;
}
div {
    cursor:pointer;
    cursor:hand;
    background:#444;
    width:30em;
    overflow:hidden;
    height:150px;
    border:5px solid #9f0;
}
p {
    margin:.5em;
}
</style>
<script type='text/javascript'>
window.onload=function()
{
    var obj=document.getElementById('text');
    obj.onclick=function()
    {
        var self = this;
        self.onclick = null;
        var start = self.clientHeight || self.offsetHeight;
        var total = (self.scrollHeight - start);
        var fps = 200;
        var a = (total/(fps/100))/2;
        var b = 2*(1/((total/(fps/100))/Math.PI));
        var interval = setInterval(function()
        {
            o = start + ((total/2) + (total/2) * Math.sin(b*a + Math.PI/2));

            a--;
            if(a>=0)
            {
                self.style.height = (o<1?0:o) + 'px';
            }
            else
            {
                self.style.height='auto';
                clearInterval(interval);
                interval=null;
            }
        },10);
    }
}
</script>

<div id='text'>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed iaculis. Morbi sollicitudin leo nec ipsum. Duis ut arcu. Aliquam erat volutpat. In fringilla tristique ante. In faucibus porttitor enim. Mauris ac sapien. Cras sodales interdum augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus porttitor iaculis dui. Nulla et nulla. Ut nulla lectus, faucibus non, iaculis vel, tristique et, lectus. Nam vitae odio non quam auctor vehicula. Nulla elementum. Nulla lacinia laoreet diam. Vestibulum condimentum, purus eget ullamcorper fringilla, orci dui dictum diam, vel pulvinar nibh ligula quis lectus. Sed vehicula, nisi a blandit laoreet, purus ante eleifend nisi, et lacinia velit risus a velit.
    <p>Vestibulum non turpis. Vestibulum non risus. Sed vel leo sit amet orci pharetra scelerisque. Ut suscipit arcu id orci. Quisque et sem id ligula pretium aliquet. Fusce nulla sapien, consectetuer eu, volutpat ac, viverra eu, enim. Pellentesque dictum urna eget ante. Cras neque. Nulla condimentum quam a mauris. Donec ut turpis eu tortor elementum tristique. Nulla a ipsum pulvinar nisl sagittis viverra. Donec pede purus, porttitor rhoncus, commodo quis, accumsan nec, augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam tincidunt cursus erat.
    <p>Morbi ullamcorper tristique risus. Aliquam velit. Etiam ac ante id quam lobortis fermentum. Nam mauris sem, varius sed, pulvinar quis, luctus et, nulla. Pellentesque eget pede. Proin interdum, leo ut dictum ultrices, elit odio semper purus, sit amet tincidunt sem elit nec nisi. Etiam quam. Donec neque. Donec justo dui, pharetra aliquam, molestie pharetra, aliquet dictum, justo. Duis sapien. Vestibulum quis tortor a odio gravida condimentum. Nulla facilisi. Integer velit. Vestibulum eget nulla. Nunc sollicitudin odio et nulla. Sed porttitor odio non nulla.
</div>

Dat werkt. redelijk goed.

Maar ik heb een erg langzame computer.
Dus eigenlijk heb ik geen idee of het op andere computers sneller loopt en hoe snel.

Misschien heeft het script op mijn computer vertraging en doet hij er dus langer over.
Als de functie binnen de setInterval langer duurt dan het aantal milliseconden wat ik invul, dan lijkt hij de volgende interval gewoon later uit te voeren.
Dus hoe kan ik dan de tijd inschatten als ik er niet vanuit kaan gaan dat het aantal milliseconden klopt?

En ik vraag me ook af of dit de beste manier is om iets te animeren met javascript...
Of is er een andere manier die beter of soepeler loopt.

Dus wat is eigenlijk de beste manier om dingen te animeren in javascript en hoe kan ik de tijd inschatten?

vrijdag 7 juli 2006 20:28

Acties:

JKVA

Design-by-buzzword fanatic

Ik weet uit mijn hoofd niet zo snel hoe je de tijd gemakkelijk in millis kunt opvragen in JS. Het kan wel, maar dat weet iemand anders je zo te vertellen.

Wat je doet is in elke aanroep naar je functie de delta tijd meegeven, dus: dt = newTime - oldTime;

Als je deze dt in elke tijd gerelateerde (animatie) berekening meeneemt, wordt op een snelle PC de uitkomst per keer kleiner en op een trage PC groter. Zo is het redelijk gelijk. Dat is voor jou voldoende.

Ter info, je kunt ook nog per X frames de boel syncen voor een nog exactere framerate.

offtopic:
Snel getyped, weinig tijd, dus er kunnen wat krommigheden in staan.

Fat Pizza's pizza, they are big and they are cheezy

vrijdag 7 juli 2006 20:31

Acties:

André

Analytics dude

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title> animatie </title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>

<style type='text/css'>
body {
    background:#777;
    color:#ccc;
}
div {
    cursor:pointer;
    cursor:hand;
    background:#444;
    width:30em;
    overflow:hidden;
    height:150px;
    border:5px solid #9f0;
}
p {
    margin:.5em;
}
</style>
<script type='text/javascript'>
  window.onload = function()
  {
    document.getElementById('text').onclick = klik;
  }

  function klik()
  {
    this.onclick = null;
    this.start = this.clientHeight || this.offsetHeight;
    this.total = (this.scrollHeight - this.start);
    this.fps = 500;
    this.formula1 = this.start + (this.total / 2);
    this.formula2 = this.total / 2;
    this.a = (this.total / (this.fps / 100)) / 2;
    this.b = 2 * (1 / ((this.total / (this.fps / 100)) / Math.PI));
    animate(this);
  }

  var pi = Math.PI / 2;
  var o;

  function animate(obj)
  {
    o = obj.formula1 + (obj.formula2 * Math.sin(obj.b * obj.a + pi));
    obj.a--;

    if ((obj.a >= 0) && (o >= 1))
    {
        obj.style.height = o + 'px';
        self = obj;
        setTimeout("animate(self)", 20);
    }
  }
</script>

<div id='text'>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed iaculis. Morbi sollicitudin leo nec ipsum. Duis ut arcu. Aliquam erat volutpat. In fringilla tristique ante. In faucibus porttitor enim. Mauris ac sapien. Cras sodales interdum augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus porttitor iaculis dui. Nulla et nulla. Ut nulla lectus, faucibus non, iaculis vel, tristique et, lectus. Nam vitae odio non quam auctor vehicula. Nulla elementum. Nulla lacinia laoreet diam. Vestibulum condimentum, purus eget ullamcorper fringilla, orci dui dictum diam, vel pulvinar nibh ligula quis lectus. Sed vehicula, nisi a blandit laoreet, purus ante eleifend nisi, et lacinia velit risus a velit.
    <p>Vestibulum non turpis. Vestibulum non risus. Sed vel leo sit amet orci pharetra scelerisque. Ut suscipit arcu id orci. Quisque et sem id ligula pretium aliquet. Fusce nulla sapien, consectetuer eu, volutpat ac, viverra eu, enim. Pellentesque dictum urna eget ante. Cras neque. Nulla condimentum quam a mauris. Donec ut turpis eu tortor elementum tristique. Nulla a ipsum pulvinar nisl sagittis viverra. Donec pede purus, porttitor rhoncus, commodo quis, accumsan nec, augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam tincidunt cursus erat.
    <p>Morbi ullamcorper tristique risus. Aliquam velit. Etiam ac ante id quam lobortis fermentum. Nam mauris sem, varius sed, pulvinar quis, luctus et, nulla. Pellentesque eget pede. Proin interdum, leo ut dictum ultrices, elit odio semper purus, sit amet tincidunt sem elit nec nisi. Etiam quam. Donec neque. Donec justo dui, pharetra aliquam, molestie pharetra, aliquet dictum, justo. Duis sapien. Vestibulum quis tortor a odio gravida condimentum. Nulla facilisi. Integer velit. Vestibulum eget nulla. Nunc sollicitudin odio et nulla. Sed porttitor odio non nulla.
</div>

Ik ben even snel aan het klooien geweest en kom hier op uit. Een paar dingen heb ik veranderd: setTimeout ipv setInterval werkt iets nauwkeuriger. Sneller dan 20ms doet de browser toch niet. En verder moet je zoveel mogelijk berekeningen buiten de animatie houden, dus elke keer math.pi aanroepen vetraagd.