Forum > Mjukvara > Programmering och digitalt skapande

Skriva egna easing-funktioner, vilka är argumenten och var definieras de? [JS]

Skriv svar
 
Verktyg Visningsval
2012-06-29, 00:46   #1

phroggyy

Medlem

Plats: Solna, Stockholm

Registrerad: dec 2010

Skriva egna easing-funktioner, vilka är argumenten och var definieras de? [JS]

Hej igen,

Stötte på det väldigt användbara easing-pluginet som utökar easing-animeringarna till många fler... Dock vill jag har ännu fler än de medföljande, och undrar då vilka argument som används, samt var de definieras, så att jag kan skapa egna effekter.

Om vi tar ett exempel på hur det ser ut i js-filen:

Spoiler:
easeInQuad: function (x, t, b, c, d) {
        return c*(t/=d)*t + b;
    } 


samt hur den anropas i en annan js-fil (efter att ha inkluderats)

Spoiler:
$(".menuText", li).stop().animate({top:"0px"},400,'easeOutQuint'); 


Värt att nämna är även att det i jquery easing-filen står så här: "t: current time, b: begInnIng value, c: change In value, d: duration"

Det jag då undrar är, vilka av dessa variabler är det som anges, eftersom endast 2 stycken anges (properties samt duration enl. JQuery API). Jag är ny till JS/JQuery, och undrar då hur argument som inte definierats kan användas när funktionen definieras?

Är det någon vänlig själ som vill förklara detta för en vilsen nybörjare?
__________________
Citera för svar!|Fraktfritt hos INET|Min hemsida
Fractal Design Define R3|Corsair AX 850W|Gigabyte Nvidia GeForce GTX 570|Corsair Vengeance 1600MHz 2x4GB|ASRock P67 Extreme4|Intel Core i5 2500K|2x Samsung Spinpoint F3 1TB|Samsung Blu-Ray läsare
Nikon D7000|Nikon 60mm macro|Nikon 18-70|Nikon 55-300|Nikon 10.5 Fisheye
phroggyy är inte uppkopplad
Anmäl
Citera
2012-06-29, 12:12   #2

zoolution

Medlem

zoolutions avatar

Registrerad: jul 2005
Citat:
Ursprungligen inskrivet av phroggyy Visa inlägg
Det jag då undrar är, vilka av dessa variabler är det som anges, eftersom endast 2 stycken anges (properties samt duration enl. JQuery API). Jag är ny till JS/JQuery, och undrar då hur argument som inte definierats kan användas när funktionen definieras?

Är det någon vänlig själ som vill förklara detta för en vilsen nybörjare?
Svårt att säga med de exempel du har visat, du måste nästan länka vilket easing plugin du använder.

Måste se hela koden för att se vad som sker. Högst troligen ligger det default values för de olika easing valen.
zoolution är inte uppkopplad
Anmäl
Citera
2012-06-29, 12:32   #3

phroggyy

Medlem

Plats: Solna, Stockholm

Registrerad: dec 2010
Citat:
Ursprungligen inskrivet av zoolution Visa inlägg
Svårt att säga med de exempel du har visat, du måste nästan länka vilket easing plugin du använder.

Måste se hela koden för att se vad som sker. Högst troligen ligger det default values för de olika easing valen.
Finns endast ett officiellt easing-plugin (det som står i JQuery API), nämligen detta, och så vitt jag kan se anges inga standardvärden!
__________________
Citera för svar!|Fraktfritt hos INET|Min hemsida
Fractal Design Define R3|Corsair AX 850W|Gigabyte Nvidia GeForce GTX 570|Corsair Vengeance 1600MHz 2x4GB|ASRock P67 Extreme4|Intel Core i5 2500K|2x Samsung Spinpoint F3 1TB|Samsung Blu-Ray läsare
Nikon D7000|Nikon 60mm macro|Nikon 18-70|Nikon 55-300|Nikon 10.5 Fisheye
phroggyy är inte uppkopplad
Anmäl
Citera
2012-06-29, 13:19   #4

zoolution

Medlem

zoolutions avatar

Registrerad: jul 2005
Citat:
Ursprungligen inskrivet av phroggyy Visa inlägg
Finns endast ett officiellt easing-plugin (det som står i JQuery API), nämligen detta, och så vitt jag kan se anges inga standardvärden!
Nu har jag tittat lite på detta. Förstår att detta kan vara så smått förvirrande om man inte är så insatt i jQuery.

jQuery hanterar dessa värdena, och de ligger i: 
jQuery.fx
Den har även en funktion som hanterar stepping som ligger i:
jQuery.fx.stepping
Detta är inte direkt något du behöver ta hänsyn till, utan du får bara förlita dig på att deras stepping fungerar väl. Det du dock behöver förstå för att fixa dina egna easing funktioner är detta (om man utgår ifrån jQuery easing plugin):
  • X och T anger båda två vad tiden är nu i relation till animationen. X i form av ett flytande nummer mellan 0 och 1, T som millisekunder från starten av animationen.
  • D är animations tiden i millisekunder.
  • B är 0 och C är 1.

Själva easing funktionen, som du t.ex. själv vill göra, ska returnera ett flytande nummer mellan 0 och 1. När jQuery tar emot svaret så beräknas det på följande sätt:
x = start + easingReturnValue * (end - start)
Där start och end är startvärdet respektive slutvärdet på det du har valt att animera.



Det enda du behöver göra är dvs. att skapa din egna easing funktion (som fungerar korrekt enligt ovan regler). Därefter behöver du enbart göra:
$("#pleasAnimateMe").animate({top: "300px"}, "slow", "myOwnEasingFunc");
Det enda som DU behöver specificera är duration, i ovan nämnda fall slow (kan lika gärna vara 400 eller 600 i ms) och funktionsnamnet, sen hanterar jQuery resten själv så att rätt värden kallas till din easing funktion.

Hoppas det hjälpte att få lite information om det hela. Det är inte glasklart i varken deras kod eller på deras hemsidan.
zoolution är inte uppkopplad
Anmäl
Citera
2012-06-29, 13:56   #5

phroggyy

Medlem

Plats: Solna, Stockholm

Registrerad: dec 2010
Citat:
Ursprungligen inskrivet av zoolution Visa inlägg
Nu har jag tittat lite på detta. Förstår att detta kan vara så smått förvirrande om man inte är så insatt i jQuery.

jQuery hanterar dessa värdena, och de ligger i: 
jQuery.fx
Den har även en funktion som hanterar stepping som ligger i:
jQuery.fx.stepping
Detta är inte direkt något du behöver ta hänsyn till, utan du får bara förlita dig på att deras stepping fungerar väl. Det du dock behöver förstå för att fixa dina egna easing funktioner är detta (om man utgår ifrån jQuery easing plugin):
  • X och T anger båda två vad tiden är nu i relation till animationen. X i form av ett flytande nummer mellan 0 och 1, T som millisekunder från starten av animationen.
    [/*]
  • D är animations tiden i millisekunder.
    [/*]
  • B är 0 och C är 1.
    [/*]

Själva easing funktionen, som du t.ex. själv vill göra, ska returnera ett flytande nummer mellan 0 och 1. När jQuery tar emot svaret så beräknas det på följande sätt:
x = start + easingReturnValue * (end - start)
Där start och end är startvärdet respektive slutvärdet på det du har valt att animera.



Det enda du behöver göra är dvs. att skapa din egna easing funktion (som fungerar korrekt enligt ovan regler). Därefter behöver du enbart göra:
$("#pleasAnimateMe").animate({top: "300px"}, "slow", "myOwnEasingFunc");
Det enda som DU behöver specificera är duration, i ovan nämnda fall slow (kan lika gärna vara 400 eller 600 i ms) och funktionsnamnet, sen hanterar jQuery resten själv så att rätt värden kallas till din easing funktion.

Hoppas det hjälpte att få lite information om det hela. Det är inte glasklart i varken deras kod eller på deras hemsidan.
Ah, tackar så mycket! En följdfråga då: kan t ex T anges manuellt när funktionen kallas, då du säger att det är tiden innan animeringen börjar, så kan man ange den för att skapa delay, eller vill man istället lägga in typ delay() med ett värde för att få det? Men tackar så mycket för att du förklarade det, uppskattas väldigt mycket!

Skickades från m.sweclockers.com
__________________
Citera för svar!|Fraktfritt hos INET|Min hemsida
Fractal Design Define R3|Corsair AX 850W|Gigabyte Nvidia GeForce GTX 570|Corsair Vengeance 1600MHz 2x4GB|ASRock P67 Extreme4|Intel Core i5 2500K|2x Samsung Spinpoint F3 1TB|Samsung Blu-Ray läsare
Nikon D7000|Nikon 60mm macro|Nikon 18-70|Nikon 55-300|Nikon 10.5 Fisheye
phroggyy är inte uppkopplad
Anmäl
Citera
2012-06-29, 14:09   #6

zoolution

Medlem

zoolutions avatar

Registrerad: jul 2005
Citat:
Ursprungligen inskrivet av phroggyy Visa inlägg
Ah, tackar så mycket! En följdfråga då: kan t ex T anges manuellt när funktionen kallas, då du säger att det är tiden innan animeringen börjar, så kan man ange den för att skapa delay, eller vill man istället lägga in typ delay() med ett värde för att få det? Men tackar så mycket för att du förklarade det, uppskattas väldigt mycket!
Du kan inte, om du vill använda jQuery easing, ange T värdet när du kallar på funktionen - inuti funktionen kan du givetvis ändra det till vad du vill. Jag ser dock inte riktigt meningen med att fokusera eller ändra på T värdet, dess jobb är att hålla reda på var animationen är rent tidsmässigt.

Om du vill att ett element ska animeras efter en specifik delay så kan du använda följande:
$("#pleasAnimateMe").delay(500).animate({top: "300px"}, "slow", "myOwnEasingFunc");
Även den rena JavaScript funktionen setTimeout funkar, men jQuery varianten är helt klart renare kodmässigt.
zoolution är inte uppkopplad
Anmäl
Citera
2012-06-29, 14:13   #7

phroggyy

Medlem

Plats: Solna, Stockholm

Registrerad: dec 2010
Citat:
Ursprungligen inskrivet av zoolution Visa inlägg
Du kan inte, om du vill använda jQuery easing, ange T värdet när du kallar på funktionen - inuti funktionen kan du givetvis ändra det till vad du vill. Jag ser dock inte riktigt meningen med att fokusera eller ändra på T värdet, dess jobb är att hålla reda på var animationen är rent tidsmässigt.

Om du vill att ett element ska animeras efter en specifik delay så kan du använda följande:
$("#pleasAnimateMe").delay(500).animate({top: "300px"}, "slow", "myOwnEasingFunc");
Även den rena JavaScript funktionen setTimeout funkar, men jQuery varianten är helt klart renare kodmässigt.
Ah, då har jag äntligen förstått det här, tackar för all hjälp!

Skickades från m.sweclockers.com
__________________
Citera för svar!|Fraktfritt hos INET|Min hemsida
Fractal Design Define R3|Corsair AX 850W|Gigabyte Nvidia GeForce GTX 570|Corsair Vengeance 1600MHz 2x4GB|ASRock P67 Extreme4|Intel Core i5 2500K|2x Samsung Spinpoint F3 1TB|Samsung Blu-Ray läsare
Nikon D7000|Nikon 60mm macro|Nikon 18-70|Nikon 55-300|Nikon 10.5 Fisheye
phroggyy är inte uppkopplad
Anmäl
Citera
Nytt i forumet
Tipsa redaktionen
Senaste privatannonserna

Prylar säljes, köpes, bytes och skänkes

Säljes
Köpes
Nytt i testlabbet
Tipsa redaktionen
Nya IT-jobb
Sök jobb