Animate image's saturation

Question

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

Luciferase

Post the code you're using to apply a custom saturation value on the image – Simulcast

Answer 1

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

Simulcast

That was simple. Thanks for the snippet! – Luciferase

Answer 2

You have to animate it yourself!

Should not be that hard.

See the ColorMatrix example in the API's demos folder.

http://alvinalexander.com/java/jwarehouse/android-examples/platforms/android-2/samples/ApiDemos/src/com/example/android/apis/graphics/ColorMatrixSample.java.shtml

You can extend Drawable and increment a value in the onDraw method and then set the filter accordingly.

You get the animation by calling invalidate() every few ms in onDraw. Be sure to slow down the iterations by puting the thread to sleep. Thread.sleep(40); for 25 fps

Israelitish