Code Sketch


Easing function comparison for animations
By: Lalit Pant
// This is a script to demonstrate/compare how various easing functions
// take an object from its start point to its target/destination in an animation

cleari()
showAxes()
showGrid()
drawStage(white)

def pic = Picture.rectangle(50, 50)

def xProp(s: Seq[Double]) = s(0)

// make a picture for the given state
def makePic(y: Double)(s: Seq[Double]) = {
    trans(xProp(s), -200) * fillColor(cm.blue) -> pic
    pic.withTranslation(xProp(s), y)
        .withFillColor(cm.skyBlue)
        .withPenColor(black)
}

// Define four animations at different locations with different easing functions
val anim1 = Transition(
    3, // seconds
    Seq(0), // start state
    Seq(300), // end state
    easing.Linear, // interpolatation method
    makePic(100), // function to make pic from current state
    false // hide when done
)

val anim2 = Transition(
    3, // seconds
    Seq(0), // start state
    Seq(300), // end state
    easing.ElasticIn, // interpolatation method
    makePic(0), // function to make pic from current state
    false // hide when done
)

val anim3 = Transition(
    3, // seconds
    Seq(0), // start state
    Seq(300), // end state
    easing.ElasticOut, // interpolatation method
    makePic(-100), // function to make pic from current state
    false // hide when done
)

val anim4 = Transition(
    3, // seconds
    Seq(0), // start state
    Seq(300), // end state
    easing.ElasticInOut, // interpolatation method
    makePic(-200), // function to make pic from current state
    false // hide when done
)

// run the four animations in parallel
val anim = animPar(anim1, anim2, anim3, anim4)
run(anim)