码迷,mamicode.com
首页 > 其他好文 > 详细

TextView淡入淡出效果

时间:2015-03-14 16:46:27      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:

经常看到有些应用里面TextView会有淡入淡出效果,给人一种眼前一亮的感觉,如下图:

技术分享

这篇文章简单介绍下它的代码实现。

首先,可以先将此动画分解成两部分,即淡入和淡出,淡入的时候,从底部向中心点移动,移动的过程中,文字越变越清晰;

淡出的时候,从中心点向顶部移动,移动过程中,文字越变越模糊。这其中涉及到两个属性:translationY(控件在纵向上的移动距离)、alpha(控件的不透明度)

本章将利用属性动画实现其效果。

首先,看淡出的实现:

private ObjectAnimator mFadeOutObjectAnimator;
//由于淡出,是向上移动,坐标为负,这里设定向上移动150个像素
mFadeOutObjectAnimator = ObjectAnimator.ofFloat(mFadeinoutTv, "translationY", 0, -150);
//动画执行时间设定为500毫秒
mFadeOutObjectAnimator.setDuration(500);
mFadeOutObjectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //当前动画时间点的动画值,在0到-150之间
                float value = (float) animation.getAnimatedValue();
                //由于不透明度取值为0-1,故而除以150,value/150取值在-1到0之间
                mFadeinoutTv.setAlpha(1 + value/150);
            }
        });
mFadeOutObjectAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
               //动画执行完毕后修改TextView的值
                mFadeinoutTv.setText("124");
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
mFadeOutObjectAnimator.start();

以上代码大概意思为将TextView以一定规律向上从中心点向上移动150像素,同时将TextView的不透明度从1慢慢变到0,达到TextView淡出的效果。效果如下图:

技术分享

我们再来看看淡入的实现:

private ObjectAnimator mFadeInObjectAnimator;
//由于是淡入,从底部向中心点移动,移动距离为150像素
mFadeInObjectAnimator = ObjectAnimator.ofFloat(mFadeinoutTv, "translationY", 150, 0);
//动画执行时间设置为500毫秒
mFadeInObjectAnimator.setDuration(500);
//动画推迟100毫秒执行
mFadeInObjectAnimator.setStartDelay(100);
mFadeInObjectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //当前动画时间点的动画值
                float value = (float) animation.getAnimatedValue();
                //动画值在150-0之间变化,而alpha在0-1之间变化,故而alue/150
                mFadeinoutTv.setAlpha(1 - value/150);
            }
        });
mFadeInObjectAnimator.start();

以上代码大概意思为将TextView以一定规律从底部向中心点移动,同时将TextView的不透明度从0慢慢变到1,达到TextView淡入的效果。效果如下图:

技术分享

好了,现在淡入、淡出两个动画都实现了,只要组合起来执行便可,如下代码:

//AnimatorSet是可以让几个动画组合在一起执行的类
private AnimatorSet mAnimatorSet;
mAnimatorSet = new AnimatorSet();
//先淡出再淡入
mAnimatorSet.play(mFadeOutObjectAnimator).before(mFadeInObjectAnimator);
mAnimatorSet.start();

效果图:

技术分享

源码:

https://github.com/taothreeyears/TextViewFadeInOut

TextView淡入淡出效果

标签:

原文地址:http://www.cnblogs.com/tyrion/p/4337630.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!