代码艺术-Android针对带有复杂动画自定义view的代码设计

Android自定义view有时需要完成一些复杂的动画，这时后会发现代码看起来还是蛮复杂的，如何实现让代码结构清晰，对提供代码稳定性以及对代码修改有着非常大的帮助。下面是我提供的一种思路。

思路原理： 我们知道一个动画其实是有固定流程的，比如一个走动的小人，他先从左往右走，然后跳一下，然后从左往右走。这时我们可以把这个动画划分为三个小流程：1.左往右走。2.跳一下。3.右往左走。 三个流程依次执行，执行完上一个就到下一个。所以整个设计思路就是：流程划分、流程控制。

原理是这样，下面通过代码来实现一个比较帅的加载动画，效果如下：

这个是个加载控件动画，主要包含了两个方法，一个是显示show，一个是隐藏hide，show时有它显示时的动画效果，hide时有它的动画效果，所以我们分别对这两个动画效果进行流程划分。

show时的动画：

这个动画我划分了两个流程：1.执行加载动画前显示。2.执行加载动画。

    @Override
    public void onShow() {
        loadingState = LoadingState.show;
        mShowController.clearProcess();     
        canceltimer();//清除之前的动画
        //添加流程1，执行动画前显示八个小球界面
        mShowController.addProcess(new       ShowProcess1(mShowController));
        //添加流程2执行加载动画
        mShowController.addProcess(new ShowProcess2(mShowController));
        mShowController.start();
        postInvalidate();
    }

可以看到，这时代码结构就非常清晰，如果这个动画需要改动，只需要增删改想要的流程就可以了。

上面的代码中的mShowController是显示show动画的流程控制器，它的作用是对添加的流程就行控制与管理。在view的onDraw的方法里面把canvas传入给当前执行的流程，就可以指定只让当前的流程进行刷新了。

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        switch (loadingState) {
        case show:
            mShowController.canvas = canvas;
            //刷新当前流程
            mShowController.inValid(canvas);
            break;
        case hide:
            mHideController.canvas = canvas;
            mHideController.inValid(canvas);
            break;
        case resume:
            mResumeController.canvas = canvas;
            mResumeController.inValid(canvas);
            break;
        default:
            break;
        }

下面看看流程ShowProcess1 的代码：

/**
     * @author bifan 第一个，初始化界面
     * 
     */
    private class ShowProcess1 extends CanvaProcess {

        public ShowProcess1(CanvaProcessController processController) {
            super(processController);

        }

        @Override
        public void inValid(Canvas canvas) {
        //view刷新时，如果当前流程是这个，就会调用到这个方法，在这里执行当前流程的界面操作。
            canvas.drawColor(Bgcolor);
            initBallSize();
            drawLoadingBitmap(canvas, 0);
            NextProcess();

        }

        @Override
        public void startProcess() {
//执行该流程时调用该方法，进行初始化操作或者启动动画等
        }

        @Override
        public void release() {
        }

    }

在看看ShowProcess2 流程2：

/**
     * @author bifan 第一个，执行加载动画
     * 
     */
    private class ShowProcess2 extends CanvaProcess {

        public ShowProcess2(CanvaProcessController processController) {
            super(processController);

        }

        @Override
        public void inValid(Canvas canvas) {

            canvas.drawColor(Bgcolor);//画出背景颜色
            drawLoadingBitmap(canvas, Rotatedegree);//画出小球

        }

        @Override
        public void startProcess() {
            //启动动画
            startloadinganimation();
        }

        @Override
        public void release() {
        }

    }
    private void startloadinganimation() {//通过Timer实现动画
        canceltimer();
        mTimer = new Timer();

        float br = Ballradius;

        int nums;// 铺满的圆个数
        float angle;
        long fretime;

        if (br > 0 && Loadingradius > 0) {
            angle = (float) (Math.toDegrees(Math.asin(br / Loadingradius))) * 2;

        } else {
            angle = 360 / 8 / 2;
        }

        nums = (int) (360 / 8 / angle);
        fretime = 1000 / 25 / nums;

        final float anglec = angle;

        mTimer.schedule(new TimerTask() {

            @Override
            public void run() {
                Rotatedegree = Rotatedegree + anglec;
                postInvalidate();
            }
        }, 200, fretime);

    }

**

hide时的动画：

**

这个动画划分了5个流程，具体如下：

@Override
    public void onHide() {
        loadingState = LoadingState.hide;
        mShowController.clearProcess();
        mHideController.clearProcess();
        canceltimer();
        //流程1：隐藏时界面初始化
        mHideController.addProcess(new HideProcess1(mHideController));
        //流程2：界面小球向外扩展动画
        mHideController.addProcess(new HideProcess2(mHideController));
        //流程3：界面小球向内收缩
        mHideController.addProcess(new HideProcess3(mHideController));
        //流程4:小球收缩到中心时的一个动画效果
        mHideController.addProcess(new HideProcess4(mHideController));
        //流程5：让界面以圆的范围扩展可见
        mHideController.addProcess(new HideProcess5(mHideController));

        mHideController.start();

        postInvalidate();

    }

具体各个流程的详细代码就不贴了。

小结：可以明显的看到，这种按流程划分的代码设计，对于带有很复杂的动画效果的自定义viwe来说，代码结构会非常清晰，逻辑很很好把握。如果你有更好的方式，还望指教一下。