Android使用补间动画做一个朴实无华的启动页

在本篇文章中是以创建一个商城的启动页为模板。希望大家多多支持！

补间动画的概念

补间动画是一种设定动画开始状态、结束状态，其中间的变化由系统计算补充。

Android补间动画具体实现方式–操作步骤

第一步–anim文件夹创建

在res下创建anim文件夹,右击res文件夹，按下图操作创建

找到anim点击OK，此时就创建好了，在Directory name那一栏可以输入文件夹的名字。

在这个文件夹(anim)下新建xml文件，右击anim文件夹按下图操作创建


经历上述过程，就完成实现补间动画的第一步—创建anim的xml文件。下面我们来看一下具体实现代码。

具体实现代码

在设计界面我们主要看到的是这样的效果（下图中的所有图片都可以替换，在这我们主要讲的是四种补间动画结合起来实现的效果，未曾用在商业用途！），我们最终需要实现的效果是四个角的图片移动到中间的购物车中，但是又不能简单的平移过去，这样也太“朴实无华”了。所以我们需要将四种补间动画结合起来，在平移的过程中进行缩放，旋转以及渐变效果！

首先我们先给左上角一个小图片在anim文件夹下创建一个xml文件，命名为first.xml.
具体代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2800"
        android:fillAfter="true"
        android:fillBefore="false"
        android:fillEnabled="true"
        android:repeatCount="0"
        android:repeatMode="restart">
        <!--以上为共有属性-->

        <!--先进行平移动画-->
        <translate
            android:fromXDelta="0"
            android:fromYDelta="0"
            android:startOffset="0"
            android:toXDelta="580"
            android:toYDelta="520"></translate>

    <!--进行缩放动画，同时要进行旋转-->
        <rotate
            android:fromDegrees="0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:startOffset="800"
            android:toDegrees="30"></rotate>

        <scale
            android:fromXScale="1"
            android:fromYScale="1"
            android:pivotX="50%"
            android:pivotY="50%"
            android:startOffset="800"
            android:toXScale="2"
            android:toYScale="1"></scale>

<!--    最后渐变-->
        <alpha
            android:startOffset="1000"
            android:fromAlpha="1.0"
            android:toAlpha="0.0"></alpha>

    </set>

第二步–补间动画属性详解

在下面的代码里我们放的是四种补间动画的共有属性，我们一个个来看。

共有属性	详细解释
android:duration=“2800”	该补间动画的持续时间
android:fillAfter=“true”	动画播放完毕后，是否会停止在动画结束的状态，优先存在于fillBefore
android:fillBefore=“false”	动画播放完毕后，是否会恢复原始状态
android:fillEnabled=“true”	是否应用与fillBefore的值，默认:true
android:repeatCount=“0”	重复次数
android:repeatMode=“restart”	播放的动画模式restart表示正序播放，reverse代表倒序播放，默认是restart

下面是平移动画的属性解释：

属性	详细解释
android:fromXDelta=“0”	图片在x轴起始位置
android:fromYDelta=“0”	图片在y轴的起始位置
android:startOffset=“0”	动画是否延时播放，为0则不延时，为1000则延时1s播放
android:toXDelta=“580”	动画播放完在x轴的终止位置
android:toYDelta=“520”	动画播放完在y轴的终止位置

下面是旋转动画的属性解释：

属性	详细解释
android:fromDegrees=“0”	起始旋转度数（动画刚开始时旋转的度数）
android:pivotX=“50%”	旋转轴点x坐标
android:pivotY=“50%”	旋转轴点y坐标
android:startOffset=“800”	动画延时800ms开始播放
android:toDegrees=“30”	动画最终旋转的度数

下面是缩放动画的属性解释：

属性	详细解释
android:fromXScale=“1”	X轴起始缩放倍数
android:fromYScale=“1”	Y轴起始缩放倍数
android:pivotX=“50%”	缩放轴点x坐标
android:pivotY=“50%”	缩放轴点y坐标
android:startOffset=“800”	动画延时800ms开始播放
android:toXScale=“2”	缩放轴点终点的x坐标
android:toYScale=“1”	缩放轴点终点的y坐标

下面是渐变动画的属性解释：

属性	详细解释
android:startOffset=“1000”	动画延时1s开始播放
android:fromAlpha=“1.0”	动画开始时的透明度
android:toAlpha=“0.0”	动画结束时的透明度

布局文件

最后贴上启动页的布局文件代码：

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

    <ImageView
        android:id="@+id/bg_all"
        android:layout_width="1200dp"
        android:layout_height="match_parent"
        android:src="@drawable/start2"/>

    <ImageView
        android:layout_centerInParent="true"
        android:id="@+id/shoplogo"
        android:layout_width="128dp"
        android:layout_height="128dp"
        android:src="@drawable/shoplogo" />
    <ImageView
        android:id="@+id/first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/huawei" />
    <ImageView
        android:id="@+id/two"
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/huawei" />

    <ImageView
        android:id="@+id/three"
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/huawei" />
    <ImageView
        android:id="@+id/four"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/huawei" />
    <ImageView
        android:id="@+id/start3"
        android:layout_centerHorizontal="true"
        android:layout_alignBottom="@+id/shoplogo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/start6" />
</RelativeLayout>

好哒，介绍完上面四种动画的共有属性以及它们各自的属性之后，我们就是要在Activity中来看看怎么绑定补间动画的xml文件了。

Activity代码

话不多说先把Activity的全部代码放上去：

public class WelcomeActivity extends Activity {
    private ImageView shoplogo,first,two,three,four,start3;
    private Animation animation1,animation2,animation3,animation4,animationlogo,animationstart3;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_welcome);
        first=(ImageView) findViewById(R.id.first);
        two = (ImageView)findViewById(R.id.two);
        three = findViewById(R.id.three);
        four = findViewById(R.id.four);
        shoplogo = findViewById(R.id.shoplogo);
        start3 = findViewById(R.id.start3);
        animation1 = AnimationUtils.loadAnimation(this,R.anim.first);
        animation2 = AnimationUtils.loadAnimation(this,R.anim.two);
        animation3 = AnimationUtils.loadAnimation(this,R.anim.three);
        animation4 = AnimationUtils.loadAnimation(this,R.anim.four);
        animationlogo = AnimationUtils.loadAnimation(this,R.anim.shoplogo);
        animationstart3 = AnimationUtils.loadAnimation(this,R.anim.start3);
        go();
        new Thread() {
            @Override
            public void run() {
                super.run();
                try {
                    Thread.sleep(8000);
                    other();
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }.start();
    }
    private void other() {
                startActivity(new Intent(WelcomeActivity.this, Login2Activity.class));
                WelcomeActivity.this.finish();
            }
            private void go(){
                first.startAnimation(animation1);
                two.startAnimation(animation2);
                three.startAnimation(animation3);
                four.startAnimation(animation4);
                shoplogo.startAnimation(animationlogo);
                start3.startAnimation(animationstart3);
            }
}

第一步：

声明ImageView以及Animation。
然后通过下面的代码来对anim中的xml进行绑定
animation1 = AnimationUtils.loadAnimation(this,R.anim.first);
…省略其他的绑定
最后，在这里我新建了一个go()方法，不同的图片id开始不同的补间动画。

然后在onCreate()方法里运行go()就可以。
下面贴上anim中其他的xml代码：

two.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fillAfter="true"
    android:fillBefore="false"
    android:fillEnabled="true"
    android:repeatCount="0"
    android:repeatMode="restart">
    <!--先进行平移动画-->
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:startOffset="500"
        android:toXDelta="0"
        android:toYDelta="900"></translate>


    <!--进行缩放动画，同时要进行旋转-->
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1000"
        android:toDegrees="30"></rotate>

    <scale
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1000"
        android:toXScale="1"
        android:toYScale="1"></scale>

<!--    最后渐变-->
    <alpha
        android:startOffset="1300"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"></alpha>

</set>

three.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3200"
    android:fillAfter="true"
    android:fillBefore="false"
    android:fillEnabled="true"
    android:repeatCount="0"
    android:repeatMode="restart">

    <!--先进行平移动画-->
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:startOffset="600"
        android:toXDelta="0"
        android:toYDelta="-1000"></translate>


    <!--进行缩放动画，同时要进行旋转-->
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1000"
        android:toDegrees="30"></rotate>

    <scale
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1000"
        android:toXScale="1"
        android:toYScale="1"></scale>

<!--    最后渐变-->
    <alpha
        android:startOffset="1500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"></alpha>

</set>

four.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3400"
    android:fillAfter="true"
    android:fillBefore="false"
    android:fillEnabled="true"
    android:repeatCount="0"
    android:repeatMode="restart">


    <!--先进行平移动画-->
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:startOffset="1000"
        android:toXDelta="0"
        android:toYDelta="-1000"></translate>



    <!--进行缩放动画，同时要进行旋转-->
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1300"
        android:toDegrees="30"></rotate>
<!--    android:fromXScale="1"	X轴起始缩放倍数-->
<!--    android:fromYScale="1"	Y轴起始缩放倍数-->
<!--    android:toXScale="-1"	缩放轴点的X坐标-->
<!--    android:toYScale="1"	缩放轴点的Y坐标-->
    <scale
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1300"
        android:toXScale="-1"
        android:toYScale="1"></scale>
    <!--    最后渐变-->
    <alpha
        android:startOffset="1600"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"></alpha>

</set>

shoplogo.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="4000"
    android:fillAfter="true"
    android:fillBefore="false"
    android:fillEnabled="true"
    android:repeatCount="0"
    android:repeatMode="restart">

    <scale
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1000"
        android:toXScale="2"
        android:toYScale="2"></scale>
    <alpha
        android:startOffset="3200"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"></alpha>
</set>

start3.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"
    android:fillAfter="true"
    android:fillBefore="false"
    android:fillEnabled="true"
    android:repeatCount="0"
    android:repeatMode="restart">
    <alpha
        android:startOffset="4000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"></alpha>
</set>

以上就是所有的代码文件。

实现效果

参考文章

https://blog.csdn.net/qq_40881680/article/details/82285987

本文地址：https://blog.csdn.net/ALiangXLogic/article/details/107479323