Androidstudio实现引导页文字动画

1. 功能需求

1、引导页具有两行文字（“疫情在前”和“共克时艰”），和向上的 图标。

2、进入【引导页】后，“疫情在前”文字从屏幕最左边水平滚动到中 间；“共克时艰”文字从屏幕最右边水平滚动到中间；需要两排文字 同时到达中间。

3、向上滑动页面时，跳转到【疫情大数据报告】界面。

2. 代码实现过程

1. 编写布局文件

创建一个布局文件 activity_guide.xml，用于显示引导页的内容:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="100dp"
        android:text="疫情在前"
        android:textColor="#000099"
        android:textSize="34sp"
        android:textStyle="bold"
        android:visibility="invisible" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:text="共克时艰"
        android:textColor="#ff0000"
        android:textSize="34sp"
        android:textStyle="bold"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/arrow_up"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="50dp"
        android:src="@drawable/ic_baseline_keyboard_double_arrow_up_24" />
</RelativeLayout>

2. 实现引导页GuideActivity

在GuideActivity中，实现文字动画效果，并处理手势向上滑时，触发跳转到目标页面事件：

public class GuideActivity extends AppCompatActivity {
    private TextView text1, text2;
    private ImageView arrowUp;
    private GestureDetector gestureDetector;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);

        //初始化控件
        text1 = findViewById(R.id.text1);
        text2 = findViewById(R.id.text2);
        arrowUp = findViewById(R.id.arrow_up);
        // 设置手势检测
        gestureDetector = new GestureDetector(this, new GestureListener());

        // 启动文字滚动动画
        startTextAnimation();
        // 启动箭头上下移动的循环动画
        startArrowAnimation();
    }

    private void startArrowAnimation() {
        // 创建上下移动的动画
        TranslateAnimation animateArrow = new TranslateAnimation(0, 0, 0, 50); // 从当前位置向下移动50像素
        animateArrow.setDuration(800); // 动画持续时间
        animateArrow.setRepeatCount(Animation.INFINITE); // 无限循环
        animateArrow.setRepeatMode(Animation.REVERSE); // 反向重复
        arrowUp.startAnimation(animateArrow);
    }


    private void startTextAnimation() {
        // 获取屏幕宽度
        int screenWidth = getResources().getDisplayMetrics().widthPixels;

        // 设置文字1的动画
        TranslateAnimation animateText1 = new TranslateAnimation(-screenWidth, 0, 0, 0);
        animateText1.setDuration(1000);
        animateText1.setFillAfter(true);
        text1.startAnimation(animateText1);
        text1.setVisibility(View.VISIBLE);

        // 设置文字2的动画
        TranslateAnimation animateText2 = new TranslateAnimation(screenWidth, 0, 0, 0);
        animateText2.setDuration(1000);
        animateText2.setFillAfter(true);
        text2.startAnimation(animateText2);
        text2.setVisibility(View.VISIBLE);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return gestureDetector.onTouchEvent(event);
    }

    private class GestureListener extends GestureDetector.SimpleOnGestureListener {
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            if (e1.getY() - e2.getY() > 50) {
                // 向上滑动
                Toast.makeText(GuideActivity.this, "这里实现跳转", Toast.LENGTH_SHORT).show();
                //跳转到目标页面
//                Intent intent = new Intent(GuideActivity.this, MainActivity.class);
//                startActivity(intent);
//                finish();
                return true;
            }
            return false;
        }
    }
}

3. 总结

1. 动画使用TranslateAnimation来实现
2. 手势使用GestureDetector来实现
3. 获取屏幕宽度使用getDisplayMetrics().widthPixels

4. 效果演示

5. 关于作者其它项目视频教程介绍

1. Android新闻资讯app实战：https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
2. Androidstudio开发购物商城实战：https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
3. Android开发备忘录记事本实战：https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
4. Androidstudio底部导航栏实现：https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
5. Android使用TabLayout+ViewPager2实现左右滑动切换：https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8