圆形波动效果按钮

最新推荐文章于 2022-02-24 15:26:50 发布

ReminderFish

最新推荐文章于 2022-02-24 15:26:50 发布

阅读量1k

点赞数 1

分类专栏： Android 文章标签：控件

本文链接：https://blog.csdn.net/kingyc123456789/article/details/53913518

版权

Android 专栏收录该内容

51 篇文章 2 订阅

订阅专栏

最近做项目需要写一个圆形按钮外围有（两个两层波动效果那种）
那就只有自定义控件啦
思路：先画一个渐变颜色的圆形：

//设置渐变色
shader = new LinearGradient(
                0, 0,
                0, radius,
                0xff80abe7,
                0xff4c71a6,
                Shader.TileMode.MIRROR);
paint.setShader(shader);
canvas.drawOval(..,paint)

同样的画两个外围的圆形，由于后面画的图会覆盖前面的，所以最大的圆形先画

关键：使用属性动画动态更新数值
由于需要更新的数值有：外围圆形的半径，第二层圆形的半径，和颜色透明度
就需要自定义一个实体类，使用代码如下：

  ValueAnimator mValueAnimator = ValueAnimator.ofObject(new WaveChangeDataEvaluator(), new WaveChangeData(0, 0, 128), new WaveChangeData(insideRadius + outsideRadius, insideRadius, 0));
        mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        mValueAnimator.setRepeatMode(ValueAnimator.RESTART);
        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                WaveChangeData currentWaveChangeData = (WaveChangeData) animation.getAnimatedValue();
                outsideRadiusChange = currentWaveChangeData.outsideRadiusChange;
                insideRadiusChange = currentWaveChangeData.insideRadiusChange;
                alphaChange = currentWaveChangeData.alpha;
                invalidate();
            }
        });
        mValueAnimator.setInterpolator(new LinearInterpolator());
        mValueAnimator.setDuration(1500);
        mValueAnimator.start();

可以知道ValueAnimator.ofObject方法第一个参数是定义对象的变化计算方式，后面两个参数就是变化的起始值和最终值
在就是监听属性动画的数值变化来刷新控件

WaveChangeDataEvaluator的代码：

 public class WaveChangeDataEvaluator implements TypeEvaluator {

        @Override
        public Object evaluate(float fraction, Object startValue, Object endValue) {
            WaveChangeData start = (WaveChangeData) startValue;
            WaveChangeData end = (WaveChangeData) endValue;
            float outsideRadiusChange = start.outsideRadiusChange + (fraction * (end.outsideRadiusChange - start.outsideRadiusChange));
            float insideRadiusChange = start.insideRadiusChange + (fraction * (end.insideRadiusChange - start.insideRadiusChange));
            int alpha = start.alpha + (int) (fraction * (end.alpha - start.alpha));
            WaveChangeData result = new WaveChangeData(outsideRadiusChange, insideRadiusChange, alpha);
            return result;
        }

    }