Android自定义View--用贝塞尔曲线实现一加多云天气
来源:互联网 发布:外文数据库 免费搜索 编辑:程序博客网 时间:2024/03/28 21:21
之前看到了一加天气,感觉做得还是很讨巧的,利用了传感器来控制动画效果,是使用Android手机的朋友还没有体验过,那就去试一下吧一加天气官方网站,下面是我简单地实现了一下的效果图:
代码很简单,就是用了五个二阶贝塞尔曲线,不断来回改变控制点的Y坐标不断重绘界面。
package danxx.library.widget;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.graphics.PointF;import android.os.Handler;import android.util.AttributeSet;import android.view.View;/** * Created by Dawish on 2016/12/31. * 用五个二阶贝塞尔曲线实现一加天气的多云云朵 */public class OnePlusCloudy extends View { private Paint paint; //默认的基色 private String DEFAULT_BASE_COLOR = "FFFFFF"; private PointF startPoint1,startPoint2,startPoint3,startPoint4,startPoint5; private PointF endPoint1,endPoint2,endPoint3,endPoint4,endPoint5; private PointF controlPoint1,controlPoint2,controlPoint3,controlPoint4,controlPoint5; private PointF sunPoint; public OnePlusCloudy(Context context) { super(context); init(); } public OnePlusCloudy(Context context, AttributeSet attrs) { super(context, attrs); init(); } public OnePlusCloudy(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init(){ paint = new Paint(); paint.setStrokeWidth(20); paint.setStyle(Paint.Style.FILL_AND_STROKE); paint.setAntiAlias(true); startPoint1 = new PointF(0, 0); endPoint1 = new PointF(0, 0); controlPoint1 = new PointF(0, 0); startPoint2 = new PointF(0, 0); endPoint2 = new PointF(0, 0); controlPoint2 = new PointF(0, 0); startPoint3 = new PointF(0, 0); endPoint3 = new PointF(0, 0); controlPoint3 = new PointF(0, 0); startPoint4 = new PointF(0, 0); endPoint4 = new PointF(0, 0); controlPoint4 = new PointF(0, 0); startPoint5 = new PointF(0, 0); endPoint5 = new PointF(0, 0); controlPoint5 = new PointF(0, 0); sunPoint = new PointF(0, 0); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); startPoint1.x = w/4; startPoint1.y = 0; endPoint1.x = w + w; endPoint1.y = 0; controlPoint1.x = w/2; controlPoint1.y = h/2; //------------------------------- sunPoint.x = w/3*2; sunPoint.y = h/5; //------------------------------- startPoint2.x = w/3; startPoint2.y = 0; endPoint2.x = w + w; endPoint2.y = 0; controlPoint2.x = w/2; controlPoint2.y = h/3*2; //-------------------------------- startPoint3.x = 0; startPoint3.y = 0; endPoint3.x = w + w; endPoint3.y = 0; controlPoint3.x = w/2; controlPoint3.y = h/5*3; //-------------------------------- startPoint4.x = -w; startPoint4.y = 0; endPoint4.x = w/7*5; endPoint4.y = -(h/6); controlPoint4.x = w/2; controlPoint4.y = h/5*3; //-------------------------------- startPoint5.x = -w; startPoint5.y = 0; endPoint5.x = w/2; endPoint5.y = -(h/6); controlPoint5.x = w/3; controlPoint5.y = h/7*3; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); Path path1 = new Path(); paint.setColor(Color.parseColor("#44"+DEFAULT_BASE_COLOR)); path1.moveTo(startPoint1.x, startPoint1.y); path1.quadTo(controlPoint1.x, controlPoint1.y, endPoint1.x, endPoint1.y); canvas.drawPath(path1, paint); paint.setColor(Color.YELLOW); canvas.drawCircle(sunPoint.x, sunPoint.y, 100, paint); Path path2 = new Path(); paint.setColor(Color.parseColor("#66"+DEFAULT_BASE_COLOR)); path2.moveTo(startPoint2.x, startPoint2.y); path2.quadTo(controlPoint2.x, controlPoint2.y, endPoint2.x, endPoint2.y); canvas.drawPath(path2, paint); Path path4 = new Path(); paint.setColor(Color.parseColor("#55"+DEFAULT_BASE_COLOR)); path4.moveTo(startPoint4.x, startPoint4.y); path4.quadTo(controlPoint4.x, controlPoint4.y, endPoint4.x, endPoint4.y); canvas.drawPath(path4, paint); Path path3 = new Path(); paint.setColor(Color.parseColor("#88"+DEFAULT_BASE_COLOR)); path3.moveTo(startPoint3.x, startPoint3.y); path3.quadTo(controlPoint3.x, controlPoint3.y, endPoint3.x, endPoint3.y); canvas.drawPath(path3, paint); Path path5 = new Path(); paint.setColor(Color.parseColor("#77"+DEFAULT_BASE_COLOR)); path5.moveTo(startPoint5.x, startPoint5.y); path5.quadTo(controlPoint5.x, controlPoint5.y, endPoint5.x, endPoint5.y); canvas.drawPath(path5, paint); } /** * 部分控制点的Y坐标是加部分控制点的是减 */ private void anim(){ controlPoint1.y += 2; controlPoint2.y -= 2; controlPoint3.y += 2; controlPoint4.y -= 2; controlPoint5.y += 2; postInvalidate(); } private void resetAnim(){ controlPoint1.y -= 2; controlPoint2.y += 2; controlPoint3.y -= 2; controlPoint4.y += 2; controlPoint5.y -= 2; postInvalidate(); } int animCount = 0; int resetAnimCount = 0; Handler handler = new Handler(); private boolean isStop = false; /** * 不断刷新界面 * 不断来回改变控制点的Y坐标不断重绘界面。 */ Runnable runnable = new Runnable() { @Override public void run() { if(isStop){ return; } if(animCount < 40){ anim(); animCount++; if(animCount == 40){ resetAnimCount = 0; } }else{ resetAnim(); resetAnimCount++; if(resetAnimCount == 40){ animCount = 0; } } handler.postDelayed(this, 100); } }; public void start(){ if(!isStop){ return; } isStop = false; handler.post(runnable); } public void stop(){ isStop = true; handler.removeCallbacksAndMessages(null); }}
以上代码地址:OnePlusCloudy.java
贝塞尔曲线详细教程:http://blog.csdn.net/z82367825/article/details/51599245
1 0
- Android自定义View--用贝塞尔曲线实现一加多云天气
- Android自定义View贝塞尔曲线最佳实现
- Android 自定义view实现贝塞尔曲线
- Android 端天气预报APP的实现(二)阿里云天气预报API的获取
- Android自定义View画曲线
- Android自定义View,贝塞尔曲线
- Android自定义View-- 贝塞尔曲线
- android自定义View贝赛尔曲线
- Android自定义View阻尼动画&贝塞尔曲线的实现
- Android自定义GridView之实现一个图片加多个文本框
- android-----自定义View实现系列(一)
- android-----自定义View实现系列(一)
- Android 自定义View(一)----------------TabBar 实现
- Android自定义View---Canvas绘制贝塞尔曲线
- android自定义View绘制天气温度曲线
- Android自定义View进阶 - 贝塞尔曲线
- Android自定义仿Siri曲线View
- Android自定义View之贝塞尔曲线
- sublime使用技巧
- 欢迎使用CSDN-markdown编辑器
- Python的类方法,静态方法,实例方法,类变量,实例变量,静态变量的总结
- Unity动画系统-给人物添加动画
- 微信开发出现“该公众号暂时无法提供服务,请稍后再试”的坑
- Android自定义View--用贝塞尔曲线实现一加多云天气
- UVA489
- Poj 1064 Cable master(二分
- Qt编写OpenMP程序--HelloWorld
- Golang 生成Mac OS X dylib调用问题
- 并查集教程
- 简易mac安装docker教程
- 【整理】微信开发
- Centos 虚拟机ping主机,主机ping虚拟机的相关问题