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

先来一张效果图：

---

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