Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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();
like image 398
Diolor Avatar asked Aug 22 '14 18:08

Diolor


1 Answers

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();
like image 97
Simon Marquis Avatar answered Sep 21 '22 11:09

Simon Marquis