渐变色动画

时间:2015-07-13 12:32:26

标签: android performance animation gradient

我想要实现的目标:

径向渐变,其开始和结束颜色随着时间的推移从一种定义的颜色平滑地变化到另一种颜色。

到目前为止我尝试过:

像这样使用ObjectAnimator:

        searchAnimator = ObjectAnimator.ofFloat(drawThread, new Property<DrawThread, Float>(Float.TYPE, "fraction") {
            @Override
            public Float get(DrawThread object) {
                return object.fraction;
            }

            @Override
            public void set(DrawThread object, Float value) {
                object.setFraction(value);
            }
        }, 0, 1);
        searchAnimator.setDuration(maxSearchDuration);
        searchAnimator.setInterpolator(new LinearInterpolator());

随着时间的推移,这将调用DrawThread.setFraction(value);。在线程内部,我使用Canvas执行SurfaceView绘图,如下所示:

mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setDither(true);
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
radius = (int) Math.sqrt(canvas.getWidth() / 2 * canvas.getWidth() / 2 + canvas.getHeight() / 2 * canvas.getHeight() / 2);
//calculating colors for current fraction using ARGBEvaluator
int start = (int) argbEvaluator.evaluate(fraction, colors[0].start, colors[1].start);
int end = (int) argbEvaluator.evaluate(fraction, colors[0].end, colors[1].end);
//end
mPaint.setShader(new RadialGradient(canvas.getWidth() / 2, canvas.getHeight() / 2,
      radius, start, end, Shader.TileMode.CLAMP));
canvas.drawCircle(canvas.getWidth() / 2, canvas.getHeight() / 2, radius, mPaint);

问题:

  1. 渐变不平滑。图像看起来像低色
  2. 表现非常低。我在FullHD Snapdragon 801设备上获得了16 FPS。
  3. 所以我想问的是提高性能的任何帮助(甚至是完全不同的方式),并提高最终的图像质量。

2 个答案:

答案 0 :(得分:1)

您可以像这样设置渐变中的颜色变化:

int colorFrom = ContextCompat.getColor(this, R.color.red);
int colorTo = ContextCompat.getColor(this, R.color.blue);
ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
colorAnimation.setDuration(2000);

int color1 = ContextCompat.getColor(this, R.color.red);
int color2 = ContextCompat.getColor(this, R.color.green);
GradientDrawable gradientDrawable = new GradientDrawable(
            GradientDrawable.Orientation.TOP_BOTTOM, new int[]{color1, color2});
gradientDrawable.setGradientType(GradientDrawable.RADIAL_GRADIENT);

colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

        @Override
        public void onAnimationUpdate(ValueAnimator animator) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                gradientDrawable.setColors(new int[]{(int) animator.getAnimatedValue(), color2});
                viewWithGradientBg.setBackground(gradientDrawable);
            }
        }

    });

colorAnimation.start();

答案 1 :(得分:0)

也许这段伪代码有帮助:

private ValueAnimator colorAnimation;

  colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), startColor, endColor); 
                                                          // you can add more colors here 

    colorAnimation.addUpdateListener(new AnimatorUpdateListener() {

        @Override
        public void onAnimationUpdate(ValueAnimator animator) {
            yourView.setBackgroundColor((Integer) animator
                    .getAnimatedValue());
        }

    });

    colorAnimation.setDuration(maxSearchDuration);
    colorAnimation.start();
}