教你一个简单炫酷的app程序的打开动画（干货）

文章同步我的csdn博客
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);

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

这个布局包括一个ImageView和两个一模一样的线性布局（除了字体颜色），用来显示文字，然后把他们全部居中

这里写图片描述

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

如果你之前没有接触过动画，可能会对这几个属性很陌生，首先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就是以自身为标准

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

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

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

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

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

最后一步只需要用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) {

            }
        });

我知道看到这里你肯定还有不懂得地方，我就附上源码源码地址

ps：如果你觉得我的文章对你有帮助，那么就顶那里点一下或者github上star一下啦，也可以关注我的公众号，左上角有二维码，有什么问题都可以问我，文章会同步发布哦
ps：如果你觉得我文章哪里写错了或者哪里太糟糕了，欢迎指出，