01月24, 2017

在onLayout中实现简单的微动效

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

效果图

酷炫的微动效

相对简单的微动效

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

简单的微动效

实现

这种简单的效果一般都是使用属性动画来实现的。一开始我是在点击事件中调用方法,在这个方法中设置属性动画,但是设置动画的时候要计算动画的各种参数,比如当前的位置,位移的大小,而这些值往往需要在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类的实现。

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

转载注明出处:十个雨点

本文链接:http://www.siki.space/post/animations_in_onlayout.html

-- EOF --

Comments