最新消息:欢迎访问Android开发中文站!商务联系QQ:1304524325

仿链家splash

开发进阶 loading 6170浏览 0评论
因为最近购房使用链家APP较多,无意中发现链家的splash挺不错,刚好这几天赋闲在家(公司出游,自己要办贷款手续没法去),就模仿着写了一下,分享给大家:

image

因为色值、图形、素材以及动画效果等并没有刻意的去模仿,外加鄙人艺术细胞不足,所以最终效果有点差强人意。虽然有点丑,但基本的效果都有,不影响我们探讨其实现过程:

一、动画过程整体分析

仔细观察这个页面,发现整个过程包含三个部分,
  1. 整体背景放大
  2. 中间icon的绘制
  3. 底部文字alpha变化
其中,1和3实现比较容易,而且关联性较小,属性动画即可实现,因此关键点在于2的实现。

二、icon绘制过程分析

为了便于技术实现,我们将icon的绘制过程由四个步骤组成:
  • 第一步:水滴滴落。水滴从上而下,到底部后弹起一定高度,然后再次滴落。
  • 第二步:房子icon绘制。房子的绘制从底部开始,到顶部,然后到右侧(由部分空缺)。
  • 第三步:小圆点晃动。房子右侧的小圆点上下晃动,最后回到空缺的中部。
  • 第四步:完整图形。动画完成后的形状。

三、icon绘制的实现

为了清晰的表达动画的各个过程首先定义了一个枚举类型
public static enum State {
    END,//结束状态
    WATER_DROP,//水滴滴落
    HOUSE_DRAW,//房子绘制
    CIRCLE_SHAKE//中心小圆点晃动
}
其实,可以在这个枚举里加入一个draw(canvas)方法,这样绘制的过程,直接通过当前的state的draw方法来完成,逻辑可能更加的清晰。但很多人不太习惯这样的写法,而且也有可能降低我们这个enum 的可读性。
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    updateBySize(w, h, oldw, oldh);
}

private void updateBySize(int w, int h, int oldw, int oldh) {
    mViewHeight = h;
    mViewWidth = w;
    int small = mViewHeight < mLineWidth ? mViewHeight : mViewWidth;
    mLineWidth = small / mLineWidthRate;
    mPaint.setStrokeWidth(mLineWidth);
    mLitleCircleR = small / mLitleCircleRRate;
    mDropCircleR = small / mDropCircleRRate;
    mDropOutsidePoint = small / mDropOutsidePointRate;
    mHouseWidth = small / mHouseWidthRate;
    mDropDistance = small / mDropDistanceRate;
    buidHousePath();
}

/**
 * 构造house路径
 */
private void buidHousePath() {
    mHousePath.moveTo((int) (mHouseWidth * 0.5), mViewHeight - mLineWidth);//初始点
    mHousePath.lineTo(-(int) (mHouseWidth * 0.5), mViewHeight - mLineWidth);
    mHousePath.lineTo(-(int) (mHouseWidth * 0.5), (int) (mViewHeight - mLineWidth - mHouseWidth * 0.8));
    mHousePath.lineTo(0, (int) (mViewHeight - mLineWidth - mHouseWidth * 1.2));
    mHousePath.lineTo((int) (mHouseWidth * 0.5), (int) (mViewHeight - mLineWidth - mHouseWidth * 0.8));
    mHousePath.lineTo((int) (mHouseWidth * 0.5), (int) (mViewHeight - mLineWidth - mHouseWidth * 0.6));
    mMeasure.setPath(mHousePath, false);
}
在onSizeChanged获得view的宽高,通过两边的最小值计算出线宽,圆半径,移动距离等值(这些值与view的两边最小值设定一定的比例),并构建出房子图形的路径。仅仅是为了演示实现过程,所以并没有使用在attr中自定义属性方式对view进行设定,建议大家自行完善,关于attr的使用,后期有机会再给大家分享。
接着进行一些初始化操作:主要包括画笔,动画,以及监听
private void init(Context context) {
        this.mContext = context;
        mPaint = new Paint();
        mPaint.setColor(Color.GREEN);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeJoin(Paint.Join.ROUND);//圆弧
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mDropPath = new Path();
        mHousePath = new Path();
        mHouseTmpPath = new Path();
        mMeasure = new PathMeasure();
        initListener();
        initAnimator();
    }
/**
     * 初始化动画
     */
    private void initAnimator() {
        //初始动画
        mDropCircleAnimator = ValueAnimator.ofFloat(0, 1).setDuration(mDefaultDuration);
        mHouseDrowAnimator = ValueAnimator.ofFloat(0, 1).setDuration(mDefaultDuration);
        mCircleShakeAnimator = ValueAnimator.ofFloat(0, 1).setDuration(mDefaultDuration);
        //设置插值器
        mDropCircleAnimator.setInterpolator(new DropInterpolator());
        mHouseDrowAnimator.setInterpolator(new DecelerateInterpolator());
        //设置进度监听
        mDropCircleAnimator.addUpdateListener(mAnimatorUpdateListener);
        mHouseDrowAnimator.addUpdateListener(mAnimatorUpdateListener);
        mCircleShakeAnimator.addUpdateListener(mAnimatorUpdateListener);
        //设置动画监听
        mDropCircleAnimator.addListener(mAnimatorListener);
        mHouseDrowAnimator.addListener(mAnimatorListener);
        mCircleShakeAnimator.addListener(mAnimatorListener);
    }
使用了属性动画ValueAnimator,并根据不同效果设定了不同的插值器。然而Android提供的插值器不能完全满足我们的效果,需要进行一定的定制。项目中我们通过两种方式来完成:
第一种使用自定义Interpolator(水滴下落):
class DropInterpolator implements TimeInterpolator {

        @Override
        public float getInterpolation(float input) {
            if (input <= 0.6) {
                return input / 0.6f;
            } else if (input <= 0.8) {
                return 1 - ((input - 0.6f) / 0.2f) * 0.4f;
            } else {
                return 0.6f + ((input - 0.8f) / 0.2f) * 0.4f;
            }

        }
    }
第二种在基础Interpolator上进行二次计算,也就是通过提供的Interpolator返回值进行二次计算:
/**
     * 获取Y 坐标
     *
     * @return
     */
    private float getLitleCicleY() {
        if (mAnimatorValue <= 0.5) {
            return mViewHeight - mLineWidth - mHouseWidth * 0.6f + mAnimatorValue / 0.5f *                      mHouseWidth * 0.3f;
        } else if (mAnimatorValue <= 0.75) {
            return mViewHeight - mLineWidth - mHouseWidth * 0.3f - (mAnimatorValue - 0.5f) / 0.25f *         mHouseWidth * 0.1f;
        } else {
            return mViewHeight - mLineWidth - mHouseWidth * 0.4f + (mAnimatorValue - 0.75f) / 0.25f * mHouseWidth * 0.1f;
        }
    }
动画的监听分为进度和状态两种:
private void initListener() {
        mAnimatorUpdateListener = new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mAnimatorValue = (float) animation.getAnimatedValue();
                invalidate();
            }
        };
进度监听主要是为了获得每个动画执行的百分比,并调用invalidate()进行重绘。
mAnimatorListener = new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                changeAnimationState();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        };
    }
状态监听主要是针对不同的状态进行不同的操作,我们这里主要是在动画每个动画结束时调用 changeAnimationState()进行下一个动画的启动以及画笔相关处理操作。
/***
     * 更改动画状态
     */
    private void changeAnimationState() {
        switch (mCurrentState) {
            case WATER_DROP:
                mCurrentState = State.HOUSE_DRAW;
                mPaint.setStrokeWidth(mLineWidth);
                mPaint.setStyle(Paint.Style.STROKE);
                mHouseDrowAnimator.start();
                break;
            case HOUSE_DRAW:
                mCurrentState = State.CIRCLE_SHAKE;
                mCircleShakeAnimator.start();
                break;
            case CIRCLE_SHAKE:
                mPaint.setStyle(Paint.Style.STROKE);
                mCurrentState = State.END;
                if (null != mListener) {
                    mListener.onEnd();
                }
                break;
        }

        if (null != mListener) {
            mListener.onStateChange(mCurrentState);
        }
    }

/***
     * 动画回调
     */
    interface AnimationListener {
        void onStart();

        void onEnd();

        void onStateChange(State state);
    }
changeAnimationState()方法里除了画笔以及动画顺序的控制之外,还可以通过mListener回调给调用者整个房子icon动画的过程和状态。
@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(mViewWidth / 2, 0);
        switch (mCurrentState) {
            case WATER_DROP:
                drawDrop(canvas);
                break;
            case HOUSE_DRAW:
                drawHouse(canvas);
                break;
            case CIRCLE_SHAKE:
                drawCircle(canvas);
                break;
            case END:
                drawEnd(canvas);
                break;
        }

    }
onDraw(canvas)中根据不同的状态进行不同的动画绘制
/**
     * 画水滴动画
     *
     * @param canvas
     */
    private void drawDrop(Canvas canvas) {
        mDropPath.reset();
        RectF oval = new RectF((int) ((mHouseWidth * 0.5) - mDropCircleR * (1 - mAnimatorValue)),
                (int) (mDropDistance * mAnimatorValue),
                (int) (mDropCircleR * (1 - mAnimatorValue) + (mHouseWidth * 0.5)),
                (int) (mDropCircleR * (1 - mAnimatorValue) * 2 + mDropDistance * mAnimatorValue));
        mDropPath.addArc(oval, -180, 180);
        mDropPath.lineTo((int) (mHouseWidth * 0.5), mDropCircleR * (1 - mAnimatorValue) +
                mDropDistance * mAnimatorValue + mDropOutsidePoint * (1 - mAnimatorValue));
        canvas.drawPath(mDropPath, mPaint);
    }
水滴下落动画的关键点在于水滴形状的绘制,这里偷了个懒,没用贝塞尔曲线,而是直接搞了个半圆,以及两条切线。
/***
     * 画房子动画
     * @param canvas
     */
    private void drawHouse(Canvas canvas) {
        mMeasure.getSegment(0, mMeasure.getLength() * mAnimatorValue, mHouseTmpPath, true);
        canvas.drawPath(mHouseTmpPath, mPaint);

    }
房子动画的核心在于PathMeasure的使用,通过其getSegment可以获得其一部分路径,PathMeasure的用处很多,大家可以抽空研究一下,如果有机会我也会给大家分享一下
/**
     * 画小圆动画
     *
     * @param canvas
     */
    private void drawCircle(Canvas canvas) {
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawPath(mHousePath, mPaint);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(mHouseWidth * 0.5f, getLitleCicleY(), mLitleCircleR, mPaint);
    }
小圆晃动的动画相对比较简单,这里没有使用自定义插值器,而是自己在插值器数据上进行二次计算来完成。可能不太容易理解,但其跟自定义插值器的原理是一致的。
/**
     * 绘画结束状态
     *
     * @param canvas
     */
    private void drawEnd(Canvas canvas) {
        if (isShow) {
            mPaint.setStyle(Paint.Style.STROKE);
            canvas.drawPath(mHousePath, mPaint);
            mPaint.setStyle(Paint.Style.FILL);
            canvas.drawCircle(mHouseWidth * 0.5f, mViewHeight - mLineWidth - mHouseWidth * 0.3f, mLitleCircleR, mPaint);
        }
    }
绘制结束状态就是把房子和小圆点绘制上即可,没有动画效果,isShow这个主要是用来判断这个状态是否要显示用的。

需要注意的是,使用这个view时要关闭硬件加速,要不然动画效果出不来。因为调用View.invalidate()的话,缓存的层会不得不重新渲染。

项目地址:Github

转载请注明:Android开发中文站 » 仿链家splash

您必须 登录 才能发表评论!