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,各位大佬勿喷。目前写简书的意义就是做笔记,方便自己后期借鉴。


相关文章
|
5月前
|
Android开发 UED 计算机视觉
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
本文介绍了一款受游戏“金铲铲之战”启发的Android自定义View——线条等待动画的实现过程。通过将布局分为10份,利用`onSizeChanged`测量最小长度,并借助画笔绘制动态线条,实现渐变伸缩效果。动画逻辑通过四个变量控制线条的增长与回退,最终形成流畅的等待动画。代码中详细展示了画笔初始化、线条绘制及动画更新的核心步骤,并提供完整源码供参考。此动画适用于加载场景,提升用户体验。
477 5
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
|
5月前
|
Android开发
Android自定义view之利用PathEffect实现动态效果
本文介绍如何在Android自定义View中利用`PathEffect`实现动态效果。通过改变偏移量,结合`PathEffect`的子类(如`CornerPathEffect`、`DashPathEffect`、`PathDashPathEffect`等)实现路径绘制的动态变化。文章详细解析了各子类的功能与参数,并通过案例代码展示了如何使用`ComposePathEffect`组合效果,以及通过修改偏移量实现动画。最终效果为一个菱形图案沿路径运动,源码附于文末供参考。
|
5月前
|
XML Java Android开发
Android自定义view之网易云推荐歌单界面
本文详细介绍了如何通过自定义View实现网易云音乐推荐歌单界面的效果。首先,作者自定义了一个圆角图片控件`MellowImageView`,用于绘制圆角矩形图片。接着,通过将布局放入`HorizontalScrollView`中,实现了左右滑动功能,并使用`ViewFlipper`添加图片切换动画效果。文章提供了完整的代码示例,包括XML布局、动画文件和Java代码,最终展示了实现效果。此教程适合想了解自定义View和动画效果的开发者。
248 65
Android自定义view之网易云推荐歌单界面
|
5月前
|
XML 前端开发 Android开发
一篇文章带你走近Android自定义view
这是一篇关于Android自定义View的全面教程,涵盖从基础到进阶的知识点。文章首先讲解了自定义View的必要性及简单实现(如通过三个构造函数解决焦点问题),接着深入探讨Canvas绘图、自定义属性设置、动画实现等内容。还提供了具体案例,如跑马灯、折线图、太极图等。此外,文章详细解析了View绘制流程(measure、layout、draw)和事件分发机制。最后延伸至SurfaceView、GLSurfaceView、SVG动画等高级主题,并附带GitHub案例供实践。适合希望深入理解Android自定义View的开发者学习参考。
581 84
|
5月前
|
前端开发 Android开发 UED
讲讲Android为自定义view提供的SurfaceView
本文详细介绍了Android中自定义View时使用SurfaceView的必要性和实现方式。首先分析了在复杂绘制逻辑和高频界面更新场景下,传统View可能引发卡顿的问题,进而引出SurfaceView作为解决方案。文章通过Android官方Demo展示了SurfaceView的基本用法,包括实现`SurfaceHolder.Callback2`接口、与Activity生命周期绑定、子线程中使用`lockCanvas()`和`unlockCanvasAndPost()`方法完成绘图操作。
124 3
|
12月前
|
XML 前端开发 Android开发
Android面试高频知识点(3) 详解Android View的绘制流程
Android面试高频知识点(3) 详解Android View的绘制流程
Android面试高频知识点(3) 详解Android View的绘制流程
|
12月前
|
XML 前端开发 Android开发
Android面试高频知识点(3) 详解Android View的绘制流程
Android面试高频知识点(3) 详解Android View的绘制流程
115 2
|
XML 前端开发 Android开发
Android View的绘制流程和原理详细解说
Android View的绘制流程和原理详细解说
296 3
|
XML 前端开发 Android开发
Android面试高频知识点(3) 详解Android View的绘制流程
View的绘制和事件处理是两个重要的主题,上一篇《图解 Android事件分发机制》已经把事件的分发机制讲得比较详细了,这一篇是针对View的绘制,View的绘制如果你有所了解,基本分为measure、layout、draw 过程,其中比较难理解就是measure过程,所以本篇文章大幅笔地分析measure过程,相对讲得比较详细,文章也比较长,如果你对View的绘制还不是很懂,对measure过程掌握得不是很深刻,那么耐心点,看完这篇文章,相信你会有所收获的。
281 3
|
消息中间件 前端开发 Android开发
Android面试题自定义View之Window、ViewRootImpl和View的三大流程
Android开发中,View的三大核心流程包括measure(测量)、layout(布局)和draw(绘制)。MeasureSpec类在测量过程中起到关键作用,它结合尺寸大小和模式(EXACTLY、AT_MOST、UNSPECIFIED)来指定View应如何测量。onMeasure方法用于自定义View的测量,布局阶段,ViewGroup调用onLayout确定子元素位置,而draw阶段按照特定顺序绘制背景、内容、子元素和装饰。整个流程始于ViewRootImpl的performTraversals,该方法触发测量、布局和绘制。
293 0

热门文章

最新文章