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"><TextViewandroid: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" /><TextViewandroid: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" /><ImageViewandroid: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;@Overrideprotected 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);}@Overridepublic boolean onTouchEvent(MotionEvent event) {return gestureDetector.onTouchEvent(event);}private class GestureListener extends GestureDetector.SimpleOnGestureListener {@Overridepublic 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