Toon posts:

Vloeibaar Javascript

Pagina: 1
Acties:

Verwijderd

Topicstarter
Hoe is m'n topictitel? :D

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.. :P

  • DarthPlastic
  • Registratie: Augustus 2005
  • Laatst online: 07-01 19:29
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 :9) 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 ]

Owner SuitIT, https://www.suitit.nl


  • Borizz
  • Registratie: Maart 2005
  • Laatst online: 02-01 15:55
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).

If I can't fix it, it ain't broken.


  • SPee
  • Registratie: Oktober 2001
  • Laatst online: 19-02 19:02
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. :)

let the past be the past.


Verwijderd

Topicstarter
Dank. Hebben jullie nog koele tutorial linkjes? :D

  • uruviel359
  • Registratie: Juni 2004
  • Laatst online: 15-12-2025
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

Topicstarter
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. :D Maargoed, dan zal ik de JS-bestanden van de bovengenoemde library's maar eens doorspitten..

  • orf
  • Registratie: Augustus 2005
  • Nu online

orf

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<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
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

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é
  • Registratie: Maart 2002
  • Laatst online: 09:23

André

Analytics dude

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/
Pagina: 1