文章同步我的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);
很简单吧，其他三种动画同理，就是构造器不同而已，
现在我们来实现下开篇那个动图效果，首先我们需要一个布局文件先贴代码，也就是先把材料准备好
<?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而已，对于同一个位置的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) {
}
});
我知道看到这里你肯定还有不懂得地方，我就附上源码源码地址
ps：如果你觉得我的文章对你有帮助，那么就顶那里点一下或者github上star一下啦，也可以关注我的公众号，左上角有二维码，有什么问题都可以问我，文章会同步发布哦
ps：如果你觉得我文章哪里写错了或者哪里太糟糕了，欢迎指出，
网友评论