当前位置: 首页 > 编程笔记 >

Android自定义View实现打钩动画功能

齐文林
2023-03-14
本文向大家介绍Android自定义View实现打钩动画功能,包括了Android自定义View实现打钩动画功能的使用技巧和注意事项,需要的朋友参考一下

先上效果图

动图

静态图

1. 回顾

【Android自定义View:一个精致的打钩小动画】上一篇文章,我们已经实现了基本上实现了控件的效果了,但是...但是...过了三四天后,仔细看回自己写的代码,虽然思路还在,但是部分代码还是不能一下子的看得明白...

我的天,这得立马重构啊~ 恰好,有个简友 ChangQin 模仿写了一下这个控件,我看了后觉得我也可以这样实现一下。

2. 深思

关于控件绘制的思路,可以去看看 上一篇文章,这里就不再分析了。这里先来分析一下上一篇文章里面,控件里面的一些顽处,哪些地方需要改进。

就拿 绘制圆环进度 这一步来看

//计数器
private int ringCounter = 0;

@Override
protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 if (!isChecked) {
  ...
  return;
 }
 //画圆弧进度,每次绘制都自加12个单位,也就是圆弧又扫过了12度
 //这里的12个单位先写死,后面我们可以做一个配置来实现自定义
 ringCounter += 12;
 if (ringCounter >= 360) {
  ringCounter = 360;
 }
 canvas.drawArc(mRectF, 90, ringCounter, false, mPaintRing);
 ...
 //强制重绘
 postInvalidate();
}

这里,我们定义了一个计数器ringCounter, 当绘制的时候,是根据12个单位进行自增到达360,从而模拟进度的变化。

仔细想想

通过改变自增的单位来控制动画速度的变化,这很难调整得使自己满意,此时我们可以想到,使动画速度执行快慢的根本就是控制时间啊,如果可以用时间来控制动画速度那得方便多了动画分为4步执行,如果每一步动画都用手写计数器来实现,那得定义4个成员变量或者更多,太多成员变量只会让代码更加混乱如果动画要加上插值器,那手写的计数器根本无法满足看到上面的分析,我无法接受了

3. 改改改

那么怎么去改善上面所说的问题呢,答案就是用自定义的属性动画来解决了,所以这篇文章主要的讲的地方就是用属性动画来替换手写的计数器,尽可能的保证代码逻辑的清晰,特别是onDraw()方法中的代码。

使用属性动画的一个好处就是,给定数值的范围,它会帮你生成一堆你想要的数值,配合插值器还要意想不到的效果呢,下一面就一步一步针对动画执行的部分进行重构

3.1 绘制圆环进度条

首先,使用自定义的ObjectAnimator来模拟进度

//ringProgress是自定义的属性名称,生成数值的范围是0 - 360,就是一个圆的角度
ObjectAnimator mRingAnimator = ObjectAnimator.ofInt(this, "ringProgress", 0, 360);
//定义动画执行的时间,很好的替代之前使用自增的单位来控制动画执行的速度
mRingAnimator.setDuration(mRingAnimatorDuration);
//暂时不需要插值器
mRingAnimator.setInterpolator(null);

自定义属性动画,还需要配置相应的setter和getter,因为在动画执行的时候,会找相应的setter去改变相应的值。

private int getRingProgress() {
 return ringProgress;
}
private void setRingProgress(int ringProgress) {
 //动画执行的时候,会调用setter
 //这里我们可以将动画生成的数值记录下来,用变量存起来,在ondraw的时候用
 this.ringProgress = ringProgress;
 //记得重绘
 postInvalidate();
}

最后,在onDraw()中画图

//画圆弧进度canvas.drawArc(mRectF, 90, ringProgress, false, mPaintRing);

3.2 绘制向圆心收缩的动画

同理,也是造一个属性动画

//这里自定义的属性是圆收缩的半径
ObjectAnimator mCircleAnimator = ObjectAnimator.ofInt(this, "circleRadius", radius - 5, 0);
//加一个减速的插值器
mCircleAnimator.setInterpolator(new DecelerateInterpolator());
mCircleAnimator.setDuration(mCircleAnimatorDuration);

setter/getter也是类似就不说了

最后onDraw()中绘制

//画背景
mPaintCircle.setColor(checkBaseColor);
canvas.drawCircle(centerX, centerY, ringProgress == 360 ? radius : 0, mPaintCircle);
//当进度圆环绘制好了,就画收缩的圆
if (ringProgress == 360) {
 mPaintCircle.setColor(checkTickColor);
 canvas.drawCircle(centerX, centerY, circleRadius, mPaintCircle);
}

3.3 绘制钩和放大再回弹的效果

这是两个独立的效果,这里同时执行,我就合在一起说了

首先也是定义属性动画

//勾出来的透明渐变
ObjectAnimator mAlphaAnimator = ObjectAnimator.ofInt(this, "tickAlpha", 0, 255);
mAlphaAnimator.setDuration(200);
//最后的放大再回弹的动画,改变画笔的宽度来实现
//而画笔的宽度,则是的变化范围是
//首先从初始化宽度开始,再到初始化宽度的n倍,最后又回到初始化的宽度
ObjectAnimator mScaleAnimator = ObjectAnimator.ofFloat(this, "ringStrokeWidth", mPaintRing.getStrokeWidth(), mPaintRing.getStrokeWidth() * SCALE_TIMES, mPaintRing.getStrokeWidth() / SCALE_TIMES);
mScaleAnimator.setInterpolator(null);
mScaleAnimator.setDuration(mScaleAnimatorDuration);
//打钩和放大回弹的动画一起执行
AnimatorSet mAlphaScaleAnimatorSet = new AnimatorSet();
mAlphaScaleAnimatorSet.playTogether(mAlphaAnimator, mScaleAnimator);

getter/setter

private int getTickAlpha() {
 return 0;
}
private void setTickAlpha(int tickAlpha) {
 //设置透明度,可以不用变量来保存了
 //直接将透明度的值设置到画笔里面即可
 mPaintTick.setAlpha(tickAlpha);
 postInvalidate();
}
private float getRingStrokeWidth() {
 return mPaintRing.getStrokeWidth();
}
private void setRingStrokeWidth(float strokeWidth) {
 //设置画笔宽度,可以不用变量来保存了
 //直接将画笔宽度设置到画笔里面即可
 mPaintRing.setStrokeWidth(strokeWidth);
 postInvalidate();
}

最后,同理在onDraw()中绘制即可

if (circleRadius == 0) {
 canvas.drawLines(mPoints, mPaintTick);
 canvas.drawArc(mRectF, 0, 360, false, mPaintRing);
}

3.4 依次执行动画

执行多个动画,可以用到AnimatorSet,其中playTogether()是一起执行,playSequentially()是一个挨着一个,step by step执行。

mFinalAnimatorSet = new AnimatorSet();
mFinalAnimatorSet.playSequentially(mRingAnimator, mCircleAnimator, mAlphaScaleAnimatorSet);

最后在onDraw()中执行动画

//这里定义了一个标识符,用于告诉程序,动画每次只能执行一次
if (!isAnimationRunning) {
 isAnimationRunning = true;
 //执行动画
 mFinalAnimatorSet.start();
}

3.5 每个方法最好能有单一的职责

如果将定义属性动画的方法放在onDraw()中,我个人感觉很乱,并且再仔细看看,这几个属性动画是不需要动态变化的,为什么不抽出来在一开始的时候就初始化呢?

so,我们将定义属性动画的代码抽出来,并且放到构造函数中初始化

public TickView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 ...
 initAnimatorCounter();
}
/**
 * 用ObjectAnimator初始化一些计数器
 */
private void initAnimatorCounter() {
 //圆环进度
 ObjectAnimator mRingAnimator = ObjectAnimator.ofInt(this, "ringProgress", 0, 360);
 ...
 //收缩动画
 ObjectAnimator mCircleAnimator = ObjectAnimator.ofInt(this, "circleRadius", radius - 5, 0);
 ...
 //勾出来的透明渐变
 ObjectAnimator mAlphaAnimator = ObjectAnimator.ofInt(this, "tickAlpha", 0, 255);
 ...
 //最后的放大再回弹的动画,改变画笔的宽度来实现
 ObjectAnimator mScaleAnimator = ObjectAnimator.ofFloat(this, "ringStrokeWidth", mPaintRing.getStrokeWidth(), mPaintRing.getStrokeWidth() * SCALE_TIMES, mPaintRing.getStrokeWidth() / SCALE_TIMES);
 ...
 //打钩和放大回弹的动画一起执行
 AnimatorSet mAlphaScaleAnimatorSet = new AnimatorSet();
 mAlphaScaleAnimatorSet.playTogether(mAlphaAnimator, mScaleAnimator);

 mFinalAnimatorSet = new AnimatorSet();
 mFinalAnimatorSet.playSequentially(mRingAnimator, mCircleAnimator, mAlphaScaleAnimatorSet);
}

最后,onDraw()方法中,只负责简单的绘制,什么都不管

@Override
protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 if (!isChecked) {
  canvas.drawArc(mRectF, 90, 360, false, mPaintRing);
  canvas.drawLines(mPoints, mPaintTick);
  return;
 }
 //画圆弧进度
 canvas.drawArc(mRectF, 90, ringProgress, false, mPaintRing);
 //画黄色的背景
 mPaintCircle.setColor(checkBaseColor);
 canvas.drawCircle(centerX, centerY, ringProgress == 360 ? radius : 0, mPaintCircle);
 //画收缩的白色圆
 if (ringProgress == 360) {
  mPaintCircle.setColor(checkTickColor);
  canvas.drawCircle(centerX, centerY, circleRadius, mPaintCircle);
 }
 //画勾,以及放大收缩的动画
 if (circleRadius == 0) {
  canvas.drawLines(mPoints, mPaintTick);
  canvas.drawArc(mRectF, 0, 360, false, mPaintRing);
 }
 //ObjectAnimator动画替换计数器
 if (!isAnimationRunning) {
  isAnimationRunning = true;
  mFinalAnimatorSet.start();
 }
}

最终效果是一样的,代码逻辑一目了然

所以,个人觉得,在开发中,定时review一下自己的代码,无论对自己,还是对以后维护,是很有帮助的。

That ' s all~感谢大家阅读,最后再放一下项目的github地址

> Github地址:TickView,一个精致的打钩小动画https://github.com/ChengangFeng/TickView

以上就是小编给大家整理的关于自定义View实现打钩动画功能的全部内容,大家可以测试下,如果还有任何问题可以在下方的留言区讨论,感谢对小牛知识库的支持。

 类似资料:
  • 本文向大家介绍Android自定义View画圆功能,包括了Android自定义View画圆功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android自定义View画圆的具体代码,供大家参考,具体内容如下 引入布局 自定义View的java类,继承View 效果图: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Android自定义View绘图实现拖影动画,包括了Android自定义View绘图实现拖影动画的使用技巧和注意事项,需要的朋友参考一下 前几天在“Android绘图之渐隐动画”一文中通过画线实现了渐隐动画,但里面有个问题,画笔较粗(大于1)时线段之间会有裂隙,我又改进了一下。这次效果好多了。 先看效果吧: 然后我们来说说基本的做法:  •根据画笔宽度,计算每一条线段两个顶点对应的四

  • 本文向大家介绍Android自定义View绘图实现渐隐动画,包括了Android自定义View绘图实现渐隐动画的使用技巧和注意事项,需要的朋友参考一下 本文实现了一个有趣的小东西:使用自定义View绘图,一边画线,画出的线条渐渐变淡,直到消失。效果如下图所示: 用属性动画或者渐变填充(Shader)可以做到一笔一笔的变化,但要想一笔渐变(手指不抬起边画边渐隐),没在Android中找到现成的API

  • 本文向大家介绍Android 自定义view实现水波纹动画效果,包括了Android 自定义view实现水波纹动画效果的使用技巧和注意事项,需要的朋友参考一下 在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了个让人兴奋的效果,兴致高昂的来找你,看了之后目的很明确,当然就是希望你能给她; 在这样的关键时候,身子板就一定得硬了,可千万别说不行,爷们儿怎么能说不行呢;

  • 本文向大家介绍Android自定义View实现水波纹引导动画,包括了Android自定义View实现水波纹引导动画的使用技巧和注意事项,需要的朋友参考一下 一、实现效果图 关于贝塞尔曲线 二、实现代码 1.自定义view 2.MainActivity.java 3.activity_main.xml 三、源码下载 http://xiazai.jb51.net/201701/yuanma/Andro

  • 本文向大家介绍Android自定义View实现饼状图带动画效果,包括了Android自定义View实现饼状图带动画效果的使用技巧和注意事项,需要的朋友参考一下 一个简单的自定义view饼状图,加入了动画效果 先看一下效果 下面就直接上代码了 已经加入了详细的注释,同样的原理,还可以将动画加入到柱形图等等。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。