在onLayout中实现简单的微动效

2019年5月26日 191次阅读 来源: 十个雨点

转载注明出处：简书-十个雨点

在UI设计中，微动效是一个挺流行的说法，恰当的使用会给APP赋予灵动的生命感。微动效可以是酷炫的动画，也可以只是很简单的过渡，比如下面的两个图。

《在onLayout中实现简单的微动效》 酷炫的微动效
《在onLayout中实现简单的微动效》 相对简单的微动效

太复杂的酷炫动画当然很难直接用代码实现，但是在APP中，也可以实现很多简单却生动的过渡效果。比如下面的图就实现了一个平滑的过渡，很简单，但是确实能够起到强调的作用：

《在onLayout中实现简单的微动效》 简单的微动效

这种简单的效果一般都是使用属性动画来实现的。一开始我是在点击事件中调用方法，在这个方法中设置属性动画，但是设置动画的时候要计算动画的各种参数，比如当前的位置，位移的大小，而这些值往往需要在onLayout中才会计算得到。那为什么不直接在onLayout中来设置属性动画呢？

以上图中的动画为例，这是一个简单的LinearLayout，包含两个TextView，上面的TextView显示设置条目，下面的TextView显示设置的提示语。要实现图中的动画效果，只需要修改onLayout方法，如下：

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    int msgTopOld=msgTv.getTop();
    int hintTopOld = hintTv.getTop();

    super.onLayout(changed, l, t, r, b);

    int msgTopNew=msgTv.getTop();
    int hintTopNew=hintTv.getTop();

    if (showAnimation && showAnimationOnce) {
        if (msgTopOld!=0 && msgTopNew!=msgTopOld) {
            msgTv.clearAnimation();
            msgTv.setY(msgTopOld);
            msgTv.animate().y(msgTopNew).setDuration(300).start();
        }

        if (hintTopOld!=0) {
            if (showHint) {
                hintTv.clearAnimation();
                hintTv.setY(hintTopOld);
                hintTv.setAlpha(0);
                hintTv.animate().y(hintTopNew).alpha(1).setDuration(300).start();
            } else {
                hintTv.clearAnimation();
                hintTv.setY(hintTopOld);
                hintTv.setAlpha(1);
                hintTv.animate().y(hintTopNew).alpha(0).setDuration(300).start();
            }
        }
        showAnimationOnce=false;
    }
}

代码很简单，就是对发生位移的View，利用使用属性动画从原来的位置移动到新的位置，而新出现的View，则利用属性动画，使其慢慢浮现。

这只是一个简单的例子，以此类推可以实现更加复杂多变的动画效果。

完整代码参见Bigbang项目的HintTextView、BigBangLayout、BigBangHeader类的实现。

最后在这里吐槽一下，国外的应用一般都比较注重微动效这一块，而国内应用会少一些。锤子手机内的动效应该是国内做得最好的了吧。最奇特的是，有些应用的国外版本，反而比国内版本的动效更好。可能是我层次还太低，看不到造成这种现象的原因所在…

    原文作者：十个雨点
    原文地址: https://www.jianshu.com/p/93463ab36df9
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞