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

2012-06-29 00:46

Permalänk

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:

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

Dold text

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

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

Dold text

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?

Visa signatur

Rapportera Redigera

Citera flera Citera

2012-06-29 12:12

Permalänk

zoolution

Medlem

Registrerad: Jul 2005

●

Skrivet av phroggyy:

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?

Gå till inlägget

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.

Rapportera Redigera

Citera flera Citera

2012-06-29 12:32

Permalänk

phroggyy

Medlem

Plats: Solna, Stockholm
Registrerad: Dec 2010

●

Skrivet av zoolution:

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.

Gå till inlägget

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!

Visa signatur

Rapportera Redigera

Citera flera Citera

2012-06-29 13:19

Permalänk

zoolution

Medlem

Registrerad: Jul 2005

●

Skrivet av phroggyy:

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!

Gå till inlägget

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.

Rapportera Redigera

Citera flera Citera

2012-06-29 13:56

Permalänk

phroggyy

Medlem

Plats: Solna, Stockholm
Registrerad: Dec 2010

●

Skrivet av zoolution:

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.

Gå till inlägget

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

Visa signatur

Rapportera Redigera

Citera flera Citera

2012-06-29 14:09

Permalänk

zoolution

Medlem

Registrerad: Jul 2005

●

Skrivet av phroggyy:

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!

Gå till inlägget

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.

Rapportera Redigera

Citera flera Citera

2012-06-29 14:13

Permalänk

phroggyy

Medlem

Plats: Solna, Stockholm
Registrerad: Dec 2010

●

Skrivet av zoolution:

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.

Gå till inlägget

Ah, då har jag äntligen förstått det här, tackar för all hjälp!

Skickades från m.sweclockers.com

Visa signatur

Rapportera Redigera

Citera flera Citera

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

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

Externa nyheter

Spelnyheter från FZ