Android逐字逐渐淡入文本

时间:2012-08-03 02:51:29

标签: android textview fade

我正在尝试按如下方式创建一个屏幕:

               Some very long text, saying something

现在,我想要的是启动画面只加载图像,然后我希望它下面的文字逐个字符淡出:

第1帧:S

第2帧:所以

第3帧:索姆 等...

我的布局看起来像这样(我还没有显示图像):

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:id="@+id/fader">    
    </LinearLayout>

 </RelativeLayout>

我的Java看起来像这样:

public void onCreate(Bundle savedInstanceState)  {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.splash);  

    View faderLayout = findViewById(R.id.fader);

    TextView[] faderTextViews = getFaderTextViews();  
    for(int i=0; i<faderTextViews.length; i++)
    {
        ((LinearLayout) faderLayout).addView(faderTextViews[i]);
        faderLayout.invalidate();

    }

}


private TextView[] getFaderTextViews()
{

     final Animation in = new AlphaAnimation(0.0f, 1.0f);
        in.setDuration(3000);

        final Animation out = new AlphaAnimation(1.0f, 0.0f);
        out.setDuration(3000);
     char[] veryLongString = "This is a very long string".toCharArray();
     TextView[] faderTextViews = new TextView[veryLongString.length];
     for(int i = 0; i<faderTextViews.length; i++)
     {
         TextView temp = new TextView(this);
         temp.setText(veryLongString, i, 1);
         temp.setLayoutParams(new LayoutParams(
                    LayoutParams.WRAP_CONTENT,
                    LayoutParams.WRAP_CONTENT));
         temp.startAnimation(in);
         faderTextViews[i] = temp;

     }
     return faderTextViews;

}

最终发生的事情是整个字符串立即淡入。

有没有办法做到这一点?

4 个答案:

答案 0 :(得分:0)

AnimationDrawable frameAnimation;
frameAnimation = (AnimationDrawable) addselection.getBackground();

@Override public void onWindowFocusChanged(boolean hasFocus) {
    frameAnimation.start();
    super.onWindowFocusChanged(hasFocus);
}

使用此类型的xml

添加drawable
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/add_selection0001" android:duration="50" />
    <item android:drawable="@drawable/add_selection0002" android:duration="50" />
    <item android:drawable="@drawable/add_selection0003" android:duration="50" />
    <item android:drawable="@drawable/add_selection0004" android:duration="50" />
    <item android:drawable="@drawable/add_selection0005" android:duration="50" />
    <item android:drawable="@drawable/add_selection0006" android:duration="50" />
</animation-list>

为序列动画设置不同的图像。将此drawable设置为imageview中的背景。

官方文档网站上有一个相对简单的例子: Animation Resources

答案 1 :(得分:0)

这很好:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}

@Override
protected void onResume() {
    super.onResume();
    Animator anim = fadeStringIntoViewGroup((ViewGroup)findViewById(R.id.fader), "A very, very long string.", 3000);
    //here you can add a another listener to anim if you want (a listener could manipulate the views by set ids).
    anim.start();
}

private Animator fadeStringIntoViewGroup(ViewGroup faderTextContainer, final String vls, int duration){
    Context context = faderTextContainer.getContext();
    final FrameLayout textViewHolder = new FrameLayout(context);
    final TextView textView = new TextView(context);
    final TextView helper = new TextView(context);
    textViewHolder.addView(helper);
    textViewHolder.addView(textView);

    SpannableString helperString = new SpannableString(vls);
    helperString.setSpan(new ForegroundColorSpan(Color.TRANSPARENT), 1, vls.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    helper.setAlpha(0);
    helper.setText(helperString);
    setupCreatedViews(faderTextContainer, textViewHolder, textView, helper);

    final int length = vls.length();
    final int stepDuration = duration/length;
    ObjectAnimator anim = ObjectAnimator.ofFloat(helper, "alpha", 0, 1).setDuration(stepDuration);
    anim.setRepeatCount(length);
    anim.addListener(new Animator.AnimatorListener() {
        int at = 1;
        @Override
        public void onAnimationStart(Animator animation) {}

        @Override
        public void onAnimationEnd(Animator animation) {}

        @Override
        public void onAnimationCancel(Animator animation) {}

        @Override
        public void onAnimationRepeat(Animator animation) {
            if (at < vls.length()) {
                SpannableString textViewString = new SpannableString(vls);
                textViewString.setSpan(new ForegroundColorSpan(Color.TRANSPARENT), at, length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                textView.setText(textViewString);
                helper.setAlpha(0);
                SpannableString helperString = new SpannableString(vls);
                helperString.setSpan(new ForegroundColorSpan(Color.TRANSPARENT), 0, at, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                helperString.setSpan(new ForegroundColorSpan(Color.TRANSPARENT), at + 1, length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                helper.setText(helperString);
                at++;
            }
        }
    });
    return anim;
}

private void setupCreatedViews(ViewGroup containerForAnimatedText, FrameLayout subcontainer, TextView textView, TextView textViewFadeinLetter){
    containerForAnimatedText.addView(subcontainer, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    //here you can set colors, font sizes, ids, padding etc...
}

答案 2 :(得分:0)

对于那些从谷歌来到这里的人(像我一样),这里有一个很棒的图书馆,可以完全满足提问者的需求:

https://github.com/hanks-zyh/HTextView

可悲的是,这些动画仅适用于内联文本(多行将被裁剪)。不过,我认为它非常有用并且实施起来很简单。

答案 3 :(得分:0)

我也需要这样的东西,所以我自己做了一个。试用Fade-In TextView,这是一个自定义TextView库,可以逐个字母地打印文本,并带有漂亮的淡入动画。用法也很简单。

在XML布局中

True

在Java类中

    <believe.cht.fadeintextview.TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:textColor="@android:color/black"

        app:letterDuration="250"/>