Skip to content

Instantly share code, notes, and snippets.

@brookback
Created February 20, 2020 19:19
Show Gist options
  • Save brookback/7fa9c733eea0eecdd3ddbfc1b76bc02e to your computer and use it in GitHub Desktop.
Save brookback/7fa9c733eea0eecdd3ddbfc1b76bc02e to your computer and use it in GitHub Desktop.
const easeInOutQuad = (t) => t<.5 ? 2*t*t : -1+(4-2*t)*t
const easeInOutCubic = (t) => t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1
const easeInOutQuart = (t) => t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t
const easeInOutQuint = (t) => t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t
// OLIKA FUNKTIONER
// 1
function foo() {
return 1
}
// 2
let foo = function() {
return 1
}
// 3
let foo = () => {
return 1
}
// 4
let foo = () => 1
const allEasings = [
easeInOutQuad,
easeInOutCubic,
easeInOutQuart,
easeInOutQuint
]
const sliderNr = currentSliderNr()
const easing = allEasings[sliderNr]
const startVal = 0; // x-positionens startvärde i pixlar
const endVal = 500; // x-positionens slutvärde i pixlar
const startDur = 1; // vid vilken tidpunkt animationen börjar i sekunder
const endDur = 2; // vid vilken tidpunkt animationen slutar i sekunder
const t = linear(time,startDur,endDur,0,1); // en funktion som räknar 0 till 1 under tiden mellan start och endDur. Dvs animationens längd. Så på en sekund i detta fall räknar den linjärt från 0 till 1.
const e = easing(t); // funktionen som omvandlar det linjära värdet och gör att den börjar långsammare, accelererar mot mitten och slutar långsammare.
const x = linear(e,0,1,startVal,endVal); // egentligen bara en funktion som stoppar in de faktiska pixel-värdena.
[x, value[1]]; // x och y output till positions-värdet på lagret
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment