Français
Comprend

Animationseffekte (comment jQuery Easings)

 

Sven
Bader


Herunterladen

là je solche Effekte häufiger verwende, habe je vous eh bien dans einer Include zusammengefasst et pour dem jQuery-Vorbild encore quelques hinzugefügt.

L'idée ist, dass qui Bewegung eines Sprites (ou bien aussi Menüelements etc.) pas linear verläuft, mais am Anfang et/ou bien Ende geglättet wird.

qui Beispielcode ist à cause de qui Visualisierung quelque chose länger geworden, qui Verwendung selbst ist mais eigentlich un Zweizeiler:
step! = step! + 0.01
xpos! = easeOutCubic(step!)

on muss lediglich pour sorgen, dass qui paramètre (ici step!) dans konstanten Schritten de 0 jusqu'à 1 zählt. qui Rückgabe sommes aussi wieder Werte de 0 (Animationsanfang) jusqu'à 1 (Animationsende) - seulement plan entre pas linear.

qui Include Dossier (ease.inc)
'Basiert sur jQuery sous qui MIT Lizenz (https://jquery.org/license/)
'
'XProfan-Version de Sven Bader 2021 www.svenbader.de
Déclarer Pi!, c1!, c2!, c3!, c4!, c5!, c6!
PI! = Pi()
c1! = 1.70158
c2! = c1! * 1.525
c3! = c1! + 1.0
c4! = (2 * PI!) / 3.0
c5! = (2 * PI!) / 4.5
c6! = PI! * 0.5

Proc bounceOut

    parameters x!
    declare n1!,d1!
    n1! = 7.5625
    d1! = 2.75

    si (x! < 1.0/d1!)

        return n1! * x! * x!

    elseif (x! < (2.0/d1!))

        x! = x!-(1.5/d1!)
        return (n1! * x! * x! + 0.75)

    elseif (x! < 2.5/d1!)

        x! = x!-(2.25/d1!)
        return (n1! * x! * x! + 0.9375)

    d'autre

        x! = x!-(2.625/d1!)
        return (n1! * x! * x! + 0.984375)

    endif

ENDPROC

Proc Linear

    parameters x!
    return x!

ENDPROC

Proc easeInQuad

    parameters x!
    return (x! * x!)

ENDPROC

Proc easeOutQuad

    parameters x!
    return (1.0 - (1.0 - x!) * (1.0 - x!))

ENDPROC

Proc easeInOutQuad

    parameters x!
    return si(x! < 0.5, (2.0 * x! * x!), (1.0 - (-2.0 * x! + 2.0)^2 * 0.5))

ENDPROC

Proc easeInCubic

    parameters x!
    return (x! * x! * x!)

ENDPROC

Proc easeOutCubic

    parameters x!
    return (1.0 - (1.0 - x!)^3)

ENDPROC

Proc easeInOutCubic

    parameters x!
    return si(x! < 0.5, (4 * x! * x! * x!), (1.0 - (-2.0 * x! + 2.0)^3 * 0.5))

ENDPROC

Proc easeInQuart

    parameters x!
    return (x! * x! * x! * x!)

ENDPROC

Proc easeOutQuart

    parameters x!
    return (1.0 - (1.0 - x!)^4)

ENDPROC

Proc easeInOutQuart

    parameters x!
    return si(x! < 0.5, (8 * x! * x! * x! * x!), (1.0 - (-2.0 * x! + 2.0)^4 * 0.5))

ENDPROC

Proc easeInQuint

    parameters x!
    return (x! * x! * x! * x! * x!)

ENDPROC

Proc easeOutQuint

    parameters x!
    return (1 - (1 - x!)^5)

ENDPROC

Proc easeInOutQuint

    parameters x!
    return si(x! < 0.5, (16.0 * x! * x! * x! * x! * x!), (1.0 - (-2.0 * x! + 2)^5 * 0.5))

ENDPROC

Proc easeInSine

    parameters x!
    return 1.0 - cos(x! * c6!)

ENDPROC

Proc easeOutSine

    parameters x!
    return sin(x! * c6!)

ENDPROC

Proc easeInOutSine

    parameters x!
    return (-(cos(PI! * x!) - 1.0) * 0.5)

ENDPROC

Proc easeInExpo

    parameters x!
    return si((x! = 0.0), 0.0, 2^(10.0 * x! - 10.0))

ENDPROC

Proc easeOutExpo

    parameters x!
    return si(x! = 1.0, 1.0, (1.0 - 2^(-10.0 * x!)))

ENDPROC

Proc easeInOutExpo

    parameters x!
    return si(x! = 0.0, 0.0, si(x! = 1.0, 1.0, si(x! < 0.5, (2^(20 * x! - 10) * 0.5), (2 - 2^(-20.0 * x! + 10.0)) *0.5)))

ENDPROC

Proc easeInCirc

    parameters x!
    return 1.0 - sqrt(1.0 - x!^2)

ENDPROC

Proc easeOutCirc

    parameters x!
    return sqrt(1.0 - (x! - 1.0)^2)

ENDPROC

Proc easeInOutCirc

    parameters x!
    return si(x! < 0.5, ((1.0 - sqrt(1.0 - (2.0 * x!)^2)) * 0.5), \
    ((sqrt(1.0 - (-2.0 * x! + 2.0)^2) + 1.0) * 0.5))

ENDPROC

Proc easeInElastic

    parameters x!
    return si(x! = 0.0, 0.0, si(x! = 1.0, 1.0, -(2^(10.0 * x! - 10.0) * sin((x! * 10.0 - 10.75) * c4!))))

ENDPROC

Proc easeOutElastic

    parameters x!
    return si(x! = 0, 0, si(x! = 1.0, 1.0, (2^(-10.0 * x!) * sin((x! * 10 - 0.75) * c4!) + 1.0)))

ENDPROC

Proc easeInOutElastic

    parameters x!
    return si(x! = 0, 0, si(x! = 1.0, 1.0, si(x! < 0.5, (-(2^(20 * x! - 10) * sin((20 * x! - 11.125) * c5!))  * 0.5), \
    (2^(-20.0 * x! + 10.0) * sin((20.0 * x! - 11.125) * c5!) * 0.5 + 1.0))))

ENDPROC

Proc easeInBack

    parameters x!
    return c3! * x! * x! * x! - c1! * x! * x!

ENDPROC

Proc easeOutBack

    parameters x!
    return 1 + c3! * (x! - 1)^3 + c1! * (x! - 1)^2

ENDPROC

Proc easeInOutBack

    parameters x!
    return si(x! < 0.5, (((2 * x!)^2 * ((c2! + 1.0) * 2.0 * x! - c2!))  * 0.5), \
    (((2.0 * x! - 2.0)^2 *((c2! + 1) * (x! * 2.0 - 2.0) + c2!) + 2) * 0.5))

ENDPROC

Proc easeInBounce

    parameters x!
    return 1.0 - bounceOut(1.0 - x!)

ENDPROC

Proc easeInOutBounce

    parameters x!
    return si(x! < 0.5, ((1.0 - bounceOut(1.0 - 2.0 * x!)) * 0.5), ((1.0 + bounceOut(2.0 * x! - 1.0)) * 0.5))

ENDPROC


un Beispiel-Listing (ease.prf)
'XProfan-Version de Sven Bader 2021 www.svenbader.de
 $I ease.inc
declare xpos!, ypos!, zpos!
declare font&, fontHandle&, names$, step!, effect&, step&, steps![29,200],loop&,cache&

proc DrawGLScene

    oGL("Clear")
    'balle
    oGL("Origin", -2+xpos!*4, 1.0, -5)
    oGL("Color", 1.0,0.0,0.0,1)
    oGL("Sphere", 0.15,20,20)
    'Großer Graph
    oGL("Origin", -2, -0.7, -5)
    oGL("Color", 1.0,1.0,1.0,1)
    oGL("glLineWidth", 6.0)

    whileloop 0, step&-2,2

        oGL("glBegin", ~GL_LINES)
        oGL("glVertex2f",&loop*0.02,steps![effect&,&loop])
        oGL("glVertex2f",(&loop+2)*0.02,steps![effect&,&loop+2])
        oGL("glEnd")

    endwhile

    'Kleine Graphen (+Cachen)

    ifnot cache&

        cache& = ogl("Startlist")
        oGL("glLineWidth", 3.0)

        whileloop 0, 29

            loop& = &loop
            oGL("Origin", -2.5+(si(loop&>14,&loop-15,&loop)*0.33), -1.4+si(loop&>14,-0.4,0), -5)

            whileloop 0, 180,20

                oGL("glBegin", ~GL_LINES)
                oGL("glVertex2f",&loop*0.0012,steps![loop&,&loop]*0.2)
                oGL("glVertex2f",(&loop+20)*0.0012,steps![loop&,&loop+20]*0.2)
                oGL("glEnd")

            endwhile

        endwhile

        ogl("Endlist")

    endif

    ogl("DrawList", cache&)
    'Text:
    oGL("Origin", -5*(%maxx/%maxy),5 ,-15)
    oGL("color", 1.0,1.0,1.0,1.0)
    oGL("Print",font&,"Effekt "+str$(effect&)+": "+substr$(names$,effect&+1,»))
    oGL("Show")

ENDPROC

style de fenêtre 1+2+4+8+16
windowtitle "Easing (Leertaste zum Überspringen) www.svenbader.de"
window 100,100 - 800,600;0
oGL("Init", %hWnd, 0, 0, 0.4, 0)
oGL("Posmode",1)
fontHandle&=create("Font","Ink Free",12,0,1,0,0)
font&=oGL("OutlineFont",fontHandle&,0)
Deleteobject fontHandle&
names$ = "Linear,easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic,easeOutCubic,easeInOutCubic (Swing),easeInQuart,easeOutQuart,easeInOutQuart,easeInQuint,easeOutQuint,easeInOutQuint,easeInSine,easeOutSine,easeInOutSine,easeInExpo,easeOutExpo,easeInOutExpo,easeInCirc,easeOutCirc,easeInOutCirc,easeInElastic,easeOutElastic,easeInOutElastic,easeInBack,easeOutBack,easeInOutBack,easeInBounce,easeInOutBounce"

WhileNot iskey(27)

    sleep 2

    SELECT effect&

        CASEOF 0 :  xpos! = Linear(step!)

        CASEOF 1 :  xpos! = easeInQuad(step!)

        CASEOF 2 :  xpos! = easeOutQuad(step!)

        CASEOF 3 :  xpos! = easeInOutQuad(step!)

        CASEOF 4 :  xpos! = easeInCubic(step!)

        CASEOF 5 :  xpos! = easeOutCubic(step!)

        CASEOF 6 :  xpos! = easeInOutCubic(step!)

        CASEOF 7 :  xpos! = easeInQuart(step!)

        CASEOF 8 :  xpos! = easeOutQuart(step!)

        CASEOF 9 :  xpos! = easeInOutQuart(step!)

        CASEOF 10 : xpos! = easeInQuint(step!)

        CASEOF 11 : xpos! = easeOutQuint(step!)

        CASEOF 12 : xpos! = easeInOutQuint(step!)

        CASEOF 13 : xpos! = easeInSine(step!)

        CASEOF 14 : xpos! = easeOutSine(step!)

        CASEOF 15 : xpos! = easeInOutSine(step!)

        CASEOF 16 : xpos! = easeInExpo(step!)

        CASEOF 17 : xpos! = easeOutExpo(step!)

        CASEOF 18 : xpos! = easeInOutExpo(step!)

        CASEOF 19 : xpos! = easeInCirc(step!)

        CASEOF 20 : xpos! = easeOutCirc(step!)

        CASEOF 21 : xpos! = easeInOutCirc(step!)

        CASEOF 22 : xpos! = easeInElastic(step!)

        CASEOF 23 : xpos! = easeOutElastic(step!)

        CASEOF 24 : xpos! = easeInOutElastic(step!)

        CASEOF 25 : xpos! = easeInBack(step!)

        CASEOF 26 : xpos! = easeOutBack(step!)

        CASEOF 27 : xpos! = easeInOutBack(step!)

        CASEOF 28 : xpos! = easeInBounce(step!)

        CASEOF 29 : xpos! = easeInOutBounce(step!)

    ENDSELECT

    inc step&
    step! = step! + 0.005
    steps![effect&,step&] = xpos!

    si (step! >= 1.0) OU Iskey(32)

        sleep si(Iskey(32), 200, 500)
        inc effect&
        cas cache& : ogl("DeleteList",cache&)
        clear step!, step&, xpos!, cache&
        cas effect& = 30 : effect& = 0

    endif

    DrawGLScene()

Endwhile


18 kB
Hochgeladen:15.10.2021
Downloadcounter67
Herunterladen
137 kB
Hochgeladen:15.10.2021
Downloadcounter67
Herunterladen
 
15.10.2021  
 



répondre


Topictitle, max. 100 marque.
 

Systemprofile:

ne...aucune Systemprofil angelegt. [anlegen]

XProfan:

 Posting  Font  Smilies  ▼ 

s'il te plaît s'inscrire um une Beitrag trop verfassen.
 

Options du sujet

1.473 Views

Untitledvor 0 min.
Gast.0815 vor 11 Tagen
Sven Bader06.05.2024
Axel Berse08.11.2023
Walter23.07.2023
plus...

Themeninformationen

cet Thema hat 1 participant:

Sven Bader (1x)


Admins  |  AGB  |  Applications  |  Auteurs  |  Chat  |  protection des données  |  Télécharger  |  Entrance  |  Aider  |  Merchantportal  |  Empreinte  |  Mart  |  Interfaces  |  SDK  |  Services  |  Jeux  |  cherche  |  Support

un projet aller XProfaner, qui il y a!


Mon XProfan
Privé Nouvelles
Eigenes Ablageforum
Sujets-La liste de voeux
Eigene Posts
Eigene Sujets
Zwischenablage
Annuler
 Deutsch English Français Español Italia
Traductions

protection des données


Wir verwenden Cookies seulement comme Session-Cookies à cause de qui technischen Notwendigkeit et chez uns gibt es aucun Cookies de Drittanbietern.

si du ici sur unsere Webseite klickst ou bien navigierst, stimmst du unserer Erfassung de Informationen dans unseren Cookies sur XProfan.Net trop.

Weitere Informationen trop unseren Cookies et en supplément, comment du qui Kontrolle par-dessus behältst, findest du dans unserer nachfolgenden Datenschutzerklärung.


d'accordDatenschutzerklärung
je voudrais keinen Cookie