[Solved] Custom Animation Android [closed]

Question

First add this library

compile 'com.bartoszlipinski:viewpropertyobjectanimator:1.4.5'

Then you need the following extension functions:

fun View.objectAnimate() = ViewPropertyObjectAnimator.animate(this)

private typealias OnMeasuredCallback = (view: View, width: Int, height: Int) -> Unit

inline fun View.waitForMeasure(crossinline callback: OnMeasuredCallback) {
    val view = this
    val width = view.getWidth()
    val height = view.getHeight()

    if (width > 0 && height > 0) {
        callback(view, width, height)
        return
    }

    view.getViewTreeObserver().addOnPreDrawListener(object : ViewTreeObserver.OnPreDrawListener {
        override fun onPreDraw(): Boolean {
            val observer = view.getViewTreeObserver()
            if (observer.isAlive()) {
                observer.removeOnPreDrawListener(this)
            }

            callback(view, view.getWidth(), view.getHeight())

            return true
        }
    })
}

fun animateTogether(vararg animators: Animator) = AnimatorSet().apply {
    playTogether(*animators)
}


inline fun createAnimatorListener(
    crossinline onAnimationEnd: (Animator) -> Unit = {},
    crossinline onAnimationStart: (Animator) -> Unit = {},
    crossinline onAnimationCancel: (Animator) -> Unit = {},
    crossinline onAnimationRepeat: (Animator) -> Unit = {}
) = object : Animator.AnimatorListener {
    override fun onAnimationRepeat(animation: Animator) = onAnimationRepeat(animation)

    override fun onAnimationEnd(animation: Animator) = onAnimationEnd(animation)

    override fun onAnimationCancel(animation: Animator) = onAnimationCancel(animation)

    override fun onAnimationStart(animation: Animator) = onAnimationStart(animation)
}

inline fun AnimatorSet.onAnimationEnd(crossinline onAnimationEnd: (Animator) -> Unit): AnimatorSet = apply {
    addListener(createAnimatorListener(onAnimationEnd = onAnimationEnd))
}

fun View.animateFadeOut(duration: Long = 325): Animator = run {
    alpha = 1f
    objectAnimate()
        .alpha(0f)
        .setDuration(duration)
        .get()
}

fun View.animateFadeIn(duration: Long = 325): Animator = run {
    alpha = 0f
    objectAnimate()
        .alpha(1f)
        .setDuration(duration)
        .get()
}

private fun View.animateTranslateXBy(from: Int, by: Int, duration: Long = 325): Animator = run {
    translationX = from.toFloat()
    objectAnimate()
        .translationXBy(by.toFloat())
        .setDuration(duration)
        .get()
}

private fun View.animateTranslateYBy(from: Int, by: Int, duration: Long = 325): Animator = run {
    translationY = from.toFloat()
    objectAnimate()
        .translationYBy(by.toFloat())
        .setDuration(duration)
        .get()
}

fun View.animateTranslateIn(width: Int, direction: Int, duration: Long = 325): Animator =
    animateTranslateXBy(
        from = direction * width,
        by = (-1) * direction * width,
        duration = duration
    )

fun View.animateTranslateOut(width: Int, direction: Int, duration: Long = 325): Animator =
    animateTranslateXBy(
        from = 0,
        by = (-1) * direction * width,
        duration = duration
    )

// also translateInFromTop, translateInFromBottom, translateOutToTop, translateOutToBottom

Then you just need to code the animation. It kinda looks like this:

newLayout.waitForMeasure { _, _, _ -> 
    animateTogether(
        topText.translateInFromTop(),
        imageOfBus.translateInFromTop().apply {
            startDelay = 325L
        },
        bottomText.translateInFromBottom().apply {
            startDelay = 500L
        },
        bottomButton1.translateInFromBottom().apply {
            startDelay = 550L
        },
        bottomButton2.translateInFromBottom().apply {
            startDelay = 600L
        },
        bottomButton3.translateInFromBottom().apply {
            startDelay = 650L
        },
    ).onFinish {
       // ...
    }.start()
}

Blurring is actually not supported on Android, like at all, except with RenderScript, so that is “left as homework” (i have no idea what you can do to make that happen).

Fading in a #80000000 background is easy, the box blur is tricky.

Also I didn’t add pseudocode for everything, but hopefully this is enough to start out.

Accepted Answer