今天开始记录工作中遇到的需要实现的动画效果实现自定义view动画,后期会有一些列动画设计思路的文章。
在这里分享的是设计实现思路,仅供学习使用,让大家拿到稍微复杂点的动画的时候要知道该如何去一步步分解实现,而不是抱怨
下边就先来看看设计需要的效果图及我们最终实现的效果图,毕竟有图有真相嘛!
99.gif
其实我刚拿到设计图的时候心想,MD直接给一张gif图不就行了何必这个麻烦呐,
随后冷静下来之后(其实就是抱怨之后)想想作为一名Android开发者总不能什么动画都依赖设计师吧,那样的话会显得我们开发者没什么卵用啊,说不定还会被设计师鄙视哦,
设计师对你深深的鄙视
于是就开始了动画分析及实现之旅。
通过这个gif动画我们分析出动画过程的实质:
一个长方形(或者是圆角长方形)逐渐过渡成为两边是半圆的长方形,于此同时长方形两边向中间靠拢最终形成一个圆,然后圆上升一定高度,最后在圆里边画出对勾(✔).整个动画分解的其实就是这几个部分,那么我们该如何实现呐,不要捉急,继续往下看。
h
第一步:我们要先画出一个圆角矩形吧
/**
* 绘制带圆角的矩形
*
* @param canvas 画布
*/
private void draw_oval_to_circle(Canvas canvas) {
//这里是对矩形的位置大小的设置
rectf.left = two_circle_distance;
rectf.top = 0;
rectf.right = width - two_circle_distance;
rectf.bottom = height;
//画圆角矩形
canvas.drawRoundRect(rectf, circleAngle, circleAngle, paint);
}
圆角矩形绘制完成之后就是改变圆角半径的大小