Android自定义View水波纹

简介: Android自定义View水波纹

根据正弦:y=Asin(ωx+φ)+h 画出静态的曲线。

再通过改变相位:ωx+φ,来实现动画。

不会制作.gif图,如图:从Android Studio截下来的。


image.png

/**
 * @ClassName WaveView
 * @Description TODO
 * @Author shufeng.jiang
 * @Date 2022/4/20 14:06
 */
public class WaveView extends View {
    /**
     *  y=Asin(ωx+φ)+h 周期:T=2π/ω
     */
    /* 画笔 */
    Paint paint1  = new Paint();
    public WaveView(Context context) {
        super(context);
    }
    public WaveView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }
    public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
    }
    /* 控件宽 */
    float xAxis=0;
    /* 控件高 */
    float yAxis=0;
    /* 正弦函数的周期 */
    float mCycle=0;
    /* 曲线下移的距离 */
    float wavelevel=0;
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        xAxis = getWidth();      // 控件的宽
        yAxis = getHeight() ;    // 控件的高
        wavelevel = yAxis/2;    // wavelevel 为 y=Asin(ωx+φ)+h 的 h
        mCycle = (float) (2 * Math.PI / xAxis/1.5); // 根据宽度计算三角函数周期
        waveAnim();
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);
        createShader(canvas);
    }
    float startXAxis=0;
    private void createShader(Canvas canvas){
        for(int i=0;i<xAxis;i++){
            float startYAxis =  (float) (100*Math.sin(mCycle*i+startXAxis)+wavelevel);
            float endYAxis = (float) (100*Math.sin(mCycle*(i+1)+startXAxis)+wavelevel);
           //  canvas.drawLine(i,  startYAxis, i+1,  endYAxis , paint1);    // 这样是绘制正弦曲线
            canvas.drawLine(i,  startYAxis, i+1,  yAxis, paint1);    // 这样将绘制正弦曲线以下的部分。
        }
    }
    private void initPaint(){
        paint1.setColor(Color.BLUE);    // 设置画笔颜色
        paint1.setStrokeWidth(4.0f);      // 设置画笔宽度
        paint1.setAntiAlias(true);       // 是否抗锯齿
       /** Paint.Style.STROKE 只绘制图形轮廓(描边) 
         *Paint.Style.FILL 只绘制图形内容 
         *Paint.Style.FILL_AND_STROKE 既绘制轮廓也绘制内容
       */
        paint1.setStyle(Paint.Style.STROKE);      
    }
    public void waveAnim() {
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0F, 1.0f);
        valueAnimator.setDuration(110000);
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Float aFloat = Float.valueOf(animation.getAnimatedValue().toString());
                //核心代码,重要的是在动画的过程中改变正弦波的相位,从 0 到 控件宽 无限变化就可以实现正弦波的移动
                startXAxis = getWidth() * aFloat;
                invalidate();
            }
        });
        valueAnimator.start();
    }
}

到次绘制完成!

第一次自定义View,各位大佬勿喷。目前写简书的意义就是做笔记,方便自己后期借鉴。


相关文章
|
15小时前
|
XML Android开发 数据格式
Android下自定义Button样式
Android下自定义Button样式
|
1天前
|
XML Java Android开发
如何美化android程序:自定义ListView背景
如何美化android程序:自定义ListView背景
|
1天前
|
搜索推荐 Android开发
自定义Android标题栏TitleBar布局
自定义Android标题栏TitleBar布局
|
17天前
|
Android开发 芯片
Android源代码定制:移除无用lunch|新建lunch|自定义customize.mk
Android源代码定制:移除无用lunch|新建lunch|自定义customize.mk
26 3
|
17天前
|
移动开发 Java Unix
Android系统 自动加载自定义JAR文件
Android系统 自动加载自定义JAR文件
40 1
|
17天前
|
Shell Android开发 开发者
Android系统 自定义动态修改init.custom.rc
Android系统 自定义动态修改init.custom.rc
34 0
|
17天前
|
存储 安全 Android开发
Android系统 自定义系统和应用权限
Android系统 自定义系统和应用权限
29 0
|
17天前
|
Java API 调度
Android系统 自定义开机广播,禁止后台服务,运行手动安装应用接收开机广播
Android系统 自定义开机广播,禁止后台服务,运行手动安装应用接收开机广播
40 0
|
17天前
|
存储 Java Linux
Android Mstar增加IR 自定义遥控头码完整调试过程
Android Mstar增加IR 自定义遥控头码完整调试过程
27 1
|
28天前
|
XML 数据可视化 Android开发
深入探究Android中的自定义View组件开发
【4月更文挑战第12天】在安卓应用开发中,创建具有独特交互和视觉表现的自定义View组件是增强用户体验的重要手段。本文将详细阐述如何从头开始构建一个Android自定义View,包括理解View的工作原理、处理绘制流程、事件分发机制以及属性的自定义与管理。通过具体案例分析,我们将一步步实现一个可定制的动态进度条,不仅具备基础功能,还能根据业务需求进行扩展,体现高度的产品个性化。