Kotlin Please Animate
Kotlin, please, can you animate my views ?
A Kotlin way to declare and run beautiful animations ! Please be gentle with Kotlin :)
please {
animate(avatar) toBe {
bottomOfItsParent(marginDp = 36f)
leftOfItsParent(marginDp = 16f)
width(40, keepRatio = true, toDp = true)
}
}.start()
Download
implementation 'com.github.florent37:kotlinpleaseanimate:1.0.2'
This code describe the video above
please(duration = 1500L) {
animate(avatar) toBe {
bottomOfItsParent(marginDp = 36f)
leftOfItsParent(marginDp = 16f)
visible()
width(40, keepRatio = true, toDp = true)
}
animate(name) toBe {
rightOf(avatar, marginDp = 16f)
sameCenterVerticalAs(avatar)
textColor(Color.WHITE)
}
animate(subname) toBe {
rightOf(name, marginDp = 5f)
sameCenterVerticalAs(name)
textColor(Color.WHITE)
}
animate(revert) toBe {
rightOfItsParent(marginDp = 4f)
bottomOfItsParent(marginDp = 12f)
backgroundAlpha(0f)
}
animate(start) toBe {
aboveOf(revert, marginDp = 4f)
rightOfItsParent(marginDp = 4f)
backgroundAlpha(0f)
}
animate(bottomLayout) toBe {
originalPosition()
}
animate(content) toBe {
originalPosition()
visible()
}
}.start()
Follow scroll
Use setPercent
to apply modify the current step of the animation
Exemple with a scrollview
val animation = please {
animate(avatar) toBe {
topOfItsParent(marginDp = 20f)
leftOfItsParent(marginDp = 20f)
scale(0.5f, 0.5f)
}
animate(username) toBe {
rightOf(avatar, marginDp = 16f)
sameCenterVerticalAs(avatar)
alpha(0.5f)
}
animate(revert) toBe {
rightOfItsParent(marginDp = 20f)
sameCenterVerticalAs(avatar)
}
animate(background) toBe {
height(h, horizontalGravity = Gravity.LEFT, verticalGravity = Gravity.TOP)
}
}
scrollview.setOnScrollChangeListener(NestedScrollView.OnScrollChangeListener { v, scrollX, scrollY, oldScrollX, oldScrollY ->
val percent = scrollY * 1f / v.maxScrollAmount
animation.setPercent(percent)
})
Chain animations
Just ask the kotlin's animation if he wants to execute another animation after, using thenCouldYou animate
please(duration = 1000L) {
animate(image, withCameraDistance = 500f) toBe {
flippedHorizontally()
}
}.thenCouldYou(duration = 500L) {
animate(image, withCameraDistance = 1000f) toBe {
alpha(0.5f)
}
}.start()
Apply directly
If you want your animation to be applied directly, be bossy with kotlin and force it to apply it using now()
!
please {
animate(view) toBe {
outOfScreen(Gravity.BOTTOM)
}
}.now();
Reset
Use reset
to return to the initial state of views
animation.reset():
List of expectations
please {
animate(view) { //toBe is optional
rightOf(view, marginDp=)
leftOf(view, marginDp=)
belowOf(view, marginDp=)
aboveOf(view, marginDp=)
originalPosition()
sameCenterAs(view, horizontal=, vertical=)
sameCenterHorizontalAs(view)
sameCenterVerticalAs(view)
centerInParent(horizontal=, vertical=)
centerVerticalInParent()
centerHorizontalInParent()
centerBetweenViews(view1, view2, horizontal, vertical)
centerBetweenViewAndParent(otherView, horizontal, vertical, toBeOnRight, toBeOnBottom)
topOfItsParent()
rightOfItsParent()
bottomOfItsParent()
leftOfItsParent()
alignBottom(otherView, marginDp=)
alignTop(otherView)
alignLeft(otherView)
alignRight(otherView)
outOfScreen(gravitiy) //Gravity.LEFT / Gravity.RIGHT / Gravity.TOP / Gravity.BOTTOM
alpha(alpha)
sameAlphaAs(otherView)
visible()
invisible()
custom(object: CustomAnimExpectation(){ ... })
originalScale()
scale(scaleX, scaleY)
height(height, keepRatio=, useDp=)
width(width, keepRatio=, useDp=)
sameScaleAs(otherView)
sameWidthAs(otherView)
sameHeightAs(otherView)
marginTop(margin)
marginBottom(margin)
marginRight(margin)
marginLeft(margin)
paddingTop(padding)
paddingBottom(padding)
paddingRight(padding)
paddingLeft(padding)
textColor(textColor)
textSize(textSize)
backgroundAlpha(alpha)
rotated(rotation)
vertical(bottomOfViewAtLeft)
atItsOriginalRotation()
}