Android 文字上下轮播

00851B11.gif

二话不说，上代码效果图

GIF.gif

今天花了一天时间弄这个效果，本来一会就可以弄好的，可能是脑壳铁。唉

/**
 * 文字上线轮播组件
 * author：bigbear
 *
 * 实现思路：
 *  1、单个动画顺序：显示动画-> 开始动画-> 结束动画 循环
 *  2、前一个组件执行完显示动画后；在开始动画监听中，开始时调用下一个组件的显示动画，开始动画执行完完调用自身结束动画，并调用下一个组件的开始动画
 *  一次成为一个闭环循环。
 *
 */
public class RollTextView extends RelativeLayout {

    Context mContext;
    AnimationSet showAnim, startAnimOne, startAnimTwo, startAnimThree, endAnim;
    TextView mRollTextViewOne, mRollTextViewTwo, mRollTextViewThree;
    List<String> mData = null;
    int index = 0;

    public RollTextView(Context context) {
        super(context);
        this.mContext = context;
        initView();
        initData();
    }

    public RollTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;
        initView();
        initData();
    }

    public RollTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext = context;
        initView();
        initData();
    }

    /**
     * 初始化视图
     */
    private void initView() {
        View view = LayoutInflater.from(mContext).inflate(R.layout.widget_roll_text_view, this);
        mRollTextViewOne = view.findViewById(R.id.mRollTextViewOne);
        mRollTextViewTwo = view.findViewById(R.id.mRollTextViewTwo);
        mRollTextViewThree = view.findViewById(R.id.mRollTextViewThree);
    }

    public void setData(List<String> data){
        this.mData = data;
    }

    /**
     * 初始化数据
     */
    private void initData() {

        AlphaAnimation aaShow = new AlphaAnimation(0, 0.4f);
        aaShow.setDuration(2000);

        TranslateAnimation taShow = new TranslateAnimation(15, 15, 0, 0);
        taShow.setDuration(2000);

        ScaleAnimation saShow = new ScaleAnimation(0.9f, 0.9f, 0.9f, 0.9f);
        saShow.setDuration(2000);

        AlphaAnimation aaStart = new AlphaAnimation(0.4f, 1);
        aaStart.setDuration(3000);

        AlphaAnimation aaEnd = new AlphaAnimation(1, 0.4f);
        aaEnd.setDuration(3000);

        TranslateAnimation taStart = new TranslateAnimation(15, 0, 0, 60);
        taStart.setDuration(3000);

        TranslateAnimation taEnd = new TranslateAnimation(0, 15, 60, 120);
        taEnd.setDuration(3000);

        ScaleAnimation saStart = new ScaleAnimation(0.9f, 1, 0.9f, 1);
        saStart.setDuration(3000);

        ScaleAnimation saEnd = new ScaleAnimation(1, 0.9f, 1, 0.9f);
        saEnd.setDuration(3000);

//      显示动画
        showAnim = new AnimationSet(true);
        showAnim.setDuration(3000);
        showAnim.setStartOffset(1000);
        showAnim.setFillAfter(true);
        showAnim.addAnimation(aaShow);
        showAnim.addAnimation(taShow);
        showAnim.addAnimation(saShow);

//      结束动画
        endAnim = new AnimationSet(true);
        endAnim.setDuration(3000);
        endAnim.addAnimation(aaEnd);
        endAnim.addAnimation(taEnd);
        endAnim.addAnimation(saEnd);

//      第一个组件开始动画
        startAnimOne = new AnimationSet(true);
        startAnimOne.setDuration(3000);
        startAnimOne.addAnimation(aaStart);
        startAnimOne.addAnimation(taStart);
        startAnimOne.addAnimation(saStart);
        startAnimOne.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                mRollTextViewTwo.setText(getData());
                mRollTextViewTwo.startAnimation(showAnim);
            }
            @Override
            public void onAnimationEnd(Animation animation) {
                mRollTextViewOne.startAnimation(endAnim);
                mRollTextViewTwo.startAnimation(startAnimTwo);
            }
            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

//        第二个组件开始动画
        startAnimTwo = new AnimationSet(true);
        startAnimTwo.setDuration(3000);
        startAnimTwo.addAnimation(aaStart);
        startAnimTwo.addAnimation(taStart);
        startAnimTwo.addAnimation(saStart);
        startAnimTwo.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                mRollTextViewThree.setText(getData());
                mRollTextViewThree.startAnimation(showAnim);
            }
            @Override
            public void onAnimationEnd(Animation animation) {
                mRollTextViewTwo.startAnimation(endAnim);
                mRollTextViewThree.startAnimation(startAnimThree);
            }
            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

//        第三个组件开始动画
        startAnimThree = new AnimationSet(true);
        startAnimThree.setDuration(3000);
        startAnimThree.addAnimation(aaStart);
        startAnimThree.addAnimation(taStart);
        startAnimThree.addAnimation(saStart);
        startAnimThree.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                mRollTextViewOne.setText(getData());
                mRollTextViewOne.startAnimation(showAnim);
            }
            @Override
            public void onAnimationEnd(Animation animation) {
                mRollTextViewThree.startAnimation(endAnim);
                mRollTextViewOne.startAnimation(startAnimOne);
            }
            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
    }

    /**
     * 启动
     */
    public void start(){
        mRollTextViewOne.setText(getData());
        mRollTextViewOne.startAnimation(startAnimOne);
    }

    /**
     * 获取显示的数据
     * @return s
     */
    private String getData(){
        return  "烤鸡翅膀，我最爱吃" + index++;
    }

}

当然少不了widget_roll_text_view.xml 代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="250dp"
    android:gravity="center_horizontal"
    android:layout_height="100dp">

    <TextView
        android:id="@+id/mRollTextViewOne"
        android:text="烤鸡翅膀，我最爱吃1"
        android:textSize="14sp"
        android:visibility="invisible"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/mRollTextViewTwo"
        android:text="烤鸡翅膀，我最爱吃2"
        android:textSize="14sp"
        android:visibility="invisible"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/mRollTextViewThree"
        android:text="烤鸡翅膀，我最爱吃3"
        android:textSize="14sp"
        android:visibility="invisible"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>