写一个简单炫酷的app程序的打开动画

最新推荐文章于 2024-05-26 15:33:42 发布

Android_搬运工

最新推荐文章于 2024-05-26 15:33:42 发布

阅读量1.4w

点赞数 15

分类专栏： android 文章标签：动画 app欢迎动画 app打开动画视图动画 app欢迎界面

本文链接：https://blog.csdn.net/sinat_28676875/article/details/68935611

版权

android 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

app也是有颜值，动画就是一种化妆术，他让你的app更加炫酷，首先给你看下图
这就是我们今天要做的东西

首先呢，先普及下总体的框架知识，有三种动画
(1)Drawable Animation：逐帧动画，就像电影一样，一帧一帧，拼接在一起在人眼中就是连续的，可以简单的理解为图片切换，缺点就是图片过多或过大会造成oom
(2)View Animation：视图动画，比较适合那种不用和用户交互的东湖
(3)Property Animation：是android 3.0以后加入的，为了解决视图动画的缺点，就是组件移动化为实际的移动，现在大部分也用

首先先来讲讲视图动画，也就是这次我们实现上图效果的方式，有四种动画方式这里写图片描述，
你想一想我们动画就是会动的画面（view），总结下来不就是靠这四个行为：改变透明度（那些view逐渐带化的），view的旋转，view的移动，view的缩小放大，
有两种表现方式，一种是java代码，一种是xml文件，更推荐后一种，可读性会更强一些，java代码的实现方式如下

AlPhaAnimation aa=new AlphaAnimation(0,1);//创建一个透明度动画实例
aa.setDuration(100);
view.setAnimation(aa);

很简单吧，其他三种动画同理，就是构造器不同而已，
现在我们来实现下开篇那个动图效果，首先我们需要一个布局文件先贴代码，也就是先把材料准备好

<?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"
    android:background="@color/blue"
    android:orientation="vertical" >
    <LinearLayout
        android:id="@+id/text_lin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="医立方"
            android:textColor="@color/text_white"
            android:textSize="40sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="好玩的医立方"
            android:textColor="@color/text_white"
            android:textSize="14sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/text_hide_lin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="@color/blue"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="医立方"
            android:textColor="@color/blue"
            android:textSize="40sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="好玩的医立方"
            android:textColor="@color/blue"
            android:textSize="14sp" />
    </LinearLayout>

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/ic_white_cube" />
</RelativeLayout>

这个布局包括一个ImageView和两个一模一样的线性布局（除了字体颜色），用来显示文字，然后把他们全部居中这里写图片描述
此时或许你会有一个为什么那些字体不显示，因为他被覆盖掉了，后面添加布局覆盖在前一层上面，所以最外层就是一个imageView而已，对于同一个位置的view，后添加的会把前面添加的给覆盖下去，这对我们后来的字体逐渐出现这是用到这种覆盖的效果，接下来我们要开始让这个动画动起来了，一开始我们先让图片先动起来先，首先我把这个动画分解为4个部分吧，
第一步，自由落体，自然就是用的是位移动画，并且在这个过程中那个图片不断的放大

     <scale
        android:duration="1200"
        android:fromXScale="25%"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromYScale="25%"
        android:toXScale="125%"
        android:toYScale="125%"
        android:interpolator="@android:anim/linear_interpolator"/>

    <translate
        android:duration="1200"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="80%p"
        />

如果你之前没有接触过动画，可能会对这几个属性很陌生，首先duration指的就是，这个动画的持续时间，而fromX（Y）Scale和toX（Y）Scale，指的是图形x轴y轴放大起始点和终点，在我这里就是将图片充25%放大到125%，而interpolator这个属性指的是差值器，也就是用来调整变化的速度，是加速的，减速呢还是变速，有这几种值
这里写图片描述
接下来就是位移动画，同样，你想要告诉系统怎么位移肯定也就得告诉他起始点和终点吧，顾名思义，也就是fromX(Y)Delta和toX(Y)Delta啦，这里重要是是讲
80%和80%p是什么区别，这里p指的是父类，也就是说，对于位移来说，80%指的是位移自己长度的80%，而80%p指的是位移父类的长度80%，多说无益，上图
这里写图片描述

这里指展示以父类为标准的，同理没有p就是以自身为标准

第二部自然就是弹上来又掉下去啦

     <translate
        android:startOffset="1200"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:duration="200"
        android:toYDelta="-15%p"
        />
    <translate
        android:startOffset="1400"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="200"
        android:toYDelta="15%p"
        />

基本和上面差不多，多了一个新东西，也就是startOffset，指的是动画开始后多少秒执行，这里是1400ms，也就是要在第一步完成之后执行啦

接下来就是第三步啦，这个和第一步类似不过是相反，不是往下掉，二是往上弹，而且这个过程中缩小图片

<set
        android:startOffset="1600"
        android:interpolator="@android:anim/linear_interpolator">
        <scale
            android:duration="1200"
            android:pivotX="50%"
            android:pivotY="50%"
            android:fromXScale="100%"
            android:fromYScale="100%"
            android:toXScale="80%"
            android:toYScale="80%" />

        <translate
            android:duration="1200"
            android:toXDelta="-20%p"
            android:toYDelta="-50%p"/>
    </set>

第四步啦，也就是字体逐渐显示，这里你想一想我们现实中的用一块布这是牌匾，然后将布从左往右啦，那么字体是不是就是从左往右逐渐显示啦？而所谓的不不就是我在布局中重复定义了，却把字体设置成和背景一样颜色的线性布局嘛，先把我们要显示字体移动到指定位置，这里是向x轴移动自身长度35%，y轴上移动，父类高度的15%，代码如下

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <translate

        android:fromXDelta="35%"
        android:fromYDelta="15%p"
        android:toXDelta="35%"
        android:toYDelta="15%p"/>
</set>

接下来就是要移动所谓‘拉布’，在这600ms时间内，他就会逐渐把遮住的字逐渐显示出来啦

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600"
    android:fillAfter="true"
    >
    <translate
        android:fromXDelta="35%"
        android:fromYDelta="15%p"
        android:toXDelta="135%"
        android:toYDelta="15%p"
        />
</set>

最后一步只需要用java代码把动画加载进去就可以了

final LinearLayout tv_lin= (LinearLayout) findViewById(R.id.text_lin);//要显示的字体
        final LinearLayout tv_hide_lin= (LinearLayout) findViewById(R.id.text_hide_lin);//所谓的布
        ImageView logo= (ImageView) findViewById(R.id.image);//图片
        Animation animation = AnimationUtils.loadAnimation(this,R.anim.splash);
        logo.startAnimation(animation);//开始执行动画
        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                //第一个动画执行完后执行第二个动画就是那个字体显示那部分
                animation=AnimationUtils.loadAnimation(MainActivity.this,R.anim.text_splash_position);
                tv_lin.startAnimation(animation);
                animation=AnimationUtils.loadAnimation(MainActivity.this,R.anim.text_canvas);
                tv_hide_lin.startAnimation(animation);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });