经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » Android » 查看文章
Android实现渐变色水波纹效果
来源:jb51  时间:2021/11/24 15:08:35  对本文有异议

本文实例为大家分享了Android实现渐变色水波纹效果的具体代码,供大家参考,具体内容如下

项目中使用到的效果,效果图如下:

代码实现:

  1. public class WaveView extends View {
  2. private Paint mPaint, mCriclePaint, mTextPaint;
  3. // 倾斜或旋转、快速变化,当在屏幕上画一条直线时, 横竖不会出现锯齿,
  4. // 但是当斜着画时, 就会出现锯齿的效果,所以需要设置抗锯齿
  5. private DrawFilter mDrawFilter;
  6. private int mTotalHeight, mTotalWidth;
  7. private int mXoffset = 0;
  8. private float[] mPointY;
  9. private float[] mDaymicPointY;
  10. private int currentIndex = 1;
  11. private int currentColor=0xaa3bb6e7;
  12. //波浪线移动速度
  13. private static final int X_SPEED = 20;
  14. private int percent;
  15. public void setPercent(int percent) {
  16. this.percent = percent;
  17. }
  18. public WaveView(Context context) {
  19. super(context);
  20. init();
  21. }
  22. public int getCurrentIndex() {
  23. return currentIndex;
  24. }
  25. public void setCurrentIndex(int currentIndex) {
  26. this.currentIndex = currentIndex;
  27. if (currentIndex==1){
  28. currentColor = 0xaa3bb6e7;
  29. }else if(currentIndex==2){
  30. currentColor = 0xaa3c3c3c;
  31. }else if (currentIndex==3){
  32. currentColor = 0xaa724527;
  33. }
  34. }
  35. public WaveView(Context context, AttributeSet attrs) {
  36. super(context, attrs);
  37. init();
  38. }
  39. public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {
  40. super(context, attrs, defStyleAttr);
  41. init();
  42. }
  43. private void init() {
  44. //图片线条(通用)的抗锯齿需要另外设置
  45. mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
  46. //实例化一个画笔
  47. mPaint = new Paint();
  48. //去除画笔锯齿
  49. mPaint.setAntiAlias(true);
  50. //设置画笔风格为实线
  51. mPaint.setStyle(Paint.Style.FILL);
  52. //设置画笔颜色
  53. mPaint.setColor(Color.GREEN);
  54. //实例化圆的画笔
  55. mCriclePaint = new Paint(mPaint);
  56. mCriclePaint.setColor(Color.parseColor("#88dddddd"));
  57. mCriclePaint.setAlpha(255);
  58. //实例化文字画笔
  59. mTextPaint = new Paint();
  60. mTextPaint.setAntiAlias(true);
  61. }
  62. LinearGradient linearGradient;
  63. @Override
  64. protected void onDraw(Canvas canvas) {
  65. super.onDraw(canvas);
  66. //去除锯齿
  67. canvas.setDrawFilter(mDrawFilter);
  68. runWave();
  69. int canvasWidth = canvas.getWidth();
  70. int canvasHeight = canvas.getHeight();
  71. int layerId = canvas.saveLayer(0, 0, canvasWidth, canvasHeight, null, Canvas.ALL_SAVE_FLAG);
  72. // canvas.drawCircle(mTotalWidth / 2, mTotalHeight / 2, mTotalWidth / 2, mCriclePaint);
  73. //设置颜色混合模式
  74. // mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
  75. //高减去宽除以2使水波纹底部在圆底部,动态改变percent值,在Y轴上变化
  76. //画进度条
  77. //aa3c3c3c
  78. //aa724527
  79. final int c = currentColor;
  80. int colorSweep[] = {c,Color.TRANSPARENT};
  81. //设置渐变色
  82. linearGradient = new LinearGradient(0, mTotalHeight-percent*mTotalHeight/100-80,0,mTotalHeight, colorSweep, null, Shader.TileMode.MIRROR);
  83. mPaint.setShader(linearGradient);
  84. for (int i = 0; i < mTotalWidth; i++) {
  85. canvas.drawLine(i, mTotalHeight - mDaymicPointY[i] - (mTotalHeight - mTotalWidth) / 2 - percent * mTotalWidth / 100, i, mTotalHeight - (mTotalHeight - mTotalWidth) / 2, mPaint);
  86. }
  87. // RoundLightBarView
  88. //最后将画笔去除Xfermode
  89. // mPaint.setXfermode(null);
  90. canvas.restoreToCount(layerId);
  91. //改变两条波纹的移动点
  92. mXoffset += X_SPEED;
  93. //如果已经移动到末尾处,则到头重新移动
  94. if (mXoffset > mTotalWidth) {
  95. mXoffset = 0;
  96. }
  97. String text = percent + " ";
  98. mTextPaint.setColor(Color.WHITE);
  99. mTextPaint.setTextSize(180);
  100. float textLength = mTextPaint.measureText(text);
  101. int textY = mTotalHeight - percent * mTotalHeight / 100;
  102. if (textY < 180) {
  103. textY = 180;
  104. }
  105. if (textY > mTotalHeight - 80) {
  106. textY = mTotalHeight - 80;
  107. }
  108. canvas.drawText(text, (mTotalWidth - textLength) / 2, textY, mTextPaint);
  109. mTextPaint.setTextSize(90);
  110. String aText = percent < 10 ? " %" : percent < 100 ? " %" : " %";
  111. //4 9 13
  112. canvas.drawText(aText, (mTotalWidth - textLength) / 2, textY, mTextPaint);
  113. // LogUtils.d("totalWdith:"+mTotalWidth+"---totalH:"+mTotalHeight);
  114. //引起view重绘
  115. postInvalidateDelayed(300);
  116. }
  117. @Override
  118. protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  119. super.onSizeChanged(w, h, oldw, oldh);
  120. mTotalHeight = h;
  121. mTotalWidth = w;
  122. //数组的长度为view的宽度
  123. mPointY = new float[w];
  124. mDaymicPointY = new float[w];
  125. //这里我们以view的总宽度为周期,y = a * sin(2π) + b
  126. for (int i = 0; i < mTotalWidth; i++) {
  127. mPointY[i] = (float) (20 * (Math.sin(2 * Math.PI * i / w)));
  128. }
  129. }
  130. private void runWave() {
  131. // 超出屏幕的挪到前面,mXoffset表示第一条水波纹要移动的距离
  132. int yIntelrval = mPointY.length - mXoffset;
  133. //使用System.arraycopy方式重新填充第一条波纹的数据
  134. System.arraycopy(mPointY, 0, mDaymicPointY, mXoffset, yIntelrval);
  135. System.arraycopy(mPointY, yIntelrval, mDaymicPointY, 0, mXoffset);
  136. }
  137. }

实现原理:

1、首先波浪的绘制是很多个竖直的线,并通过正弦坐标转换坐标实现。

2、渐变色通过设置画笔LinearGradient实现。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号