/ Animations

A Kotlin way to declare and run beautiful animations

A Kotlin way to declare and run beautiful animations

Kotlin Please Animate

Kotlin, please, can you animate my views ?

A Kotlin way to declare and run beautiful animations ! Please be gentle with Kotlin :)

Android app on Google Play

gif

please {
   animate(avatar) toBe {
      bottomOfItsParent(marginDp = 36f)
      leftOfItsParent(marginDp = 16f)
      width(40, keepRatio = true, toDp = true)
   }
}.start()

Download

Buy Me a Coffee at ko-fi.com

In your module 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

gif

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()
}

GitHub