zoukankan      html  css  js  c++  java
  • 仿微信主界面导航栏图标字体颜色的变化

    在全部的移动产品中,微信的界面做的非常简洁,简单,我对微信主界面影响最深的就是微信底部导航栏的图标,以及字体颜色的变化。一直都想实现下面,今天有空。就大体的模仿者做了一遍。

    效果图例如以下:

    123.gif


    分析:
    底部主要分为图标的渐变,字体颜色的渐变。
    图标的颜色的渐变:主要是通过canvas绘制两个不同的图片,控制其图片的alpha透明度,来达到图标的渐变。
    字体颜色:字体颜色就非常好说了。Animator动画框架应该非常熟悉了。在Animator框架中,有一个TypeEven是来计算十六进制色值的,我们能够通过Animator来控制颜色的渐变。


    通过代码来说明:
    图标:底部一共是有八个图标。一个空白状态,一个是带颜色的状态。

    关键代码:
            bitmapPaint.setAlpha(255 - currentAlpha );
            canvas.drawBitmap(normalBitmapsrcRect , dstRect , bitmapPaint);
            bitmapPaint.setAlpha(currentAlpha );
            canvas.drawBitmap(pitchBitmapsrcRect , dstRect , bitmapPaint);  

    没错,就是两个图片同一时候画,一个画的透明度高  一个低。  不知道微信真正的实现方式是啥样的。哈哈……

    再说文字的实现:
    既然都把图片给画出来了,就顺带把文字也给画了吧,非常easy的代码:
            if (text != null ) {
                textPaint.setColor(textColor);
                canvas.drawText(texttextXtextYtextPaint); 
            }  

    多简单。然而字体颜色的变化那,就是通过textColor的变化。在每次绘制的时候,动画改变textColor的值,看一下代码:
    private void initTextColorAnimator(){
            colorAnimator = ValueAnimator.ofInt(DEFULT_TEXT_COLOR,changeColor) ;
            colorAnimator.setEvaluator(new ArgbEvaluator());
            colorAnimator.addUpdateListener(new AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    textColor = (Integer) animation.getAnimatedValue();
                    Log.i("bottom"textColor + " =  ") ; 
                }
            });
            colorAnimator.setDuration(100) ;
            colorAnimator.setInterpolator(new LinearInterpolator());
            
        } 

     Animator,属性动画,Android4.0之后的属性动画是非常强大的,不论什么的动画都能够非常方便的做出来。
    通过colorAnimator来控制色值的渐变,关键点: colorAnimator.setEvaluator(new ArgbEvaluator());
    要告诉Animator这个是色值的渐变,要通过TypeEventor来控制变化。
    动画运行之后,不要急着去start,这里面是没有start的。

    看在一点一点滑动的时候的progress的变化代码:
    public void setProgress(float progress){
            if (progress > 100) {
                throw new RuntimeException("progress do not > 100") ; 
            }
            currentAlpha = (int) (255 * progress) ; 
            colorAnimator.setCurrentPlayTime((long) (progress * 100));
            invalidate(); 
        } 

    这个看到了吧,通过setCurrentPlayTime来给textColor对应的进度的色值。

     OK 这就是这个关键代码了,非常easy的代码。


    完整代码例如以下:

    百度网盘下载地址: http://pan.baidu.com/s/1c0jidZq 


  • 相关阅读:
    HDU 3415 Max Sum of Max-K-sub-sequence 最长K子段和
    Android Fragment 真正彻底的解决(下一个)
    【数据分析面试题】一个 面试题,我的回答
    Swift初体验(两)
    MyEclipse10.0 集成 SVN
    CFileDialog 打开文件夹文件 保存文件夹文件
    基于thinkphp的uploadify上传图功能
    近20家银行手机银行签名被非法滥用风险分析
    设计模式【6】:适配器模式【接口适配】
    【学习笔记】编译原理-有限自己主动机
  • 原文地址:https://www.cnblogs.com/bhlsheji/p/5400721.html
Copyright © 2011-2022 走看看