Vloeibaar Javascript

[Verwijderd]

Hoe is m'n topictitel?

Zo nu en dan zie je van die coole stukjes HTML die dmv JS geresized worden op een hele vloeiende manier. Dus bijvoorbeeld een druk op de knop en het formaat van je TEXTAREA-element veranderd. Het gaat mij dus om de manier waarop; die mooi vloeiende aanpassing.

Het probleem is dat ik m'n god niet weet waarop ik moet zoeken en dus ook niet hoe ik het moet benoemen (zie hierboven). Een voorbeeldje heb ik ook zo 1 2 3 niet, ik kom het zo nu en dan tegen - en vergeet waar.

Ik hoop dat ik te begrijpen ben..

[DarthPlastic]

Een object wat zich vloeiend moet verplaatsen:

:loop
Xobject = Xobject + 1
goto loop

(Xobject = X-waarde van zijn locatie )
Herhaal dit continu (jaja, ik ken geen programmeertalen, dus maar half DOS ) en je object zal zich vloeiend verplaatsen.

Om met een versnelling te werken laat je die 1 steeds wat groter worden tot hij bv de 10 heeft bereikt.
Aan het einde weer steeds -1 tot je de 0 bereikt en het ding stilstaat

[ Voor 6% gewijzigd door DarthPlastic op 09-06-2006 18:07 ]

[Borizz]

Dit kan in Javascript door middel van een timeouts, waardoor je een element op het scherm elke x miliseconden een stukje verder uitrekt of inkrimpt.. Of het effect vloeiend is wordt bepaald door de tijd en de stappen die je neemt bij het resizen van een element (en de daaraan verbonden graphics, zoals plaatjes).

[SPee]

Of door een simpel for loopje dat de item vergroot.
Wel met een vertraging laten tonen, anders is hij al klaar voordat je het merkt.

[Verwijderd]

Dank. Hebben jullie nog koele tutorial linkjes?

[uruviel359]

meestal wordt er een van de volgende javascript librairies gebruikt om 'vloeiende' effectjes te krijgen:

Moo.fx
Javascript Motion Tween
script.aculo.us

Ik hoop dat je hier wat aan hebt.

[Verwijderd]

Om het nog makkelijker te maken heb je ook nog completere libs zoals Dojo, Rico, MochiKit, de Google en Yahoo UI Libraries, Backbase, etc.
(Backbase is eigenlijk niet echt meer een "simpele library" te noemen)

Heel leuk spul allemaal om mee te spelen

[Verwijderd]

Heel erg bedankt. Maar ik vrees dat er niet of nauwelijks tutorials over zijn.. ik heb zo'n tic dat ik alles graag helemaal zelf maak. Maargoed, dan zal ik de JS-bestanden van de bovengenoemde library's maar eens doorspitten..

[orf]

HTML:

<script type="text/javascript">

    var obj;

    function ease(targetX, targetY){
        
        var topPosPlus = obj.offsetTop + (0 - targetY);
        obj.style.top = topPosPlus;
        var topPosVM   = obj.offsetTop * 0.95;
        obj.style.top = topPosVM;
        var topPosMin  = obj.offsetTop - (0 - targetY);
        obj.style.top = topPosMin;
        
        var leftPosPlus = obj.offsetLeft + (0 - targetX);
        obj.style.left  = leftPosPlus;
        var leftPosVM   = obj.offsetLeft * 0.95;
        obj.style.left  = leftPosVM;
        var leftPosMin  = obj.offsetLeft - (0 - targetX);
        obj.style.left  = leftPosMin;
        
        
        if (Math.round(obj.offsetTop) == targetY && 
            Math.round(obj.offsetTop) == targetX){
            clearInterval(move);
        }

    }
    
    function init(){
    
        obj = document.getElementById('obj1');
        move = setInterval("ease(400, 400)", 15);
    
    }
    
    onload = init;


</script>
<style type="text/css">
    #obj1{
        position: absolute;
        top: 10px;
        left: 10px;
        width: 50px;
        height: 50px;
        background: #f00;
    }
</style>

<div id="obj1"></div>

Beetje ranzige manier van easing.

[Rowanov]

Borizz schreef op vrijdag 09 juni 2006 @ 18:08:
Dit kan in Javascript door middel van een timeouts, waardoor je een element op het scherm elke x miliseconden een stukje verder uitrekt of inkrimpt.. Of het effect vloeiend is wordt bepaald door de tijd en de stappen die je neemt bij het resizen van een element (en de daaraan verbonden graphics, zoals plaatjes).

SetTimeout is heel erg onhandig in veel gevallen, setInterval werkt een stukje makkelijker

[André]

Rowanov schreef op zaterdag 10 juni 2006 @ 11:55:
[...]


SetTimeout is heel erg onhandig in veel gevallen, setInterval werkt een stukje makkelijker

Op setTimeout heb je meer controle omdat je elke aanroep kunt kijken of er een nieuwe timeout gestart moet worden. Verder is setTimeout nauwkeuriger dan setInterval, al zal je dat bij een animatie worst wezen. Mijn voorkeur gaat iig uit naar setTimeout.

@TS: Verder heb ik ook een simpel scriptje dat wat blokjes animeert, misschien kun je daar ook nog wat mee: http://andrescholten.nl/index.php/dhtml-slideletters/