100字范文 > Android特效View之二之闪闪发光Shimmer字体特效

Android特效View之二之闪闪发光Shimmer字体特效

时间：2021-09-03 00:10:20

Android特效View之二之闪闪发光Shimmer字体特效
Facebook开源了一款加载效果工具Shimmer，可以实现字体的闪闪发光效果，效果如下

链接地址在这里/facebook/Shimmer，不过是针对iOS开发实现的，看了下没看懂（还没搞过object-c，囧ZR），所以随手搜了Shimmer android，居然真有人做了，在这里/RomainPiel/Shimmer-android，下面是效果图

实现的核心部分是使用线性渐变LinearGradient，然后绘图的时候不断将渐变平移来达到闪动的效果，平移量的控制使用了属性动画，想了一下这部分也可以自己来控制，下面就来做个简单改造：

[java]view plaincopyprint?publicclassMyTextViewextendsTextView{ privateLinearGradientmLinearGradient; privateMatrixmGradientMatrix; privatePaintmPaint; privateintmViewWidth=0; privateintmTranslate=0; privatebooleanmAnimating=true; publicMyTextView(Contextcontext,AttributeSetattrs){ super(context,attrs); } @Override protectedvoidonSizeChanged(intw,inth,intoldw,intoldh){ super.onSizeChanged(w,h,oldw,oldh); if(mViewWidth==0){ mViewWidth=getMeasuredWidth(); if(mViewWidth>0){ mPaint=getPaint(); mLinearGradient=newLinearGradient(-mViewWidth,0,0,0, newint[]{0x33ffffff,0xffffffff,0x33ffffff}, newfloat[]{0,0.5f,1},Shader.TileMode.CLAMP); mPaint.setShader(mLinearGradient); mGradientMatrix=newMatrix(); } } } @Override protectedvoidonDraw(Canvascanvas){ super.onDraw(canvas); if(mAnimating&&mGradientMatrix!=null){ mTranslate+=mViewWidth/10; if(mTranslate>2*mViewWidth){ mTranslate=-mViewWidth; } mGradientMatrix.setTranslate(mTranslate,0); mLinearGradient.setLocalMatrix(mGradientMatrix); postInvalidateDelayed(50); } } }

继承一个TextView，因为渐变的平移需要view的宽度，所以在onSizeChanged里将各个需要的元素初始化，在linearGradient里定义了渐变的颜色和颜色的变化位置，然后设置给绘图使用的paint。onDraw()方法里控制偏移量的计算，这里每次移动宽度的1/10，postInvalidateDelay()里设置每一帧绘制的时间，也就是控制闪动的快慢。效果如下

评论里建议的从中间到两边的效果

从中间到两边需要对称的变换，这里是将中间的光斑逐渐扩大覆盖到整个文字，还是使用LinearGradient，只是动作从平移变成了缩放。一开始想到的是两个光斑从中间开始分别左右移动，但因为绘制的时候使用一个paint，在paint里设置相应的shader，用这种思路实现两边对称的变换，试了一下没有达到好的效果，暂时还没想到更好的办法，欢迎给出各种建议。下面修改的代码

[java]view plaincopyprint?publicclassMyTextViewextendsTextView{ privateLinearGradientmLinearGradient; privateMatrixmGradientMatrix; privatePaintmPaint; privateintmViewWidth=0; privatefloatmScale=0.1f; privatebooleanmAnimating=true; publicMyTextView(Contextcontext,AttributeSetattrs){ super(context,attrs); } @Override protectedvoidonSizeChanged(intw,inth,intoldw,intoldh){ super.onSizeChanged(w,h,oldw,oldh); if(mViewWidth==0){ mViewWidth=getMeasuredWidth(); if(mViewWidth>0){ mPaint=getPaint(); mLinearGradient=newLinearGradient(0,0,mViewWidth,0, newint[]{0x33ffffff,0xffffffff,0x33ffffff}, newfloat[]{0.0f,0.5f,1.0f},Shader.TileMode.CLAMP); mPaint.setShader(mLinearGradient); mGradientMatrix=newMatrix(); } } } @Override protectedvoidonDraw(Canvascanvas){ super.onDraw(canvas); if(mAnimating&&mGradientMatrix!=null){ mScale+=0.1f; if(mScale>1.2f){ mScale=0.1f; } mGradientMatrix.setScale(mScale,mScale,mViewWidth/2,0); mLinearGradient.setLocalMatrix(mGradientMatrix); postInvalidateDelayed(100); } } }

示例下载：/detail/xu_fu/7254849