首页
学习
活动
专区
工具
TVP
发布

高仿QQ运动的周报界面

img1.PNG 接着就是画出波浪图形的方法 drawWaves(canvas)代码如下: //画出波浪图形 public void drawWaves(Canvas canvas){ if(!...轴坐标 mStandardDayX=mStandarDayPoint[0]; //达标天数的Y轴坐标 mStandardDayY=-mStandarDayPoint[1]; //画出还有达标天数的波浪线.../*平均步数*/ //平均步数的X轴坐标 mAverageCountX=0; //平均步数的Y轴坐标 mAverageCountY=mAverageCountData; //画出还有平均步数的波浪线...在通过circleValue算出波浪线的半径: //算出弧线区域的半径 public float circleValue(int mDataDranking){ if(mDataDranking=...(pathIn,mLineCircle); } } 首先canvas通过每次旋转120度来画出每一条波浪线,通过judgeDotte()方法得出波浪线三个点对应的Y轴的坐标,假如judgeDotte

86040
您找到你想要的搜索结果了吗?
是的
没有找到

仿百度外卖的酷炫水波纹效果及解析

我们可以用同时二个线,一个sin函数,一个cos函数。而且处于同一水平线。不就一个交错的波浪了。 类似这样的效果 好,第一步的大概思路咱们有了。咱们再思考如何这些线呢。...我们有时会用Path来描述一个图像的轮廓,所以也会称为轮廓线(轮廓线仅是Path的一种使用方法,两者并不等价) 我就列举出我们这次的仿百度效果会使用的几个方法: 作用 相关方法 备注 移动起点 moveTo...新画出来的sin线就是一个被左右方向移动后的线了。给你的感觉不就是像波浪一样往右边移动了!!!!...又是丑丑的手工画图 而每一段的又是要按照sin或者cos的函数来。并且是通过lineTo方法来。...就可以画出来相应的sin或者cos线了。

6610

仿百度外卖的酷炫水波纹效果

我们可以用同时二个线,一个sin函数,一个cos函数。而且处于同一水平线。不就一个交错的波浪了。 ? 好,第一步的大概思路咱们有了。咱们再思考如何这些线呢。...有人要问,lineTo不是直线的么。其实这个sin和cos曲线就是被我们一小段一小段的用线段画出来的。 ? ? 比如画上述这个sin函数。我们画好后。怎么让他不停的往左移动,产生波浪的效果呢。...新画出来的sin线就是一个被左右方向移动后的线了。给你的感觉不就是像波浪一样往右边移动了!!!! 所以我们就知道了:(以sin为例) 1....而每一段的又是要按照sin或者cos的函数来。并且是通过lineTo方法来。所以最后合在一起就是: ? 这时候如果我们canvas.drawPath方法来画出我们上面的这个处理过的path。...让你产生波浪的感觉。 好的,我们已经学完了那二个波浪的成(zhuang)功(B)实现了。如何来实现那个头像跟随着曲线一起动呢。其实很简单。刚才我们能画出曲线。

41730

CSS Houdini实现动态波浪

自定义的重点在于,"怎么" 的逻辑需要我们来描述,因此我们利用 registerPaint 来描述我们的绘制逻辑: registerPaint('rect', class { paint(ctx,...paint 方法用于描述自定义的绘制逻辑,它接收四个参数: ctx:一个 Canvas 的 Context 对象,因此 paint 中的绘制方式跟 canvas 绘制是一样的。...; ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'; ctx.fill(); } }) paintworklet 中,利用 sin 函数绘制波浪线...这个不难理解,你见过长成锯齿状的波浪吗?又或者你见过上一刻 10 米高、下一刻就掉到 2 米的波浪吗? 为了实现这种连续不规则的特征,我们弃用 sin 函数,引入了一个包 simplex-noise。...* amp); ctx.closePath(); ctx.fillStyle = fillColor; ctx.fill(); } }) 修改峰值和偏置项等参数,可以再多一个不一样的波浪

1.2K10

自定义View实现横向的双水波纹进度条

, Bitmap.Config.ARGB_8888); } //以该bitmap为底创建一块画布 if (bitmapCanvas == null) { bitmapCanvas = new Canvas...(circleBitmap, 0, 0, null); 2.通过贝塞尔曲线实现双水波 1)实现第一条水波 /** * 绘制波浪线 */ private Path canvasWavePath() {...//其实也可以用 i < getWidth() ;i+=waveLength来判断 这个没那么完美 //绘制p0 - p1 绘制波浪线 这里有一段是超出View的,在View右边距的右边...path的起始点为(0,0)可根据进度动态改变,然后循环曲线,长度是有几个波浪就是多长,然后连接到view高度的位置,最后到(0,0),形成一个封闭的区域,这样就实现了一个填充的水波效果。...listener); mProgressAnimator.addListener(listenerAdapter); mProgressAnimator.start(); // 波浪线

63920

自定义View实现横向的双水波纹进度条

, Bitmap.Config.ARGB_8888); } //以该bitmap为底创建一块画布 if (bitmapCanvas == null) { bitmapCanvas = new Canvas...(circleBitmap, 0, 0, null); 2.通过贝塞尔曲线实现双水波 1)实现第一条水波 /** * 绘制波浪线 */ private Path canvasWavePath() {...//其实也可以用 i < getWidth() ;i+=waveLength来判断 这个没那么完美 //绘制p0 - p1 绘制波浪线 这里有一段是超出View的,在View右边距的右边...\ path的起始点为(0,0)可根据进度动态改变,然后循环曲线,长度是有几个波浪就是多长,然后连接到view高度的位置,最后到(0,0),形成一个封闭的区域,这样就实现了一个填充的水波效果。...listener); mProgressAnimator.addListener(listenerAdapter); mProgressAnimator.start(); // 波浪线

67720

好玩儿的css

今天带大家看几个用css(部分会用到canvasjs)实现的好玩儿的效果(不好好琢磨下,还真写不出来) 本篇文章有参考一些css大佬的杰作,具体参考链接在文末有提及 超能陆战队-大白 超能陆战队中的大白...思路 涉及到的知识点主要是:canvas、ES6、requestAnimationFrame 大致思路就是: 定义一个类,创建圆和线的实例 设置单个粒子的随机 x,y 坐标和圆圈的半径。...: #fff; } canvas { display: block; width: 100%; height: 100%; } js class Circle { //创建对象..._my = Math.random(); } //canvas 画圆和直线 //画圆就是正常的用canvas画一个圆 //直线是两个圆连线,为了避免直线过多,给圆圈距离设置了一个值...思路 画一个电池 增加阴影及颜色的变化(使用 filter: hue-rotate() 对渐变色彩进行色彩过渡变换动画) 添加波浪,这里用一张动图说明(结合上个波浪百分比,相信你很快就明白了) ?

1.1K20

Android自定义WaveProgressView实现水波纹加载需求

首先自定义WaveProgressView继承View,在构造函数中获取布局文件中设置的背景,同时设置一个波浪的画笔和文字的画笔。  ...handler.sendEmptyMessageDelayed(INVALIDATE,100); }   复写onDraw方法,先把波浪画在画布上,然后背景(给背景画笔设置PorterDuff.Mode.DST_ATOP...当然也可以是PorterDuff.Mode.SRC_ATOP,主要取决于你的先后顺序。最后把文字画上去,形成一个最终Bitmap,最后把这个Bitmap画到onDraw的参数canvas上。...canvas = new Canvas(finalBmp); /** * 绘制波浪 */ float CurMidY = height*(maxProgress-currentProgress...); return finalBmp;   这里的CurY是上次波浪中线的y轴坐标,CurMidY 是当前的Y轴坐标,每次波浪上升的时候为了不产生卡顿效果,把这1/100的上升分为10次来绘制。

80341

【高级系列】Canvas绘制性能专题

例如,当需要对条线条时先创建一条包含所有线条的路经然后用一个draw调用将比分别单独的每一条线条要高效的多: for (var i = 0; i < points.length - 1; i++) ...缓存load好的图片,canvas上画canvas,而不是image。...2 图层优化 2.1 多层半透明优化处理 2.1.1 范例1——模拟波浪性能优化 2.1.1.1 绘制机制         在最近这个项目中,有一个模拟波浪的特效,绘制原理是用多层半透明Canvas进行叠加...:     1、全局用三层半透明Canvas叠加,各层透明度分别为0.5、0.6、0.8;     2、每层Canvas中利用滤镜功能截取上边沿图形,而截取的高度则是利用正弦函数结合振幅值与频率进行绘制...Ben's talk about optimizing a JS NES emulator.

27230

2014-10-27Android学习------布局处理(六)------26个字母的布局列表的实现-----城市列表应用程序

我学习Android都是结合源代码去学习,这样比较直观,非常清楚的看清效果,觉得很好,今天的学习源码是网上找的个CityList 源码 百度搜就知道很多下载的地方 本节学习接上篇布局学习(二) 地址...canvas)函数 很重要 重点 @Override protected void onDraw(Canvas canvas) { // TODO Auto-generated method...Typeface.DEFAULT_BOLD);//设置字母的面貌为默认的粗度 字有多粗 paint.setAntiAlias(true);//给Paint加上抗锯齿标志,是因为有些地方Paint是没法的...,就直接给canvas加抗锯齿,更方便 //其实这个抗锯齿很好解释,就是画布的边缘用paint画笔去它,会出现一些波浪线吧,可以这么叫它,形状像锯齿一样,很 // 难看,所有如果加上抗锯齿的话,效果将有明显的改善...* Cap.ROUND,或方形样式Cap.SQUARE * * setSrokeJoin(Paint.Join join); * 设置绘制时各图形的结合方式

67930

Android魔术系列:手把手教你实现水晶球波浪进度条

d - 高度,即水平线的高度,曲线在这个高度上下波动(实际上是进度,后面会讲到) 实现这个函数: /** * 波浪的函数,用于求y值 * 函数为a*sin(b*(x + c))+d * @param...原理分析 在a、b、c、d确定的情况下,通过上面的函数我们只能得到一条线,如图 但我们实际上想要一个填充的效果,解决办法是我们利用这个曲线上的点与基线(x轴)上对应的点连线,如下图 当这些线足够多足够密集的时候...代码实现 下面我们来看看具体代码怎么处理 @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if.../** * 如果有波浪,则绘制两条波浪 * 波浪实际上是一条条一像素的直线组成的,线的顶端是根据正弦函数得到的 */...当false时表示不在运动,这时没有波浪,即水平线是平的,直接绘制两个矩形即可。 (3)第三部分绘制遮罩,产生(图5)的效果。 遮罩是一个圆形的bitmap,遮罩模式我们使用DST_IN。

77710

Canvas 奇妙历险(一)

阅读完本篇文章,我期望你对Canvas的基础API有一定的认识,在此基础上,结合自身情况做一些例子去巩固,不是一件蛮开心的事吗? 前期工作 前期工作中,介绍了canvas是什么,能够干什么?...最早是由苹果公司提出的这么一个概念,后来被应用在我们的网络技术上,结合Javascript脚本编程,我们可以创建动态渲染位图像,位图就是矢量图,即不管你放大缩小,它依旧是能够保持高逼真的姿态。...;canvas在游戏方面也是应用相当广泛,老掉牙的例子就是贪吃蛇、坦克大战、飞机大战、2048、围棋,它也是可以做3D的游戏开发,这里有兴趣可以了解下three.jscanvas还可以应用在教育行业,...-- 这里不建议把canvas的宽高写在css里面,因为这样子会导致图片有伸缩失真等问题,建议写在JS脚本里--> <canvas id="canvas" width="300" height="150...两种做法,第一种用线,就是说你把它围成一个小小的矩形然后给它填实心可以近似看出一个点,不要耍小聪明,把moveTo(x, y)和lineTo(x, y)坐标设成一样,也是不出来的,但要是你是围成的那又是可以的

80120

轻松生成小程序分享海报

image 要解决的问题 单位问题 canvas隐藏问题 圆角矩形、圆角图片 多段文字 超长文字和多行文字缩略问题 矩形包含文字 多个元素间的层级问题 图片尺寸和渲染尺寸不一致问题...**圆角矩形、圆角图片** 由于canvas没有提供现成的圆角api,所以我们只能手工啦,实际上圆角矩形就是由4条线(黄色)和4个圆弧(红色)组成的,如下: <ignore_js_op style...this.ctx.lineTo(this.toPx(x + w), this.toPx(y + h - br)); // 右边的线 this.ctx.arcTo(this.toPx...this.ctx.lineTo(this.toPx(x), this.toPx(y + br)); // 左边的线 this.ctx.arcTo(this.toPx...image 多个元素间的层级问题 由于canvas没有Api可以设置绘制元素的层级,只能是根据后绘制层级高于前面绘制的方式,所以需要用户传入zIndex字段,利用数组排序

2.4K30

Android 自定义球型水波纹带圆弧进度效果(实例代码)

水波纹的实现:直接使用贝塞尔曲线Path.quadTo()实现,通过拉伸水平直线绘制波浪效果。可以通过控制拉伸点(waveAmplitude)距离水平线的高度,达到波浪高度的控制。...至于波浪的移动,可以通过移动平移水平线的起始位置来实现,在使用动画循环即可,为了能够稳定的显示,绘制波浪时需要严格绘制整数倍周期的波浪。...100 var percent = 0 set(value) { field = value waveWaterLevelRatio = value / 100f //y = -4 * x2 + 4x抛物线计算振幅...: Canvas) { drawCircle(canvas) drawWave(canvas) drawText(canvas) } private fun drawWave(canvas: Canvas...: Canvas) { //绘制外围进度圆圈 canvas.drawArc(outerCircleRectf, 0f, 360f, false, outerNormalCirclePaint) canvas.drawArc

1.1K20
领券