【自定义View】一起来画个风车吧~

最新推荐文章于 2023-08-04 09:12:53 发布

风卷云飞会天黑

最新推荐文章于 2023-08-04 09:12:53 发布

阅读量2.3k

点赞数 1

分类专栏： Android学习ing 文章标签： android-自定义view

本文链接：https://blog.csdn.net/castledrv/article/details/78541620

版权

Android学习ing 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

先来一张效果图：
这里写图片描述

Chrome上使用Infinity标签页，看到右下角有个风车，点击更换壁纸：
这里写图片描述

觉得挺简单的，就用自定义View实现了。
一般来讲可以先考虑那些属性可以配置，进行自定义属性。不过这里不为具体生产使用，就简单的画一画。就直接开搞。

先分析风车的组成：

这里写图片描述

根据绘制顺序可以分析出
- 一根棒子
- 8个三角形
- 最后一个圆点

分析出来之后呢就开始画吧。
棒子呢直接一个很粗的线段即可：

   canvas.drawLine(pointX1, pointY1, pointX1, pointY1 + 400, mPaint);

这个棒棒下面要多出来多少距离合适可以自己配置，我只是为了先画出来。

然后就是8个三角形，这里每对颜色一深一浅，九浅一深。使用 Path来记录三角形路径。
这里贴出一段，因为这些三角形都是等腰的，画两个边就行，不用花多大功夫就能计算出路径：

  path1 = new Path();
        path1.moveTo(pointX, pointY);        
        path1.lineTo(pointX - 300, pointY);   
        path1.lineTo(pointX - 150, pointY + 150);
        path1.close();

唰唰唰，最后画一个实心圆就好了。一番绘制就大功告成了：
这里写图片描述

最后就是动画转起来吧：

      ValueAnimator  animator=ValueAnimator.ofFloat(0,360);
        animator.setDuration(1500);
        animator.setInterpolator(new LinearInterpolator());
        animator.setRepeatCount(ObjectAnimator.INFINITE);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                degree= (float) valueAnimator.getAnimatedValue();
                postInvalidate();
            }
        });
        animator.start();

onDraw里

   canvas.drawLine(pointX1, pointY1, pointX1, pointY1 + 400, mPaint);
        canvas.save();
        canvas.translate(pointX1, pointY1);
        canvas.rotate(-degree);
        canvas.drawPath(path1, mPaint1);
        ...
        canvas.drawCircle(pointX, pointY, 30, mPaint);
        canvas.restore();

是不是很简单？
git地址：https://github.com/VongVia1209/WindmillView