一个漂亮的安卓动画控件（更新）

背景

用过很多APP了吧，很多一开始启动的时候总是显示一页广告，停着好几秒@(￣-￣)@……然后想关的话，还得手动地去向右上角那小小的、一点点的关闭按钮，只要稍微点错一点点就进入了广告，简直ZZ(╯‵□′)╯︵┻━┻。

这样的情景，真的是烦@(￣-￣)@哎……真不知道产品经理是怎么样的，比如像我这样的人，一想到打开一个APP就要看好几秒广告，就不想打开这个APP了@(￣-￣)@。所以这样的设计真的是反效果。

做不能一个漂亮的启动界面吗？这样用户看了之后觉得赏心悦目，打开APP的主动性也会高很多吧。

刚好最近在和导师撕逼ᐠ( ᐢ ᵕ ᐢ )ᐟ （用力怼，出奇迹~），闲得无聊地瞎搞APP，便搞出了一个控件，总之先放个GIF图看看效果~



这个效果调了好久，同事看了之后都觉得不错喵的说~

而且可以通过jitpack可以很方便地在Android Studio里添加依赖喵的说~

（迷之音：“不来一发star吗少年”，并且向你扔出了一个地址：https://github.com/dotomato/FringeLaunchView

代码/原理：

本质上是一个完全自定义的View，所有效果在onDraw()里画出来。

首先定义一个Fringe类，用来帮助我们画单个的条纹。

class Fringe {

...

private float randF(){
return (float) Math.random();
}

//初始化的时候要输入这个条纹的开始的横坐标、结束的横坐标，纵坐标，第几个条纹（虽然现在并没什么卵用），第几组条纹
Fringe(int x1, int x2, int y, int fringeIndex, int groupIndex){
this.x1 = x1;
this.x2 = (int) (x2+ randF()*150);
this.y = y;
h = (int) (fringeHeight*(Math.random()*0.5+0.5));
if (groupIndex==1){
color = HSBtoRGB(mainH1+(randF()-0.5f)*0.1f, 0.3f+ randF()*0.2f, 0.8f+ randF()*0.2f);
}
else if (groupIndex==2) {
color = HSBtoRGB(mainH2+(randF()-0.5f)*0.1f, 0.7f + randF() * 0.2f, 0.8f + randF() * 0.2f);
}
t1 = -Math.random()*0.3;
ts = 0.8f+Math.random()*0.2f;
}

由于整个效果是分成上下两层条纹的，所以在初始化的时候需要传递一些信息进去。

处于下层的条纹要暗一些，就比较符合视觉效果。然后每个条纹在需要对自条的高度、进入的延时、速度巴拉巴拉的做一下随机化，每个条纹的个性就出来了~这些参数在之后计算坐标的时候会用到。

然后是比较关键的绘制部分代码：

private void drawFront(Canvas canvas, float t){
double k = t*ts/enterDuration + t1;
k = Math.max(0, k);
k = Math.min(1, k);
double k1 = Math.cos(Math.pow(k,1.3)*3*Math.PI);
double k2 = (Math.cos(Math.pow(k,0.2)*Math.PI)+1)/2;
double k3 = 1-k1*k2;

double m = (1-k3)*50;

int left = (int) (x1 + k3*(x2- x1));
int right = left + fringeWidth;
int top = (int) (y + m);
int bottom = top + h;

shadowRect.left = left-shadowWidth1;
shadowRect.top = top-shadowWidth1;
shadowRect.right = right+shadowWidth1;
shadowRect.bottom = bottom+shadowWidth1;
shadowPatch.draw(canvas, shadowRect);

fringeRect.left = left;
fringeRect.top = top;
fringeRect.right = right;
fringeRect.bottom = bottom;

fringePaint.setColor(color);
canvas.drawRect(fringeRect, fringePaint);
}

private void drawBack(Canvas canvas, float t){
double k = t/exitDuration + t1*2;
k = Math.max(0, k);
k = Math.min(1, k);
double k1 = Math.pow(1-k, 1);

int left = (int) (x1 + k1*(x2- x1));
int right = left + fringeWidth;
int top = y;
int bottom = top + h;

shadowRect.left = left-shadowWidth1;
shadowRect.top = top-shadowWidth1;
shadowRect.right = right+shadowWidth1;
shadowRect.bottom = bottom+shadowWidth1;
shadowPatch.draw(canvas, shadowRect);

fringeRect.left = left;
fringeRect.top = top;
fringeRect.right = right;
fringeRect.bottom = bottom;
fringePaint.setColor(color);
canvas.drawRect(fringeRect, fringePaint);
}

两个函数，分别是进入时的代码和退出时的代码。

先是做了一些曲线的计算工作，嘛，这里自己慢慢调就好，不要问我为什么这里是pow这里是cos。感觉，凭感觉~ᐠ( ᐢ ᵕ ᐢ )ᐟ （其实我是先python画图看一下大概曲线符合弹跳动画的形状，然后再在真机上慢慢调整@(￣-￣)@

然后再根据曲线计算当前时刻的坐标。

然后是绘制，绘制部份分为两步，先是用shadowPatch来绘制阴影层，shadowPatch是一个NinePatch。然后再用普通的canvas.drawRect来绘制彩色的条纹。

有了Fringe这个类之后，就可以再用一个FringeGroup类来管理每一层的绘制了，代码如下：

class FringeGroup {

private int degree;
private long startTime;
private ArrayList<Fringe> fringes = new ArrayList<>();

FringeGroup(Context context, int left, int top, int degree, int index){

startTime =0;
Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.shadow);
shadowPatch = new NinePatch(bitmap, bitmap.getNinePatchChunk(), null);
this.degree = degree;

for (int i = 0; i< fringeCount; i++){
Fringe fringe = new Fringe(left+ slideLength, left, top+ intervalHeight *i, i, index);
fringes.add(fringe);
}
Collections.shuffle(fringes);
}

void start(){
startTime = System.currentTimeMillis();
}

void back(){
startTime = System.currentTimeMillis();
}

void onDraw(Canvas canvas){
if (isInEditMode()){
canvas.rotate(degree);
float t = previewTime;
for (Fringe fringe : fringes) {
fringe.drawFront(canvas, t);
}
canvas.rotate(-degree);
return;
}

if ((fringeState ==1 || fringeState ==2 || fringeState ==3) && startTime!=0) {
canvas.rotate(degree);
float t = (System.currentTimeMillis() - startTime)/1000.0f;
for (Fringe fringe : fringes) {
fringe.drawFront(canvas, t);
}
canvas.rotate(-degree);
}

if (fringeState ==4){
canvas.rotate(degree);
float t = (System.currentTimeMillis() - startTime)/1000.0f;
for (Fringe fringe : fringes) {
fringe.drawBack(canvas, t);
}
canvas.rotate(-degree);
}

}

每一个层有不同的旋转角度，以及原点坐标，这样子就能通过旋转移动两个层，把整个屏幕盖住（迷之音：简直是天才的设计wwwwww

以及fringeState这个是一个状态值 ，由于这个控制件涉及到进入过程、退出过程、用户点击，所以状态还是比较复杂的@(￣-￣)@

所需要实现的交互逻辑是：自动开始“进入”过程。如果在“进入”过程中用户点击了屏幕，则“进入”过程不被打断，在结束后自动到“退出”过程。如果在“进入”过程中用户没有点击屏幕，则“进入”过程完毕后，停留在完毕状态，等待用户点击，才到“退出”过程。

所以这就需要一个状态机，fringeState就是状态值，含义如下：

1：正在进入，用户没有点击

2：正在进入，用户已经点击

3：进入完毕，用户没有点击

4：正在退出

5：退出完毕

完成了FringeGroup之后，再在View里进行一下属性的获取，初始化，触模事件的处理就行了。关键代码如下：

属性的获取：

private void getAttrs(Context context, AttributeSet attrs){
TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.FringeLaunchView, 0, 0);
try{
mainH1 = a.getFloat(R.styleable.FringeLaunchView_mainH1, 0.9f);
mainH2 = a.getFloat(R.styleable.FringeLaunchView_mainH2, 0.98f);
degree = a.getInteger(R.styleable.FringeLaunchView_degree, 20);
fringeCount = a.getInteger(R.styleable.FringeLaunchView_fringeCount, 15);
intervalHeight = a.getInteger(R.styleable.FringeLaunchView_intervalHeight, 150);
fringeHeight = a.getInteger(R.styleable.FringeLaunchView_fringeHeight, 300);
fringeWidth = a.getInteger(R.styleable.FringeLaunchView_fringeWidth, 2500);
slideLength = a.getInteger(R.styleable.FringeLaunchView_slideLength, 1500);
overlapWidth = a.getInteger(R.styleable.FringeLaunchView_overlapWidth, 700);
enterDuration = a.getFloat(R.styleable.FringeLaunchView_enterDuration, 1.5f);
exitDuration = a.getFloat(R.styleable.FringeLaunchView_exitDuration, 0.7f);
previewTime = a.getFloat(R.styleable.FringeLaunchView_previewTime, 2);
}finally {
a.recycle();
}
}

话说安卓这里真的没有一个更简单的方法来完成属性的获取吗？@(￣-￣)@ 我改个属性名，改个类型都很麻烦诶……

然后是两个FrigneGroup的初始化：

private void init(Context context){
fringePaint = new Paint();
backgroundPaint = new Paint();
canvasRect = new Rect();

fringeGroup1 = new FringeGroup(context,0, 0, -degree, 1);
fringeGroup2 = new FringeGroup(context, -overlapWidth, -fringeCount*intervalHeight, -degree-180, 2);

ExitdelayMillis = (long) ((exitDuration+1) * 1000);

exited = false;
fringeState = 1;
exitState = 0;
}

在onDraw里View本身还需要画一个白底来盖住底下的View，在退出的时候白底渐变消失。

@Override
protected void onDraw(Canvas canvas)
{
canvasRect.right = canvas.getWidth();
canvasRect.bottom = canvas.getHeight();

if (exitState ==0) {
backgroundPaint.setARGB(255, 255, 255, 255);
canvas.drawRect(canvasRect, backgroundPaint);
} else {
float t =(System.currentTimeMillis() - startTime)/1000.0f;
int a = (int) (Math.max(0, 1-t*2)*255);
backgroundPaint.setARGB(a, 255, 255, 255);
canvas.drawRect(canvasRect, backgroundPaint);
}

fringeGroup2.onDraw(canvas);
fringeGroup1.onDraw(canvas);

if (fringeState !=5) {
invalidate();
}
}

触摸事件的处理以及对外接口的处理就不代码了，有兴趣的请移步github上下载源码@(￣-￣)@

（迷之音：不，请务必、烦请、劳驾、给大佬递茶、回旋180度，一个star~ᐠ( ᐢ ᵕ ᐢ )ᐟ

（（再扔一次地址：https://github.com/dotomato/FringeLaunchView