Search code examples
androidandroid-animationandroid-imageandroid-transitions

Animate image's saturation


Is it possible to animate the saturation of an image (e.g. png) over time? For example from grayscale to full color. Plus if I can use an Interpolator.

I have seen the EffectFactory and the ColorMatrix classes but I cannot combine them with an animation/transition.

E.g. applying grayscale saturation on a Drawable drawable:

ColorMatrix matrix = new ColorMatrix();
matrix.setSaturation(0);

ColorMatrixColorFilter filter = new ColorMatrixColorFilter(matrix);
drawable.setColorFilter(filter);

and for full saturation later:

matrix.setSaturation(1);

For anyone interested my full solution based on Simon's answer:

final ColorMatrix matrix = new ColorMatrix();
final Drawable drawable = ... ;

ValueAnimator animation = ValueAnimator.ofFloat(0f, 1f);
animation.setDuration(1000);
//   animation.setInterpolator();
animation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        matrix.setSaturation(animation.getAnimatedFraction());
        ColorMatrixColorFilter filter = new ColorMatrixColorFilter(matrix);
        drawable.setColorFilter(filter);
    }
});
animation.start();

Solution

  • It certainly could be achieved with a ValueAnimator:

    ValueAnimator animation = ValueAnimator.ofFloat(0f, 1f);
    animation.setDuration(1000);
    animation.addUpdateListener(new AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            matrix.setSaturation(animation.getAnimatedFraction());
        }
    });
    animation.start();