Animate image's saturation

2019-04-28 15:01发布

问题:

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

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


回答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