高仿支付宝蚂蚁森林气泡DEMO版本

public class BubbleView extends View {

private Paint textPaint;

private Paint bgPaint;

private Paint whitePaint;

private float offset;

private RectF rectF;

private RectF innerRectF;

private int padding = 20;

private int innerPadding = 35;

private int BUBBLEOFFSET=35;

private ValueAnimator valueAnimator;

private String text="5g";

public BubbleView(Context context) {

super(context);

init();

}

public BubbleView(Context context, @Nullable AttributeSet attrs) {

super(context, attrs);

init();

}

public BubbleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

init();

}

int[] colors = {0xFFCCFE5F,0xffBDF041};

private void init() {

bgPaint=new Paint();

bgPaint.setColor(Color.GREEN);

bgPaint.setAntiAlias(true);

bgPaint.setStrokeWidth(10);

bgPaint.setStyle(Paint.Style.FILL);

whitePaint=new Paint();

whitePaint.setColor(Color.WHITE);

whitePaint.setAntiAlias(true);

whitePaint.setStrokeWidth(10);

whitePaint.setStyle(Paint.Style.STROKE);

whitePaint.setStrokeCap( Paint.Cap.ROUND );

textPaint = new Paint();

textPaint.setColor(0xff339855);

textPaint.setAntiAlias(true);

textPaint.setStrokeWidth(35);

textPaint.setStyle(Paint.Style.FILL);

textPaint.setTextAlign(Paint.Align.CENTER);

textPaint.setTextSize(75);

textPaint.setTypeface(Typeface.DEFAULT_BOLD);

//文字居中

Paint.FontMetrics fontMetrics = new Paint.FontMetrics();

textPaint.getFontMetrics(fontMetrics);

offset = (fontMetrics.descent + fontMetrics.ascent) / 2;

//动画

valueAnimator = ObjectAnimator.ofFloat(this, "translationY", BUBBLEOFFSET,-BUBBLEOFFSET);

valueAnimator.setDuration(1500);

valueAnimator.setRepeatMode(ObjectAnimator.REVERSE);

valueAnimator.setRepeatCount(INFINITE);

valueAnimator.start();

}

//处理warp_content,实际项目需要更多的处理

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

int mode= MeasureSpec.getMode(widthMeasureSpec);

if(mode==MeasureSpec.AT_MOST||mode==MeasureSpec.UNSPECIFIED){

setMeasuredDimension(240,240);

}else{

super.onMeasure(widthMeasureSpec, widthMeasureSpec);

}

}

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

rectF = new RectF(padding, padding, w - padding, h - padding);

innerRectF = new RectF(innerPadding, innerPadding, w - innerPadding, h - innerPadding);

//渐变色

Shader shader1 = new RadialGradient(rectF.centerX(), rectF.centerY(),rectF.centerX()-rectF.left,colors,new float[]{0.8f,02f},Shader.TileMode.CLAMP);

bgPaint.setShader(shader1);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

if (rectF == null) return;

//背景

canvas.drawCircle(rectF.centerX(), rectF.centerY(), rectF.centerX()-rectF.left, bgPaint);

//高亮部分

whitePaint.setColor(0xefffffff);

canvas.drawArc(innerRectF,180,60,false,whitePaint);

canvas.drawArc(innerRectF,250,2,false,whitePaint);

whitePaint.setColor(0xaaffffff);

canvas.drawArc(innerRectF,15,60,false,whitePaint);

//文字

canvas.drawText(text, rectF.centerX(), rectF.centerY() - offset, textPaint);

}

@Override

protected void onDetachedFromWindow() {

super.onDetachedFromWindow();

if(valueAnimator!=null)valueAnimator.cancel();

valueAnimator=null;

}

}

气泡shader_仿蚂蚁森林气泡相关推荐

  1. 仿蚂蚁森林能量球效果遇到的问题记录

    仿蚂蚁森林能量球效果遇到的问题记录 常规先上图 前提内容 仿做一个蚂蚁森林的能量球效果,计划使用属性动画,来实现能量球上下摆动,然后点击能量球有一个收集的动画. 本来以为就这么几个简单的需求不会太难, ...

  2. 手撸一个仿蚂蚁森林微信小程序

    每天逛逛CSDN,看看大牛们的技术文章,查找自己想了解的知识,是我必做的事情. 每天到支付宝看看自己的余额,看看自己的33块钱还在吗?顺便到蚂蚁森林收下自己和好友的能量是我必做的事.看着自己的能量又被 ...

  3. 仿网易星球浮动小球、仿蚂蚁森林动效

    StarFloatView 项目地址:ErChenZhang/StarFloatView  简介:仿网易星球浮动小球.仿蚂蚁森林动效 更多:作者   提 Bug 标签: 示例:

  4. html5仿蚂蚁森林效果代码,vue仿支付宝蚂蚁森林水滴

    APP 需要做一个类似蚂蚁森林的功能模块,动效和蚂蚁森林接近,可以有多个水滴,可以控制位置,水滴上下浮动. gif图如下所示: soogif.gif v-for="(item, index) ...

  5. Vue 仿蚂蚁森林能量球生成获取组件

    小编最近刚刚结束了一个需求,需求是这样的:通过做任务生成一定的太阳,领取太阳后达到一定等级树苗进行生长.嗯?听起来是不是觉得很熟悉?是的,小编就想到了蚂蚁森林,不知道各位同学获取到多少个证书了呢?这些 ...

  6. 仿蚂蚁森林收集能量,android设计模式总结

    [外链图片转存中-(img-Nbkj09zD-1643277337112)]转存失败重新上传取消[外链图片转存中-(img-UHOT9iTa-1643277337114)] 使用方式 取出所需文件:m ...

  7. android蚂蚁森林动画,【Android】仿蚂蚁森林,树木弹动动画

    先看效果图: 重点是插值器,我之前一直没想到会做出来.全靠群里的丁大佬... public class TreeAnimation { public static Animation getAnima ...

  8. 【Android】仿蚂蚁森林,树木弹动动画

    先看效果图: 重点是插值器,我之前一直没想到会做出来.全靠群里的丁大佬... public class TreeAnimation {public static Animation getAnimat ...

  9. H5实现类蚂蚁森林动态气泡的渲染与收集

    需求:积分气泡实现类蚂蚁森林动态效果 UI图: 技术栈:vue,ts 需求分析: 1.在特定的区域内随机产生积分气泡,气泡之间不重合,气泡与总能量球之间不重合: 2.每个能量球上下浮动,点击后向总能量 ...

  10. Android之蚂蚁森林能量水滴效果

    最近公司有个需求,需要一个类似于蚂蚁森林能量水滴浮动效果,所以有了这篇文章,目前在项目里,没时间提出来做demo,有代码欠缺的地方欢迎指出,一定补上. 文章目录 一:效果图 二:具体实现 1.自定义圆 ...

最新文章

  1. 参加web前端开发培训具体要学什么内容
  2. jquery mobile 页面间的传递参数
  3. React Native debug debugger
  4. 教师节特辑丨网易云信:素质教育「名师」是如何炼成的?
  5. CSLA.Net 3.0.5 版本 教学程序,代码附教学注释
  6. REST / HTTP方法:POST与PUT与PATCH
  7. 量子是什么?为什么可以用来给通信加密?
  8. 全新Docker Hub发布:提供查找、存储和共享容器镜像单一体验
  9. 国内学者新研究:中医AI登场,自动开出药方
  10. BMP文件格式详解(BMP file format) (转)
  11. wifi的country code
  12. 中国物联网激荡的20年发展
  13. Latex 带圈数字
  14. 八爪鱼数据采集教程(一)
  15. hdu1260Tickets
  16. 智能视频监控 计算机视觉,传统视频监控与智能视频监控之对比
  17. 阿凡题——智慧的背囊
  18. 换新电脑后怎么重装系统win7,win7安装教程
  19. 光荣的史诗—PC Game巨头KOEI发展史
  20. ReportStudio入门教程(七十一) - 显示时间进度(文字版)

热门文章

  1. php操作大缓存的存储与读取
  2. 一个定时器的普通实现,多进程实现和多线程实现的对比
  3. ASP.NET Core 使用Redis 存储Session 实现共享 Session
  4. 数据--第20课-递归的应用实战二
  5. 一个Android开发快速入门Flutter (一)
  6. is not a registered tag library. Must be one of:
  7. stm32的HAL库uart的注意点
  8. 操作系统复习笔记(三)
  9. 下载安装tomcat和jdk,配置运行环境,与Intellij idea 2017关联
  10. Swift 个人学习笔记 - 01: A Swift Tour