KeyFrames

Keyframes are an easy way to create animations on components. PolyUI uses a Kotlin DSL to create them in an easy and concise way.

They can be created wherever a Drawable is in scope, so everything from events for mouse clicks; to in your initialization block; using the extension function keyframed.

Each keyframe can be added using a number between 0 (representing the start or 0%) to 100, representing the end or 100%. Each keyframe can control the color, rotation, position, skew and size of the component (using this function). They support different animation curves and durations using the animation parameter.

The syntax is as follows:

keyframed(2.seconds, Animations.EaseOutExpo) {
     20 {    // at 20% or 0.4 seconds, the rotation will be 25 degrees
         rotation = 25.0
     }
     32.5 {  // at 32.5%, the rotation will be 35 degrees
         rotation = 35.0
     }
     50 {
         rotation = 180.0
     }
     100 {   // when it is finished, we will be fully rotated (equal to 0 degrees)
         rotation = 360.0
     }
}

Parameters