十分钟搞定酷炫动画,万圣节惊悚的聊天界面

7,394 阅读7分钟

emmmm....这次取标题好难啊,我也不知道这个动画叫什么名字好~

同样是一个小伙伴的需求,我帮忙做的实现,然后给我发了几个小红包,今天上班可以任性一会点一杯星巴克了,这里再次感谢扔物线大大教我写动画,哈哈哈哈~

这次的十分钟动画同样只要十分钟就可以实现,没有标题狗哦。

顺便说一下,并不是我写的所有动画都会出十分钟系列的文章,前两次是绘制,这次主要是 ObjectAnimation,以后的十分钟系列也会是不同的知识点,喜欢的朋友关注一下呗。

话题扯远了,先来看效果吧~

这是我在 demo 上的实现效果~

需求:参考设计图实现,越逼真越好。

动画拆解

老规矩,拿到动画,实现之前先惯例拆解,这次动画我们还是拆解成三个阶段吧。

  • 一阶段:在屏幕上以固定的速度依次出现十几个“惊悚”的表情icon,每个表情的旋转角度、位置随机、并且越靠近屏幕中央的 icon 越大。
  • 二阶段:根据各个 icon的旋转角度,“左右”抖动。注意这里不是屏幕的左右,而是 icon 的作用抖动。也就是说不同旋转角度的 icon,抖动的方向不一样。
  • 三阶段:放大到8倍大小,并且在放大动画执行到一半的时候,透明度从1到0.

拆解动画的分步骤实现

看到这里的小伙伴可以自行思考一下实现方式。

思考三分钟。。。

好,三分钟过去了。

本次动画的三个阶段都是基于 ObjectAnimation 做的实现。如果对 ObjectAnimation 还不是特别了解的小伙伴赶紧儿去学一下一下 HenCoder 系列教程的1.6和1.7。

一阶段

这里有三个需求。

  • 以固定的速度在屏幕上出现若干个“惊悚”表情
  • 惊悚表情的旋转角度、位置随机
  • 越靠近屏幕中央的表情越大

首先第一个问题,这个很简单,只牵涉到定时功能。在0 ~ n 的时间内依次绘制0 ~ m 个icon 即可。

第二个问题,关于每个表情的旋转角度、位置的随机,可能会出现icon 重叠的问题,但是如果每次新增一个 icon 都要去检测一遍和现有 icon是否存在覆盖问题的话,性能上会比较尴尬,而且随机出现位置并不是强需求,最后和设计师沟通后,同意17个 icon 的大小、旋转角度写死。

第三个问题,第二个问题解决了,第三个问题自然不存在了。

哈哈哈哈哈,是不是很棒,程序员要记得勇敢的去和设计师沟通。
好了,我还是说一下如果设计师不同意写死位置,又要去 icon 不能相互覆盖的情况下,我们该怎么办。

  • 如果检测新增 icon 是否会遮盖其他已存在 icon?首先我们把一个 看成是一个圆,icon 会随机生成一个圆心 point(x,y),同时我们也能根据大小计算出半径。然后在添加之前去遍历已存在的 icon,判断新老 icon 的圆心距离是否大于半径只和。
  • 如何约靠近屏幕中心表情越大。设置根据 icon 的圆心点 point(x,y),再根据屏幕中间的点 center(centX,centY),设置一个 x 轴的居中系数和一个 y 轴的居中系数,然后根据这两个个系数设置 icon 的 scale 大小。

由于这里的参数牵涉到 icon 的圆心点位置 x、y,旋转角度 rotate,缩放大小 scale。所以我们可以创建一个 bean IconInfo 来保存这些信息。

二阶段

需求:根据 icon 的旋转角度,做左右抖动的操作。

这个有点尴尬,如果只是0度的旋转,那么左右抖动 50px 就只需要 x 轴加减50px 就行了。but,90度的旋转就变成了 y 轴加减 50px了。这两种情况还好,那么45度呢?岂不是变成了 x、y 轴同时加减

? \dfrac{ \sqrt{2}}{2} *50?

咦,当时我是想到了这里,突然有了思路,这特么不就是一个计算正弦余弦的公司嘛。所以,当旋转角度为 rotate的时候,x 轴的偏离方向就是 cos(rotate) · offset, y 轴就是 sin(rotate)·offset。

这个正弦余弦是初中的数学知识,大家应该都看得懂吧。

三阶段

这个没什么意思,就是一个 scaleX、scaleY和 alpha 的操作了。

代码实现

由于这不是我自己的项目,也不清楚是否有其他类似的需求,那么代码实现上,应该尽量的解耦,最好是能够一行代码调用就能够显示这个动画。

想象一下,我们的 Toast、SnackBar ,同样是在屏幕上弹出一个节目,但他们的实现多么解耦。

这次我的实现参考了 SnackBar ,不用在布局文件里面入侵代码,实现了一行代码显示动画,即插即用~哈哈哈哈哈

先来感受一下代码的调用~

findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            AnimationHelper.start(v);
        }
    });

好了,不扯犊子了,我直接贴代码。

public class AnimationHelper {

public static void start(View view) {
    ViewGroup suitableParent = findSuitableParent(view);
    MyView child = new MyView(view.getContext());
    suitableParent.addView(child);
}

private static ViewGroup findSuitableParent(View view) {
    ViewGroup fallback = null;
    do {
        if (view instanceof FrameLayout) {
            if (view.getId() == android.R.id.content) {
                return (ViewGroup) view;
            } else {
                fallback = (ViewGroup) view;
            }
        }
        if (view != null) {
            final ViewParent parent = view.getParent();
            view = parent instanceof View ? (View) parent : null;
        }
    } while (view != null);
    return fallback;
}

private static class MyView extends View implements View.OnClickListener {

    private Bitmap mIcon;
    private Paint mPaint;
    private int mWidth;
    private int mHeight;
    private int showCount;
    private int shake;
    private ArrayList<AnimationInfo> mInfo = new ArrayList<>();
    Matrix mMatrix = new Matrix();

    public MyView(Context context) {
        super(context);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        mWidth = MeasureSpec.getSize(widthMeasureSpec);
        mHeight = MeasureSpec.getSize(heightMeasureSpec);
        init();
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }


    private void init() {
        if (mWidth == 0)
            return;
        mIcon = BitmapFactory.decodeResource(getResources(), R.drawable.ic_face_shock);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.WHITE);


        mInfo.clear();

        int width = (int) (mIcon.getWidth() * 0.5);
        int height = (int) (mIcon.getHeight() * 0.5);
        int centerX = mWidth / 2 - width / 2;
        mInfo.add(new AnimationInfo(0.5F, 0, centerX + width * 4F, mHeight * 3 / 4 - height));
        mInfo.add(new AnimationInfo(0.55F, 20, centerX + width * 3.4F, mHeight * 3 / 4 - height * 2.2F));
        mInfo.add(new AnimationInfo(0.6F, 340, centerX + width * 2.6F, mHeight * 3 / 4 - height * 3.5F));

        mInfo.add(new AnimationInfo(0.65F, 20, centerX - width, mHeight / 2 - height));
        mInfo.add(new AnimationInfo(0.6F, 340, centerX - width * 2.8F, mHeight / 2 + height));

        mInfo.add(new AnimationInfo(0.5F, 20, centerX + width * 0.5F, mHeight / 4 - height * 2F));

        mInfo.add(new AnimationInfo(0.7F, 320, centerX, mHeight / 2F));

        mInfo.add(new AnimationInfo(0.5F, 40, centerX - width * 0.8F, mHeight / 2 + height * 3F));

        mInfo.add(new AnimationInfo(0.7F, 250, centerX - width * 2F, mHeight / 2 - height * 2F));

        mInfo.add(new AnimationInfo(0.6F, 320, centerX - width * 3F, mHeight / 2 - height * 1.5F));

        mInfo.add(new AnimationInfo(0.7F, 45, centerX + width * 3F, mHeight / 2 - height * 2F));

        mInfo.add(new AnimationInfo(0.75F, 20, centerX, mHeight / 2 - height * 2.5F));

        mInfo.add(new AnimationInfo(0.6F, 320, centerX + width * 1.5F, mHeight / 2 - height * 4F));

        mInfo.add(new AnimationInfo(0.6F, 45, centerX + width * 0.5F, mHeight / 2 - height * 4.5F));

        mInfo.add(new AnimationInfo(0.5F, 320, centerX - width * 1.8F, mHeight / 2 - height * 5F));

        mInfo.add(new AnimationInfo(0.6F, 100, centerX + width * 1.8F, mHeight / 2 + height * 3F));

        mInfo.add(new AnimationInfo(0.5F, 320, centerX, mHeight / 2 + height * 5F));

        mInfo.add(new AnimationInfo(0.6F, 10, centerX - width * 0.5F, mHeight / 2 + height * 1.5F));

        showCount = 0;

        setOnClickListener(this);

        ObjectAnimator animator1, animator2, animator3;


        animator1 = ObjectAnimator.ofInt(this, "showCount", mInfo.size());
        animator1.setDuration(mInfo.size() * 35);

        animator2 = ObjectAnimator.ofInt(this, "shake", 0, 20, 0, -20, 0, 20, 0, -20);
        animator2.setDuration(300);

        PropertyValuesHolder scaleXValuesHolder = PropertyValuesHolder.ofFloat("scaleX", 1, 8);
        PropertyValuesHolder scaleYValuesHolder = PropertyValuesHolder.ofFloat("scaleY", 1, 8);
        Keyframe keyframe1 = Keyframe.ofFloat(0, 1);
        Keyframe keyframe2 = Keyframe.ofFloat(0.5f, 1);
        Keyframe keyframe3 = Keyframe.ofFloat(1, 0);
        PropertyValuesHolder alphaValuesHolder = PropertyValuesHolder.ofKeyframe("alpha", keyframe1, keyframe2, keyframe3);
        animator3 = ObjectAnimator.ofPropertyValuesHolder(this, scaleXValuesHolder, scaleYValuesHolder, alphaValuesHolder);
        animator3.setDuration(200);

        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playSequentially(animator1, animator2, animator3);
        animatorSet.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (showCount < mInfo.size()) {
            drawStep1(canvas);
        } else {
            drawStep2(canvas);
        }

    }

    private void drawStep1(Canvas canvas) {
        for (int i = 0; i < showCount && i < mInfo.size(); i++) {
            AnimationInfo info = mInfo.get(i);
            canvas.save();
            mMatrix.reset();
            mMatrix.postScale(info.scale, info.scale, info.x, info.y);
            mMatrix.postRotate(info.rotate, info.x, info.y);
            canvas.concat(mMatrix);
            canvas.drawBitmap(mIcon, info.x, info.y, mPaint);
            canvas.restore();
        }
    }

    private void drawStep2(Canvas canvas) {
        for (int i = 0; i < showCount && i < mInfo.size(); i++) {
            AnimationInfo info = mInfo.get(i);
            canvas.save();
            mMatrix.reset();
            float x = info.calculateTranslationX(shake);
            float y = info.calculateTranslationY(shake);
            mMatrix.postScale(info.scale, info.scale, x, y);
            mMatrix.postRotate(info.rotate, x, y);
            canvas.concat(mMatrix);
            canvas.drawBitmap(mIcon, x, y, mPaint);
            canvas.restore();
        }
    }

    @Override
    public void onClick(View v) {
        ViewGroup parent = (ViewGroup) v.getParent();
        parent.removeView(v);
    }

    @Keep
    private void setShowCount(int showCount) {
        this.showCount = showCount;
        invalidate();
    }

    @Keep
    private void setShake(int shake) {
        this.shake = shake;
        invalidate();
    }

}

private static class AnimationInfo {
    float scale;
    float rotate;
    float x;
    float y;

    public AnimationInfo(float scale, float rotate, float x, float y) {
        this.scale = scale;
        this.rotate = rotate;
        this.x = x;
        this.y = y;
    }

    public float calculateTranslationX(float length) {
        return (float) Math.cos(rotate) * length + x;
    }

    public float calculateTranslationY(float length) {
        return (float) Math.sin(rotate) * length + y;
    }


}

}

代码比较简单,我就不写注释了。

有几个点我想提一下~

  • 正常情况下,MyView 命名是不规范的,MyView 也不应该作为 AnimationHelper 的内部类,可以把 MyView单独提出了,AnimationInfo作为 MyView 的内部类。
  • AnimationHelper 里面的findSuitableParent 方法拷贝自 SnackBar,这个方法我在分析 SnackBar 源码的时候讲过,就不再赘述了。
  • onDraw 方法里面的drawStep1 和drawStep2其实可以合并成一个方法,我为了便于大家理解所以两个方法分开写了。
  • 如果你还有什么可以优化的代码,尽管拍砖,我都接着~
  • 绘制里面用到了 canvas 和Matrix 相关的代码如果看不懂可以去看扔物线的文章。
  • 以后想到再补充~

喜欢记得点个关注哦~