Blink animation Kotlin

48 Views Asked by At

I have been struggling on this for a few days. I implemented a blink animation code for TextView. However, I think I need to fix little bit of fromAlpha toAlpha. It seems gradually fade in and fade out if you just put fromAplha = 0.0f and toAplha = 1.0f. How can I make it without fade like flicker? Please help me.

private fun View.blink(
    times: Int = Animation.INFINITE,
    duration: Long = 800L,
    offset: Long = 20L,
    minAlpha: Float = 0.0f,
    maxAlpha: Float = 1.0f,
    repeatMode: Int = Animation.ABSOLUTE,
) {
    startAnimation(
        AlphaAnimation(minAlpha, maxAlpha).also {
            it.duration = duration
            it.startOffset = offset
            it.repeatMode = repeatMode
            it.repeatCount = times
        },
    )
}
2

There are 2 best solutions below

1
Tenfour04 On BEST ANSWER

You can create a custom interpolator for the animation that uses a step function.

object StepInterpolator: BaseInterpolator() {
    override fun getInterpolation(input: Float) =
       round(input)
}

private fun View.blink(
    times: Int = Animation.INFINITE,
    duration: Long = 800L,
    offset: Long = 20L,
    minAlpha: Float = 0.0f,
    maxAlpha: Float = 1.0f,
    repeatMode: Int = Animation.ABSOLUTE,
) {
    startAnimation(
        AlphaAnimation(minAlpha, maxAlpha).apply {
            duration = duration
            startOffset = offset
            repeatMode = repeatMode
            repeatCount = times
            interpolator = StepInterpolator
        },
    )
}
2
AndrewBloom On

The beauty of Android is that you can actually check the source code, in case of AlphaAnimation in here https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/animation/AlphaAnimation.java you can see how it works and it's actually a pretty simple class. In particular,

    /**
     * Changes the alpha property of the supplied {@link Transformation}
     */
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        final float alpha = mFromAlpha;
        t.setAlpha(alpha + ((mToAlpha - alpha) * interpolatedTime));
    }

you can see how this function is responsible to set the alpha over time. So you can copy/paste the whole class, call it something FlickerAnimation and just change that line to something that suit you, or maybe you can use AlphaAnimation as base class of your FlickerAnimation and just override the method above. An on/off behaviour could be something like:

t.setAlpha((interpolatedTime < 0.5) ? mFromAlpha : mToAlpha);

interpolatedTime varies from 0.0 and 1.0, as per docs https://developer.android.com/reference/android/view/animation/Animation#applyTransformation(float,%20android.view.animation.Transformation) In general, to make beautiful animations you will have to tweak the math function accordingly, for example in this case you may want to have instead of an on/off function, an on-transition-off one tweaking the times for the three states.