Android自定义view之属性动画熟悉
KiaSEJZ
8年前
<p>最近项目中有一个这样的需求，当用户填写完数据之后，传后台去计算，然后需要跑一个这样的动画，由于这个动画效果同事用的是后台切的图组成的帧动画，然后一向强迫症如我就非常不喜欢那么多图片就是为了成就这么一个动画，于是乎我决定自己用最近学习的属性动画来写一个，如有错误或者更好的解决办法，请及时指正，话不多说，先看图：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/a1398abc166d6b9a7d0177119167cf97.gif"></p> <p>我们可以来分析一下，首先呢我们可以把这个图分成四部分，三串数字一个圆，每一串数字一个接一个的从圆的上侧滚动到下侧，但是注意并不是同时的，我们可以用三个动画为三串数字来实现这个效果（这是我的想法），先从中间开始，因为中间部分坐标什么的都比较简单：</p> <p>在这里把自定义view的几个步骤讲的稍微详细一点，为了自己能得到复习的同时也为了能帮助需要了解自定义view的同学，顺便说一下，如果你还没有看我的另外一篇关于自定义view之属性动画的，请移步： Android自定义view之属性动画初见（http://www.jianshu.com/p/0e10a6ed80dc）</p> <h3><strong>1 自定义属性</strong></h3> <p>先自定义属性，以便以后可以自己定制，圆的颜色，半径，字体颜色及大小，我我们暂时就需要这么几个属性：</p> <pre> <code class="language-java"><declare-styleable name="CustomNumAnimView"> <attr name="round_radius" format="dimension" /> <attr name="round_color" format="color" /> <attr name="text_color" format="color" /> <attr name="text_size" format="dimension" /> </declare-styleable></code></pre> <h3><strong>2 获得属性所对应的值</strong></h3> <p>好了，然后我们得在构造方法中获得属性所对应的值：</p> <p><span style="box-sizing:border-box;">private</span> <span style="box-sizing:border-box;">int</span> roundColor; <span style="box-sizing:border-box;">//圆的颜色<br /><br /></span><span style="box-sizing:border-box;">private</span> <span style="box-sizing:border-box;">int</span> textColor; <span style="box-sizing:border-box;">//数字的颜色<br /><br /></span><span style="box-sizing:border-box;">private</span> <span style="box-sizing:border-box;">float</span> textSize; <span style="box-sizing:border-box;">//数字字体大小<br /><br /></span><span style="box-sizing:border-box;">private</span> <span style="box-sizing:border-box;">float</span> roundRadius; <span style="box-sizing:border-box;">//圆的半径<br /><br /></span><span style="box-sizing:border-box;">private</span> Paint mPaint; <span style="box-sizing:border-box;">//画笔<br /><br /></span><span style="box-sizing:border-box;">private</span> Rect textRect; <span style="box-sizing:border-box;">//包裹数字的矩形<br /><br /></span><span style="box-sizing: border-box;"><span style="box-sizing:border-box;">public</span> <span style="box-sizing:border-box;">CustomNumAnimView</span><span style="box-sizing: border-box;">(Context context, AttributeSet attrs)</span> </span>{ super(context, attrs); <span style="box-sizing:border-box;">//获取自定义属性</span> TypedArray <span style="box-sizing:border-box;">array</span> = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomNumAnimView, defStyleAttr, <span style="box-sizing:border-box;">0</span>); roundColor = <span style="box-sizing:border-box;">array</span>.getColor(R.styleable.CustomNumAnimView_round_color, ContextCompat.getColor(context, R.color.colorPrimary)); roundRadius = <span style="box-sizing:border-box;">array</span>.getDimension(R.styleable.CustomNumAnimView_round_radius, <span style="box-sizing:border-box;">50</span>); textColor = <span style="box-sizing:border-box;">array</span>.getColor(R.styleable.CustomNumAnimView_text_color, Color.WHITE); textSize = <span style="box-sizing:border-box;">array</span>.getDimension(R.styleable.CustomNumAnimView_text_size, <span style="box-sizing:border-box;">30</span>); <br /> <span style="box-sizing:border-box;">array</span>.recycle(); mPaint = <span style="box-sizing:border-box;">new</span> Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setTextSize(textSize); textRect = <span style="box-sizing:border-box;">new</span> Rect(); <span style="box-sizing:border-box;">//得到数字矩形的宽高，以用来画数字的时候纠正数字的位置</span> mPaint.getTextBounds(middleNum, <span style="box-sizing:border-box;">0</span>, middleNum.length(), textRect); }</p> <h3><strong>3 画圆</strong></h3> <p>获取完属性之后，我们得要画一个圆，画在哪里呢？当然是屏幕的中心了，在onDraw方法中做如下操作：</p> <pre> <code class="language-java">@Overrideprotected void onDraw(Canvas canvas) { super.onDraw(canvas); mPaint.setAntiAlias(true); //设置抗锯齿 mPaint.setStyle(Paint.Style.FILL_AND_STROKE); //设置画笔填充，画实心圆 mPaint.setColor(roundColor); //设置圆的颜色 canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, roundRadius, mPaint); //画圆 }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/554fb1793b9069eb0d320cff71eed909.png"></p> <h3><strong>4 画数字</strong></h3> <p>我们可以画数字了，在画数字之前我想让大家知道Android中手机屏幕的坐标系的结构，如下图所示：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/672e26abad422775c9dd6151b1c47343.jpg"></p> <p>好了，对坐标系有一定了解之后，我们开始画数字，先把中间数字的效果做出来，我记得我在上一篇关于动画的博客中有讲到TypeEvaluator，这真是个好东西，有不清楚的同学请移步我之前的博客，在这里也给大家推荐一个学习属性动画的博客： Android自定义控件三部曲文章索引（http://blog.csdn.net/harvic880925/article/details/50995268）</p> <pre> <code class="language-java">public class CustomPointEvaluator implements TypeEvaluator { /** * * @param fraction 系数 * @param startValue 起始值 * @param endValue 终点值 * @return */ @Override public Object evaluate(float fraction, Object startValue, Object endValue) { CustomPoint startPoint = (CustomPoint) startValue; CustomPoint endPoint = (CustomPoint) endValue; float x = startPoint.getX() + fraction * (endPoint.getX() - startPoint.getX()); float y = startPoint.getY() + fraction * (endPoint.getY() - startPoint.getY()); CustomPoint point = new CustomPoint(x, y); return point; } }</code></pre> <p>这个类帮助我们告诉系统如何在设置的时间内从初始值过渡到结束值，并获取中间的状态</p> <h3><strong>5</strong> <strong>CustomPoint</strong></h3> <p>上面的类中还有一个东西CustomPoint，这个表示每一个数字行进过程中的坐标，我们把它当作一个点来处理，这样更加方便：</p> <pre> <code class="language-java">public class CustomPoint { private float x; //点的x坐标 private float y; //点的y坐标 public CustomPoint(float x, float y) { this.x = x; this.y = y; } public float getX() { return x; } public void setX(float x) { this.x = x; } public float getY() { return y; } public void setY(float y) { this.y = y; } }</code></pre> <h3><strong>6 开始动画的过程</strong></h3> <p>然后我们就开始动画的过程：</p> <pre> <code class="language-java">private boolean isFirstInit = false; //是否是第一次初始化 private CustomPoint middlePoint; //中间的数字的实时点 private ValueAnimator middleAnim; //中间数字动画 private String middleNum = "9"; private boolean isMiddleNumInvalidate = false; //中间数字是否重绘界面 @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (!isFirstInit) { middlePoint = new CustomPoint(getMeasuredWidth() / 2 - textRect.width() / 2, getMeasuredHeight() / 2 - roundRadius - textRect.height() / 2); drawText(canvas); startAnimation(); //开始动画 isFirstInit = true; } else { drawText(canvas); } } /** * 画数字 * @param canvas */ private void drawText(Canvas canvas) { mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.FILL_AND_STROKE); mPaint.setColor(roundColor); canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, roundRadius, mPaint); mPaint.setColor(textColor); mPaint.setTextSize(textSize); if (isMiddleNumInvalidate) { canvas.drawText(middleNum, middlePoint.getX(), middlePoint.getY(), mPaint); isMiddleNumInvalidate = false; } }</code></pre> <h3><strong>7</strong> <strong>startAnimation</strong></h3> <p>这个过程还是比较好理解的，首先所有的点我们只初始化一遍，然后开始动画也只在第一次初始化中执行，因为我们设置的动画是无限循环的，然后就是我们的startAnimation()方法了：</p> <pre> <code class="language-java">private void startAnimation() { //初始化中间数字的开始点的位置 final CustomPoint startPoint = new CustomPoint(getMeasuredWidth() / 2 - textRect.width() / 2, getMeasuredHeight() / 2 - roundRadius - textRect.height() / 2); //初始化中间数字的结束点的位置 final CustomPoint endPoint = new CustomPoint(getMeasuredWidth() / 2 - textRect.width() / 2, getMeasuredHeight() / 2 + roundRadius + textRect.height() / 2); middleAnim = ValueAnimator.ofObject(new CustomPointEvaluator(), startPoint, endPoint); //监听从起始点到终点过程中点的变化,并获取点然后重新绘制界面 middleAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { middlePoint = (CustomPoint) animation.getAnimatedValue(); isMiddleNumInvalidate = true; invalidate(); } }); middleAnim.setDuration(300); middleAnim.setRepeatCount(ValueAnimator.INFINITE); }</code></pre> <h3><strong>8</strong> <strong>动画效果</strong></h3> <p>这个过程也还是比较好理解的，首先我们创建了两个点，也就是数字的初始位置以及结束位置，然后再利用ValueAnimator的ofObject方法来对数字行进路线进行分析，然后每一次监听的时候都让界面进行重绘，这样就能感觉数字一直在移动，让我们来看一下效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/bfdd40c42e5aebe965b21b9467466bf8.gif"></p> <h3><strong>9</strong> <strong>在一次动画结束之后，取随机数 </strong></h3> <p>OMG，图片录制的不太友好，实际效果可不是这样子的，但是我们不难发现，数字好像没有变，只是单一的数字，下面我们要做的就是在一次动画结束之后，取随机数，怎么样才能知道动画一次运行完成了呢？万能的google肯定会有方法的，我们只需要再加一个监听就好了：</p> <pre> <code class="language-java">middleAnim.addListener(new CustomAnimListener() { @Override public void onAnimationRepeat(Animator animation) { middleNum = getRandom(); } }); /** * 获取0-9之间的随机数 * * @return */ private String getRandom() { int random = (int) (Math.random() * 9); return String.valueOf(random); }</code></pre> <h3><strong>10 动画重复之后效果</strong></h3> <p>这个监听就是当动画重复之后会执行这个方法，我们也可以认为每当动画执行完一遍之后都会执行这个方法。好了，让我们再来看看效果吧：(可能录屏软件都有点问题，看起来并不和谐)</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/00d6700cfab28e2751f14a8cb21398af.gif"></p> <h3><strong>11 分析</strong></h3> <p>完成一个之后，剩下的两个就简单了，我们只需要找到旁边两个点的坐标就行了，我是这么分析的，我们来看一张图：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/1fcd5870a141c622195d6d88f8c64342.jpg"></p> <p>首先呢，左右两边肯定是关于 Y 轴对称的，而且我的想法是，这三个数字所在的点将 X 轴平分成了四段（只包括整个圆），然后根据这个可以算出左边点的横纵坐标，纵左边是横坐标的根号三倍，算出坐标之后就好办了</p> <h3><strong>12</strong> <strong>完整效果</strong></h3> <p>好了，完整的代码已上传github，该有的注释我都加上去了，有不懂得地方可以私信我，如果还有更好的解决方法也请私戳我，下面来看一下最后的效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/ef506064b94e1cbbd7fdfeaa29a16ff8.gif"></p> <p>好吧！看起来也不怎么和谐了，不过大家可以下载代码去跑一遍，真正运行起来的不是这个样子的，代码我已上传至GitHub（ https://github.com/Jakemesdg/CustomNumAnimDemo ），有需要的同学可以下载，star</p> <p> </p> <p>来自：http://mp.weixin.qq.com/s/9AvvuKkiW8tveiEVQ0y5oA</p> <p> </p>