Android好看的动画欢迎界面（附有详细代码）

柔情只为你懂 2024-04-08 09:49 98阅读 0赞

首先来演示一下视频效果

从视频效果中我们可以看到，这个欢迎界面的效果还是不错的，感兴趣的可以尝试一下，比较简单，下面会给出具体代码实现。

**main\_activity.xml**

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        android:orientation="vertical"
        android:background="#1f1f1d">
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
    
            <View
                android:id="@+id/first_line"
                android:layout_width="20dp"
                android:layout_height="50dp"
                android:layout_centerHorizontal="true"
                android:background="@color/white"/>
    
            <View
                android:id="@+id/second_line"
                android:layout_width="20dp"
                android:layout_height="100dp"
                android:layout_toRightOf="@+id/first_line"
                android:layout_marginLeft="8dp"
                android:background="#ff0000"/>
    
            <View
                android:id="@+id/third_line"
                android:layout_width="20dp"
                android:layout_height="250dp"
                android:layout_toRightOf="@+id/second_line"
                android:layout_marginLeft="8dp"
                android:background="@color/white"/>
    
            <View
                android:id="@+id/fourth_line"
                android:layout_width="20dp"
                android:layout_height="200dp"
                android:layout_toRightOf="@+id/third_line"
                android:layout_marginLeft="8dp"
                android:background="#ff0000"/>
    
            <View
                android:id="@+id/fifth_line"
                android:layout_width="20dp"
                android:layout_height="220dp"
                android:layout_toRightOf="@+id/fourth_line"
                android:layout_marginLeft="8dp"
                android:background="@color/teal_200"/>
    
            <View
                android:id="@+id/six_line"
                android:layout_width="20dp"
                android:layout_height="150dp"
                android:layout_toRightOf="@+id/fifth_line"
                android:layout_marginLeft="8dp"
                android:background="@color/white"/>
    
        </RelativeLayout>
    
    
        <RelativeLayout
            android:layout_marginTop="50dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
    
            <TextView
                android:id="@+id/a"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="智能基座"
                android:textColor="@color/white"
                android:textSize="60sp"
                android:textStyle="italic"/>
        </RelativeLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom">
    
            <TextView
                android:id="@+id/tagLine"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="50dp"
                android:text="Andorid Developer"
                android:textColor="#fff"
                android:textSize="24sp" />
        </RelativeLayout>
        </LinearLayout>
    </LinearLayout>

以上是xml文件的实现代码，总的来说还是比较简洁的，使用了LinearLayout，RelativeLayout布局方式，实现出来的静态效果如下所示

![d2ab153df873410faa509f35b697c170.png][]

想要实现动态效果，我们需要在MainActivity.java文件中去添加相关动画的配置，代码如下

MainActivity.java

package com.example.welcometest;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.content.Intent;
    import android.os.Bundle;
    import android.os.Handler;
    import android.view.View;
    import android.view.WindowManager;
    import android.view.animation.Animation;
    import android.view.animation.AnimationUtils;
    import android.widget.TextView;
    
    public class MainActivity extends AppCompatActivity {
    
        View first,second,third,forth,fifth,sixth;
        TextView a,tagline;
    
        Animation topAnimation,bottomAnimation,middleAnimation;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
            setContentView(R.layout.activity_main);
    
            topAnimation = AnimationUtils.loadAnimation(this,R.anim.top_ani);
            bottomAnimation = AnimationUtils.loadAnimation(this,R.anim.bottm_ani);
            middleAnimation = AnimationUtils.loadAnimation(this,R.anim.middle_ani);
    
    
            first = findViewById(R.id.first_line);
            second = findViewById(R.id.second_line);
            third = findViewById(R.id.third_line);
            forth = findViewById(R.id.fourth_line);
            fifth = findViewById(R.id.fifth_line);
            sixth = findViewById(R.id.six_line);
    
            a = findViewById(R.id.a);
            tagline = findViewById(R.id.tagLine);
    
            first.setAnimation(topAnimation);
            second.setAnimation(topAnimation);
            third.setAnimation(topAnimation);
            forth.setAnimation(topAnimation);
            fifth.setAnimation(topAnimation);
            sixth.setAnimation(topAnimation);
    
            a.setAnimation(middleAnimation);
            tagline.setAnimation(bottomAnimation);
    
            //跳转时间
            new Handler().postDelayed(new Runnable() {
                @Override
                public void run() {
                    Intent intent = new Intent(MainActivity.this,MainActivity2.class);
                    startActivity(intent);
                    finish();
                }
            },3000);
        }
    }

我们发现，MainActivity,java中有相关的配置文件，配置文件在这里给出

1、首先第一步，我们需要在res目录下新建资源文件夹anim

![8074c8465d5748b4abe2ae2308840a5c.png][]

2、然后我们在这个目录下新建三个anim资源文件，用来配置动画效果

**top\_ani.xml**

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
    
        <translate
            android:duration = "1500"
            android:fromYDelta="-500%"
            android:fromXDelta="0%"/>
    
        <alpha
            android:fromAlpha="0.1"
            android:toAlpha="1.0"
            android:duration = "1500"
            />
    </set>

**bottom\_ani.xml**

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate
            android:duration = "1500"
            android:fromYDelta="100%"
            android:fromXDelta="0%"/>
    
        <alpha
            android:fromAlpha="0.1"
            android:toAlpha="1.0"
            android:duration = "1500"
            />
    </set>

middle\_ani.xml

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate
            android:duration = "1500"
            android:fromYDelta="0%"
            android:fromXDelta="-200%"/>
    
        <alpha
            android:fromAlpha="0.1"
            android:toAlpha="1.0"
            android:duration = "1500"
            />
    </set>

以上三个xml资源文件就是MainActivity.java中需要的族源文件。

#### **这样就可以成功运行了，大家要是想要效果比较好的话，记得去设置theme为NoActionBar** ####

[d2ab153df873410faa509f35b697c170.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/1f067d2eca6241808fc489e9d7f0b446.png
[8074c8465d5748b4abe2ae2308840a5c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/55d8330e7c624125a47f88474f4a3ad0.png