如何在Android中实现文字淡入淡出效果？

Question

我有一个段落的文本，当点击按钮时，我希望该文本淡出，更改为其他文本，然后再淡入。我有一些代码，但它只执行了淡入动画而没有淡出。

    final TextView mSwitcher = (TextView) findViewById(R.id.bookContent);
    mSwitcher.setText("old text");

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

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

    Button moveOn = (Button) findViewById(R.id.moveOn);
    moveOn.setOnClickListener( new OnClickListener() {
        public void onClick(View v) {

            mSwitcher.startAnimation(out);
            mSwitcher.setText("new text");
            mSwitcher.startAnimation(in);

        }
    });

- Andy Lobel

Answer 1

看起来你是在将动画设置为“out”后立即将其设置为“in”。这只会使“in”动画起作用。

为了使第二个动画紧接着第一个动画开始，你可以向第一个动画添加一个监听器：

out.setAnimationListener(new AnimationListener() {

    @Override
    public void onAnimationEnd(Animation animation) {
        mSwitcher.setText("New Text");
        mSwitcher.startAnimation(in);

    }
});

然后，在您的onClick()方法中：

public void onClick(View v) {

    mSwitcher.startAnimation(out);

}

那应该就可以了。

---

另一种方法是使用AnimationSet。

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

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

AnimationSet as = new AnimationSet(true);
as.addAnimation(out);
in.setStartOffset(3000);
as.addAnimation(in);

那么，不要从out开始，而是从as开始。

希望这可以帮到你！

- eboix

---

@eboxis 感谢您分享知识。有没有办法为多个视图按顺序执行动画？我尝试在第一个视图的animationEnd中启动第二个视图的动画...但是当我这样做时...第一个视图再次被动画化...有什么建议吗？ - CoDe

在AnimationListener实现中设置淡入动画之前或之后的文本会防止淡入动画发生--新文本只是立即出现。 - shoe

@shoe 你的意思是第一种方法不再可行了吗？如果是这样，我会编辑我的回答。 - eboix

Answer 2

你应该考虑使用类似于的东西。Android文档中有一个关于的简短文档。但是我最好推荐的是查看API Demos，其中有一个非常棒且易于使用的示例。下载API Demos并自行查看，或者在此处查看。

- Brian

Answer 3

如果您想使用Animation，可以使用AnimatorListener来监听第一次动画何时完成，然后开始第二个动画。这将是onAnimationEnd()。

更多信息请参见：http://developer.android.com/reference/android/animation/Animator.AnimatorListener.html 也许使用AnimationSet可以有更好的方法，但这个方法肯定有效。

- Michell Bak

Answer 4

有一种更好的方法可以达到相同的效果。

您应该将动画配置为以反向模式重复播放。

以下是一个示例：

    final Animation out = new AlphaAnimation(1.0f, 0.0f);
    out.setRepeatCount(Animation.INFINITE);
    out.setRepeatMode(Animation.REVERSE);
    out.setDuration(3000);
    mSwitcher.startAnimation(out);

- Alex Sáenz Rojas

Answer 5

为了补充eboix的答案...这是我如何淡入文本和淡出文本，每次淡入和淡出之间都有延迟（即在淡入后立即）。

我的XML看起来像这样。

    <TextView
     android:id="@+id/textView1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_gravity="center_horizontal"
     android:gravity="center"
     android:text="Retrieving Result"
     android:textColor="@color/general_app_colour"
     android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
     android:id="@+id/blobText"
     android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center"
        android:text="Please Wait" />

</LinearLayout>

当您在活动/片段/对话框片段中使用这些变量时，以下是我在我的项目中使用的变量...

public class Loading_Dialog extends DialogFragment {
    public String[] text = new String[]{""};
    TextView blobText;
    Animation inAnimation;
    Animation displayLength;
    Animation delayAnimation;
    Animation outAnimation;
    //duration for fade effects
    int fadeEffectDuration = 700;
    //duration for delay between fadeout and fadein
    int delayDuration = 1000;
    int displayFor = 2000;
    public String[] text = new String[]{""};

现在初始化的对象和变量可以像这样使用，我在我的对话框片段中使用了它，在oncreateDialog方法中。

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {

    final Dialog dialog = new Dialog(getActivity(),R.style.LoadingDialogAnimation);
dialog.getWindow().setContentView(R.layout.dialog_loading);
blobText = (TextView) dialog.findViewById(R.id.blobText);
    inAnimation = new AlphaAnimation(0f, 1f);
    inAnimation.setDuration(fadeEffectDuration);        
    displayLength = new AlphaAnimation(1f, 1f);
    displayLength.setDuration(displayFor);
    delayAnimation = new AlphaAnimation(0f, 0f);
    delayAnimation.setDuration(delayDuration);
    outAnimation = new AlphaAnimation(1f, 0f);
    outAnimation.setDuration(fadeEffectDuration);
    inAnimation.setAnimationListener(new AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
        position++;
    if(position>=text.length)
    {
        position = 0;
    }
    blobText.setText(text[position]);
}           
@Override
public void onAnimationRepeat(Animation animation) {}           
@Override
public void onAnimationEnd(Animation animation) {
    blobText.startAnimation(displayLength);
}
});

displayLength.setAnimationListener(new AnimationListener() {

@Override
public void onAnimationStart(Animation animation) {
    // TODO Auto-generated method stub

 }

@Override
public void onAnimationRepeat(Animation animation) {
   // TODO Auto-generated method stub

 }

@Override
public void onAnimationEnd(Animation animation) {
    // TODO Auto-generated method stub
    blobText.startAnimation(outAnimation);  
}
});

    outAnimation.setAnimationListener(new AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
        // TODO Auto-generated method stub
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
        // TODO Auto-generated method stub
    }

    @Override
    public void onAnimationEnd(Animation animation) {
        // TODO Auto-generated method stub
        blobText.startAnimation(delayAnimation);    
    }
    });
    delayAnimation.setAnimationListener(new AnimationListener() {

    @Override
    public void onAnimationStart(Animation animation) {
    // TODO Auto-generated method stub
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
    // TODO Auto-generated method stub

    }

@Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
    blobText.startAnimation(inAnimation);
}
});

blobText.startAnimation(outAnimation);

- kunmi

Answer 6

当我需要淡入/淡出一些文本时，我更喜欢使用一个函数来完成这个任务：

protected void onCreate(Bundle savedInstanceState) {
{
...
//Declare the array of texts:
String aSentences[]={"Sentence 1", "Sentence 2", "<b><i>Sentence 3</i></b>"};
TextView tView = (TextView)findViewById(R.id.Name_TextView_Object);

//call the function:
animateText(tView,aSentences,0,false);
}

private void animateText(final TextView textView, final String texts[], final int textIndex, final boolean forever) {
        //textView <-- The View which displays the texts
        //texts[] <-- Holds R references to the texts to display
        //textIndex <-- index of the first text to show in texts[]
        //forever <-- If equals true then after the last text it starts all over again with the first text resulting in an infinite loop. You have been warned.

        int fadeInDuration = 1000; // Configure time values here
        int timeBetween = 5000;
        int fadeOutDuration = 2000;

        textView.setVisibility(View.INVISIBLE);    //Visible or invisible by default - this will apply when the animation ends
        textView.setText(Html.fromHtml(texts[textIndex]));

        Animation fadeIn = new AlphaAnimation(0, 1);
        fadeIn.setInterpolator(new DecelerateInterpolator()); // add this
        fadeIn.setDuration(fadeInDuration);

        Animation fadeOut = new AlphaAnimation(1, 0);
        fadeOut.setInterpolator(new AccelerateInterpolator()); // and this
        fadeOut.setStartOffset(fadeInDuration + timeBetween);
        fadeOut.setDuration(fadeOutDuration);

        AnimationSet animation = new AnimationSet(false); // change to false
        animation.addAnimation(fadeIn);
        if((texts.length-1) != textIndex) animation.addAnimation(fadeOut);
        animation.setRepeatCount(1);
        textView.setAnimation(animation);

        animation.setAnimationListener(new Animation.AnimationListener() {
            public void onAnimationEnd(Animation animation) {
                if (texts.length -1 > textIndex) {
                    animateText(textView, texts, textIndex + 1,forever); //Calls itself until it gets to the end of the array
                }
                else {
                    textView.setVisibility(View.VISIBLE);
                    if (forever == true){
                        animateText(textView, texts, 0,forever);  //Calls itself to start the animation all over again in a loop if forever = true
                    }
                    else
                        {//do something when the end is reached}
                }
            }
            public void onAnimationRepeat(Animation animation) {
                // TODO Auto-generated method stub
            }
            public void onAnimationStart(Animation animation) {
                // TODO Auto-generated method stub
            }
        });
    }

- Edimar Martins