58网站建设的目的,怎么建设音乐试听网站,三合一网站源码,建设银行E路航如何自动进入网站前言#最近看框架和源码比较多#xff0c;很久没有写动画了#xff0c;相信很多的朋友都对动画感兴趣#xff0c;我也不例外#xff0c;毕竟做前端还是要靠动画特效吃饭的#xff0c;并且比写功能模块更有成就感。今天我们就来个稍微简单一点的CircleProgressBar热个身。首…前言#最近看框架和源码比较多很久没有写动画了相信很多的朋友都对动画感兴趣我也不例外毕竟做前端还是要靠动画特效吃饭的并且比写功能模块更有成就感。今天我们就来个稍微简单一点的CircleProgressBar热个身。首先需要对ValueAnimator动画还有CanvasPaint画图的相关的类和API都有一定的了解所以这部分还比较薄弱的朋友可以先去学习一下基础知识否则可能会有些吃力。正文#先看一下效果图我不会录屏就百度了一张图片这里写图片描述大概是这样的效果首先我们不考虑效果先画出这个圆形的进度条新建文件CircleProgressBar/*** 进度*/private float mProgress 50;/*** 最大进度*/private int mMaxProgress 100;/*** 绘制进度条*/private void drawProgress(Canvas canvas) {// 开始画进度条// 首先画出背景圆mPaint.setColor(mBackgroundColor);mPaint.setStyle(Paint.Style.FILL);// 这里减去了边框的宽度canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius - mBorderWidth, mPaint);// 画出进度条mPaint.setColor(mProgressBorderColor);mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeWidth(mBorderWidth);// 计算圆弧划过的角度float angle CIRCULAR / mMaxProgress * mProgress;// 这里要画圆弧canvas.drawArc(mContentRectF, -90, angle, false, mPaint);// 画出补全部分的进度条mPaint.setColor(mBorderColor);mPaint.setStrokeWidth(mBorderWidth);// 这里要画圆弧canvas.drawArc(mContentRectF, -90 angle, CIRCULAR - angle, false, mPaint);}先话出背景色的圆然后画出进度条的颜色的边框再画出进度条以外的部分为了显示的明显我分别用了三个颜色最终的效果这里写图片描述最初的样子已经出来了但是有一个小细节要注意这里贴出mMaxProgress 100为什么不是100010000呢当然也可以但是我不推荐这个数字过大大家可以去看看系统自带的ProgressBar他的注释有提醒开发者不要使用过大的max最好是100感兴趣的可以去看一看。现在就差动画了接下来我们来分析一下动画1、首先进度会飞快的上涨以顺时针为方向伸长的部分是头部。2、然后进度会飞速的下降以顺时针为方向缩短的部分是尾部。首先我们来完成第一部分/*** 开始过度动画*/private void startIntermediateAnim() {if (valueAnimator null) {valueAnimator new ValueAnimator().ofFloat(0, mMaxProgress);valueAnimator.setDuration(DURATION);valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {// 设置进度float value (float) valueAnimator.getAnimatedValue();setProgress(value);}});valueAnimator.setRepeatCount(-1);valueAnimator.start();}也是没什么太多的技术含量但是有几点需要说明一下我们使用ValueAnimator().ofFloat是为了动画的流畅性如果你使用了int你会发现动画会有一些细微的卡顿因为int型舍弃了小数部分这样就会出现误差视觉上就会出现卡顿。伸长的动画已经成型了那缩短的动画不就简单了直接动画reverse不就好了我激动得设置了valueAnimator new ValueAnimator().ofFloat(0, mMaxProgress0);或者是valueAnimator.setRepeatMode(ValueAnimator.REVERSE);我迫不及待的运行了代码卧草草竟然不行仔细观察效果我们发现了问题如果是缩短还是从顺时针的头部缩短而不是从尾部这是为什么呢其实从api也可以理解因为我们是从起始位置开始画弧只要起始位置不变尾部肯定不会发生变化。虽然明白了这个道理但是心情非常的压抑难道就要放弃了突然灵光一闪我发现了一个神奇的办法不知道机智的小伙伴是不是也想到了还记得我之前的绘图步骤吗先绘制进度部分然后剩余部分不全。既然进度部分只能头部伸长尾部也是一样那我让补全部分伸长那进度部分的尾部不就是缩短了吗那如何让补全部分伸长呢1、把progress在伸长结束时开始让补全部分使用progress从而让他伸长但是这样会改变原有的功能逻辑非常危险工作量也大。2、最简单的办法把进度的颜色不补全部分的颜色交换然后把位置也互换不就OK了经过简单的修改之后if (valueAnimator null) {valueAnimator new ValueAnimator().ofFloat(0, mMaxProgress);valueAnimator.setDuration(DURATION);valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {float value (float) valueAnimator.getAnimatedValue();setProgress(value);}});valueAnimator.addListener(new Animator.AnimatorListener() {Overridepublic void onAnimationStart(Animator animator) {}Overridepublic void onAnimationEnd(Animator animator) {// 因为是循环动画所以这里不会回调}Overridepublic void onAnimationCancel(Animator animator) {}Overridepublic void onAnimationRepeat(Animator animator) {// 互换两者的颜色int color getProgressBackgroundColor();setProgressBackgroundColor(getProgressColor());setProgressColor(color);}});}valueAnimator.setRepeatCount(-1);valueAnimator.start();ok还有谁最关键的部分已经全部完成了还差最后一点点仔细的观察效果图发现进度条是有最小进度的没有完全消失所以我们再设置一个最小进度并且每次设置进度的时候我们都稍微旋转一下角度这样就会一边伸长缩短一边旋转了/*** 开始过度动画*/private void startIntermediateAnim() {if (valueAnimator null) {valueAnimator new ValueAnimator().ofFloat(mMinProgress, mMaxProgress - mMinProgress);valueAnimator.setDuration(DURATION);valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {float value (float) valueAnimator.getAnimatedValue();setProgress(value);// 每次旋转2度mStartAngle 2;}});valueAnimator.addListener(new Animator.AnimatorListener() {Overridepublic void onAnimationStart(Animator animator) {}Overridepublic void onAnimationEnd(Animator animator) {}Overridepublic void onAnimationCancel(Animator animator) {}Overridepublic void onAnimationRepeat(Animator animator) {// 因为有了最小进度所以每次都要位置设置到补全部分的位置mStartAngle mStartAngle - CIRCULAR / mMaxProgress * mMinProgress;// 互换两者的颜色int color getProgressBackgroundColor();setProgressBackgroundColor(getProgressColor());setProgressColor(color);}});}valueAnimator.setRepeatCount(-1);valueAnimator.start();}最终的效果就想一开始的效果图一样这里不贴了。总结#看上去稍微有点复杂的动画经过我们的分析拆解就变得很简单了。如果是利用Translation, Rotate 这样的动画那实现起来真是太难了ValueAnimator就是从他们中分离出来的专门用来计算差值的强大武器有了它我们开发一些高级的效果就简单多了。我对demo进行了一些修改即可以是普通的圆形进度条也可以是loading的动画就想progressBar一样大家可以下载下来参考一下。ok今天就到这里了明天就是周末了祝大家浪起来~
