欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  移动技术

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

程序员文章站 2022-12-30 22:48:31
Android使用补间动画做一个朴实无华的启动页补间动画的概念Android补间动画具体实现方式--操作步骤第一步--anim文件夹创建具体实现代码第二步--补间动画属性详解==布局文件====Activity==代码实现效果参考文章在本篇文章中是以创建一个商城的启动页为模板。希望大家多多支持！补间动画的概念补间动画是一种设定动画开始状态、结束状态，其中间的变化由系统计算补充。Android补间动画具体实现方式–操作步骤第一步–anim文件夹创建在res下创建anim文件夹,右击res文件夹，按...

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


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

补间动画的概念

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

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

第一步–anim文件夹创建

在res下创建anim文件夹,右击res文件夹，按下图操作创建
Android使用补间动画做一个朴实无华的启动页
找到anim点击OK，此时就创建好了，在Directory name那一栏可以输入文件夹的名字。
Android使用补间动画做一个朴实无华的启动页
在这个文件夹(anim)下新建xml文件，右击anim文件夹按下图操作创建
Android使用补间动画做一个朴实无华的启动页
Android使用补间动画做一个朴实无华的启动页
经历上述过程，就完成实现补间动画的第一步—创建anim的xml文件。下面我们来看一下具体实现代码。

具体实现代码

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

共有属性 详细解释
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使用补间动画做一个朴实无华的启动页

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

下面是旋转动画的属性解释：
Android使用补间动画做一个朴实无华的启动页

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

下面是缩放动画的属性解释：
Android使用补间动画做一个朴实无华的启动页

属性 详细解释
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使用补间动画做一个朴实无华的启动页

属性 详细解释
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);
            }
}

第一步：
Android使用补间动画做一个朴实无华的启动页
声明ImageView以及Animation。
然后通过下面的代码来对anim中的xml进行绑定
animation1 = AnimationUtils.loadAnimation(this,R.anim.first);
…省略其他的绑定
最后，在这里我新建了一个go()方法，不同的图片id开始不同的补间动画。
Android使用补间动画做一个朴实无华的启动页
然后在onCreate()方法里运行go()就可以。
下面贴上anim中其他的xml代码：
Android使用补间动画做一个朴实无华的启动页
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>

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

实现效果

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

参考文章

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

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

相关标签： Android

上一篇： android q root权限

下一篇： 关于品牌推广策略的十条“反常识”思考

推荐阅读