Android颜色渐变动画效果的实现

简介: 本文介绍了在Android中实现颜色渐变动画效果的方法,重点讲解了插值器(TypeEvaluator)的使用与自定义。通过Android自带的颜色插值器ArgbEvaluator,可以轻松实现背景色的渐变动画。文章详细分析了ArgbEvaluator的核心代码,并演示了如何利用Color.colorToHSV和Color.HSVToColor方法自定义颜色插值器MyColorEvaluator。最后提供了完整的源码示例,包括ColorGradient视图类和MyColorEvaluator类,帮助开发者更好地理解和应用颜色渐变动画技术。

系列文章目录

Android颜色渐变动画效果的实现

文章最后有源码

前言

案例效果的实现比较简单,利用Android自带的颜色插值器ArgbEvaluator()进行计算即可,而本文的重点就是讲讲插值器。

效果图:
1.gif

一、Android中插值器TypeEvaluator。

TypeEvaluator是一个接口,在开发中可以自定义该接口实例,利用ValueAnimator的setEvaluator(TypeEvaluator)方法来控制动画的更新计算表达式。在日常开发中,不可能只是需要操纵单一数值的变化,如果需要同时操纵对象的多个属性,如定义动画的x,y移动的坐标等,那就需要对TypeEvaluator有所了解了。

二、案例效果实现

1.利用Android自带的颜色插值器ArgbEvaluator

  ValueAnimator colorAnim = ObjectAnimator.ofInt(this, "backgroundColor", RED, BLUE);
        colorAnim.setDuration(4000);
        colorAnim.setEvaluator(new ArgbEvaluator());
        colorAnim.setRepeatCount(ValueAnimator.INFINITE);
        colorAnim.setRepeatMode(ValueAnimator.REVERSE);
        colorAnim.start();
AI 代码解读

2.看看Android自带颜色插值器ArgbEvaluator核心代码

    @Override
    public Object evaluate(float fraction, Object startValue, Object endValue) {
   
        int startInt = (Integer) startValue;
        float startA = ((startInt >> 24) & 0xff) / 255.0f;
        float startR = ((startInt >> 16) & 0xff) / 255.0f;
        float startG = ((startInt >>  8) & 0xff) / 255.0f;
        float startB = ( startInt        & 0xff) / 255.0f;

        int endInt = (Integer) endValue;
        float endA = ((endInt >> 24) & 0xff) / 255.0f;
        float endR = ((endInt >> 16) & 0xff) / 255.0f;
        float endG = ((endInt >>  8) & 0xff) / 255.0f;
        float endB = ( endInt        & 0xff) / 255.0f;

        // 将sRGB转化成线性
        startR = (float) Math.pow(startR, 2.2);
        startG = (float) Math.pow(startG, 2.2);
        startB = (float) Math.pow(startB, 2.2);

        endR = (float) Math.pow(endR, 2.2);
        endG = (float) Math.pow(endG, 2.2);
        endB = (float) Math.pow(endB, 2.2);

        //在线性空间中计算插值的颜色
        float a = startA + fraction * (endA - startA);
        float r = startR + fraction * (endR - startR);
        float g = startG + fraction * (endG - startG);
        float b = startB + fraction * (endB - startB);

        //转换回sRGB在[0..255]范围
        a = a * 255.0f;
        r = (float) Math.pow(r, 1.0 / 2.2) * 255.0f;
        g = (float) Math.pow(g, 1.0 / 2.2) * 255.0f;
        b = (float) Math.pow(b, 1.0 / 2.2) * 255.0f;

        return Math.round(a) << 24 | Math.round(r) << 16 | Math.round(g) << 8 | Math.round(b);
    }
AI 代码解读

3.根据ArgbEvaluator的实现来自定义一个颜色插值器

public class MyColorEvaluator implements TypeEvaluator
AI 代码解读

接下来换一种颜色的计算方式,在本人看相关api的过程中,发现Color中有colorToHSV和HSVToColor的方法,于是在网上找了一个HVS的计算方式。(以下代码来源于网络)。

 @Override
    public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
   
        Color.colorToHSV(startValue,startHsv);
        Color.colorToHSV(endValue,endHsv);
        int alpha = startValue >> 24 + (int) ((endValue >> 24 - startValue >> 24) * fraction);
        // 计算当前动画完成度(fraction)所对应的颜色值
        if (endHsv[0] - startHsv[0] > 180) {
   
            endHsv[0] -= 360;
        } else if (endHsv[0] - startHsv[0] < -180) {
   
            endHsv[0] += 360;
        }
        outHsv[0] = startHsv[0] + (endHsv[0] - startHsv[0]) * fraction;
        if (outHsv[0] > 360) {
   
            outHsv[0] -= 360;
        } else if (outHsv[0] < 0) {
   
            outHsv[0] += 360;
        }
        outHsv[1]=startHsv[1]+(endHsv[1]-startHsv[1])*fraction;
        outHsv[2]=startHsv[2]+(endHsv[2]-startHsv[2])*fraction;


        return Color.HSVToColor(alpha,outHsv);

    }
AI 代码解读

4.使用自己定义的颜色插值器MyColorEvaluator

 ValueAnimator colorAnim = ObjectAnimator.ofInt(this, "backgroundColor", RED, BLUE);
        colorAnim.setDuration(4000);
        colorAnim.setEvaluator(new MyColorEvaluator());
        colorAnim.setRepeatCount(ValueAnimator.INFINITE);
        colorAnim.setRepeatMode(ValueAnimator.REVERSE);
        colorAnim.start();
AI 代码解读

三、源码

ColorGradient.java:

public class ColorGradient extends View {
   

    public ColorGradient(Context context) {
   
        super(context);
    }

    public ColorGradient(Context context, @Nullable AttributeSet attrs) {
   
        super(context, attrs);
        animation();
    }

    public ColorGradient(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
   
        super(context, attrs, defStyleAttr);
    }
    private void animation(){
   
        ValueAnimator colorAnim = ObjectAnimator.ofInt(this, "backgroundColor", RED, BLUE);
        colorAnim.setDuration(4000);
        colorAnim.setEvaluator(new MyColorEvaluator());
        colorAnim.setRepeatCount(ValueAnimator.INFINITE);
        colorAnim.setRepeatMode(ValueAnimator.REVERSE);
        colorAnim.start();
    }


}
AI 代码解读

MyColorEvaluator.java:

public class MyColorEvaluator implements TypeEvaluator<Integer> {
   
    float[] startHsv=new float[3];
    float[] endHsv=new float[3];
    float[] outHsv=new float[3];

    @Override
    public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
   
        Color.colorToHSV(startValue,startHsv);
        Color.colorToHSV(endValue,endHsv);
        int alpha = startValue >> 24 + (int) ((endValue >> 24 - startValue >> 24) * fraction);
        // 计算当前动画完成度(fraction)所对应的颜色值
        if (endHsv[0] - startHsv[0] > 180) {
   
            endHsv[0] -= 360;
        } else if (endHsv[0] - startHsv[0] < -180) {
   
            endHsv[0] += 360;
        }
        outHsv[0] = startHsv[0] + (endHsv[0] - startHsv[0]) * fraction;
        if (outHsv[0] > 360) {
   
            outHsv[0] -= 360;
        } else if (outHsv[0] < 0) {
   
            outHsv[0] += 360;
        }
        outHsv[1]=startHsv[1]+(endHsv[1]-startHsv[1])*fraction;
        outHsv[2]=startHsv[2]+(endHsv[2]-startHsv[2])*fraction;


        return Color.HSVToColor(alpha,outHsv);

    }
}
AI 代码解读
目录
打赏
0
3
3
0
100
分享
相关文章
Android利用SVG实现动画效果
本文介绍了如何在Android中利用SVG实现动画效果。首先通过定义`pathData`参数(如M、L、Z等)绘制一个简单的三角形SVG图形,然后借助`objectAnimator`实现动态的线条绘制动画。文章详细讲解了从配置`build.gradle`支持VectorDrawable,到创建动画文件、关联SVG与动画,最后在Activity中启动动画的完整流程。此外,还提供了SVG绘制原理及工具推荐,帮助开发者更好地理解和应用SVG动画技术。
173 30
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
本文介绍了一款受游戏“金铲铲之战”启发的Android自定义View——线条等待动画的实现过程。通过将布局分为10份,利用`onSizeChanged`测量最小长度,并借助画笔绘制动态线条,实现渐变伸缩效果。动画逻辑通过四个变量控制线条的增长与回退,最终形成流畅的等待动画。代码中详细展示了画笔初始化、线条绘制及动画更新的核心步骤,并提供完整源码供参考。此动画适用于加载场景,提升用户体验。
340 5
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
Android背景颜色滑动渐变效果(上下滑动,左右滑动)
本文分享了一种通过ScrollView实现滑动变色效果的简单方法。主要步骤包括:1) 在布局中添加ScrollView并确保内容可滑动;2) 获取屏幕高度;3) 获取控件高度;4) 使用GradientDrawable设置渐变颜色;5) 根据控件与屏幕高度比例动态调整颜色数量。示例代码展示了如何在滑动时根据比例改变背景颜色,实现流畅的视觉效果。
103 0
Android SVG动画详细例子
本文详细讲解了在Android中利用SVG实现动画效果的方法,通过具体例子帮助开发者更好地理解和应用SVG动画。文章首先展示了动画的实现效果,接着回顾了之前的文章链接及常见问题(如属性名大小写错误)。核心内容包括:1) 使用阿里图库获取SVG图形;2) 借助工具将SVG转换为VectorDrawable;3) 为每个路径添加动画绑定属性;4) 创建动画文件并关联SVG;5) 在ImageView中引用动画文件;6) 在Activity中启动动画。文末还提供了完整的代码示例和源码下载链接,方便读者实践操作。
238 65
Android线条等待动画JMWorkProgress(可添加依赖直接使用)
这是一篇关于Android线条等待动画JMWorkProgress的教程文章,作者计蒙将其代码开源至GitHub,提升可读性。文章介绍了如何通过添加依赖库使用该动画,并详细讲解了XML与Java中的配置方法,包括改变线条颜色、宽度、添加文字等自定义属性。项目已支持直接依赖集成(`implementation &#39;com.github.Yufseven:JMWorkProgress:v1.0&#39;`),开发者可以快速上手实现炫酷的等待动画效果。文末附有GitHub项目地址,欢迎访问并点赞支持!
96 26
Android自定义view之围棋动画(化繁为简)
本文介绍了Android自定义View的动画实现,通过两个案例拓展动态效果。第一个案例基于`drawArc`方法实现单次动画,借助布尔值控制动画流程。第二个案例以围棋动画为例,从简单的小球直线运动到双向变速运动,最终实现循环动画效果。代码结构清晰,逻辑简明,展示了如何化繁为简实现复杂动画,帮助读者拓展动态效果设计思路。文末提供完整源码,适合初学者和进阶开发者学习参考。
Android自定义view之围棋动画(化繁为简)
Android自定义view之围棋动画
本文详细介绍了在Android中自定义View实现围棋动画的过程。从测量宽高、绘制棋盘背景,到创建固定棋子及动态棋子,最后通过属性动画实现棋子的移动效果。文章还讲解了如何通过自定义属性调整棋子和棋盘的颜色及动画时长,并优化视觉效果,如添加渐变色让白子更明显。最终效果既可作为围棋动画展示,也可用作加载等待动画。代码完整,适合进阶开发者学习参考。
|
3月前
|
Android翻转动画(卡片翻转效果)
本文介绍了如何实现卡片翻转动画效果,通过Android中的ObjectAnimator结合不同插值器(LinearInterpolator、AccelerateInterpolator、DecelerateInterpolator)完成平滑过渡。示例中以按钮点击触发动画,核心逻辑包括判断视图可见性、设置旋转角度及处理初始Bug(如第一次点击异常)。最终提供完整代码(Java与XML布局),并指出将按钮事件替换为屏幕监听即可满足右滑触发需求。适合初学者学习动画实现原理。
114 0
Android自定义view获取attr中自定义颜色的问题
本文针对Android自定义View在布局中设置颜色时遇到的问题进行分析与解决。问题表现为通过`getAttributeIntValue`方法获取颜色时,使用资源引用(如`@color/colorPrimary`)无法正确获取,而直接使用十六进制颜色值(如`#ff0000`)则正常。经过源码分析,发现是属性格式定义及获取方式不当导致。解决方案为将`attrs`文件中颜色属性的格式改为`reference|color`,并使用`TypedArray`的`getColor`方法获取颜色值,确保资源引用和直接颜色值均能正确解析。希望本文能帮助遇到类似问题的开发者。
Android中SlidingDrawer利用透明动画提示效果
本文介绍了在Android中使用`SlidingDrawer`实现带有透明动画提示效果的方法。通过XML布局配置`SlidingDrawer`的把手(handle)和内容(content),结合Activity中的代码实现动态动画效果。最终实现了交互性强、视觉效果良好的滑动抽屉功能。
Android中SlidingDrawer利用透明动画提示效果

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问