Skip to content

自定义Drawable Demo(圆角/圆形图片,Material动画)

Notifications You must be signed in to change notification settings

Blankeer/DrawableDemo

Repository files navigation

自定义Drawable Demo(圆角/圆形图片,Material动画)

参考:https://github.com/dinuscxj/LoadingDrawable

本项目地址:https://github.com/Blankeer/DrawableDemo

效果图:

gif

蓝色的load是自定义的,红色的是系统的ProgressBar

RoundImageDrawable(圆角图片)

bitmap图片的设置

 mPaint = new Paint();
          BitmapShader bs = new BitmapShader(bitmap,
                  Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
          mPaint.setAntiAlias(true);
          mPaint.setShader(bs);

绘制圆角

canvas.drawRoundRect(mRectF, radius, radius, mPaint);

CircleImageDrawable (圆形图片)

绘制圆形 canvas.drawCircle(radius, radius, radius, mPaint);

MaterialLoadDrawable

模仿material design progerss动画.

将动画分为两个阶段

s代表当前弧度开始绘制角度,e代表当前弧度结束绘制角度, max表示角度的最大值,比如360*0.8,min则相反,比如5度, cs表示每圈开始绘制的角度

  • 第一个阶段:s=cs,e从cs->max+min+cs
  • 第二个阶段:e=max+min+cs,s从cs->max+cs 上面是第0圈的主要流程,需要记录的是每次开始的起始角度cs, 每圈结束后的s值即为下一圈的cs值。
  • 第0圈,cs=0;
  • 第1圈,cs=max;
  • 第2圈,cs=(2*max)%360;
  • ...

主要代码:

 private void setup() {
          mColor = DEFAULT_COLOR;
          mWidth = mHeight = DEFAULT_SIZE;
          mInsetValue = DEFAULT_INSET;
          mMindFraction = DEFAULT_MINDFRACTION;
          mStrokeWidth = DEFAULT_STROKE_WIDTH;
          rectf = new RectF();
          mPaint = new Paint();
          mPaint.setAntiAlias(true);
          mPaint.setColor(mColor);
          mPaint.setStrokeWidth(mStrokeWidth);
          mPaint.setStyle(Paint.Style.STROKE);
          mPaint.setStrokeCap(Paint.Cap.ROUND);
          mDuration = DEFAULT_DURATION;
          mAnimator = ValueAnimator.ofFloat(0F, 1F);//属性动画初始化
          mAnimator.setDuration(mDuration);
          mAnimator.setRepeatMode(ValueAnimator.RESTART);//设置反复动画
          mAnimator.setRepeatCount(ValueAnimator.INFINITE);
          mAnimator.setInterpolator(new FastOutSlowInInterpolator());//插值器
          mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
              @Override
              public void onAnimationUpdate(ValueAnimator animation) {
                  animUpdate(animation.getAnimatedFraction());
                  invalidateSelf();
              }
          });
          mAnimator.addListener(new AnimatorListenerAdapter() {
              @Override
              public void onAnimationRepeat(Animator animation) {
                  super.onAnimationRepeat(animation);
                  count++;
                  mCurrentStartAngle = mStartAngle;//保存开始角度
              }
              @Override
              public void onAnimationStart(Animator animation) {
                  super.onAnimationStart(animation);
                  count = 0;
              }
          });
          mCurrentStartAngle = 0;
      }
      public void start() {
          mAnimator.start();
      }
      public void stop() {
          mAnimator.cancel();
      }
      private void animUpdate(float fraction) {
          mCanvasRotate += 2;//画布旋转每次增加量,可自己调节
          if (fraction <= mMindFraction) {//第一阶段
              //最小角度是值,fraction为0时,还有一小段弧。思路是每次绘制多绘制minAngle的角度
              mEndAngle = (DEFAULT_MAX_ANGLE + DEFAULT_MIN_ANGLE)
                      * (fraction / mMindFraction);//end只是相对start的位移
              // 绘制总长度:(maxAngle+minAngle)/2,当前进度fraction/当前阶段百分比
              if (mEndAngle < DEFAULT_MIN_ANGLE && count > 0) {//当绘制角度小于最小角度时,绘制最小角度
                  mEndAngle = DEFAULT_MIN_ANGLE;//第一圈不执行
              }
          } else {//第二阶段
              //绘制总角度是maxAngle,后面是所占百分比
              mStartAngle = (DEFAULT_MAX_ANGLE) *
                      ((fraction - mMindFraction) / (1 - mMindFraction));
              //endAngle是总角度减startAngle
              mEndAngle = DEFAULT_MAX_ANGLE + DEFAULT_MIN_ANGLE - mStartAngle;
              mStartAngle = (mStartAngle + mCurrentStartAngle) % 360;
          }
  //        System.out.println(fraction + "\t\t" + mStartAngle + "\t\t" + (mEndAngle + mStartAngle));
      }
      @Override
      public void draw(Canvas canvas) {
          int canvasCopy = canvas.save();//保存画布
          rectf.set(getBounds());
          canvas.rotate(mCanvasRotate, getCenterX(), getCenterY());//旋转画布
          rectf.inset(mInsetValue, mInsetValue);
          canvas.drawArc(rectf, mStartAngle, mEndAngle, false, mPaint);
          canvas.restoreToCount(canvasCopy);//恢复画布
      }

About

自定义Drawable Demo(圆角/圆形图片,Material动画)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages