看完这篇再不会 View 的动画框架，我跪搓衣板

时间  2019-11-08
标签 看完 再不 view 动画 框架 繁體版
原文   原文链接

引言

众所周知，一款没有动画的 app，就像没有灵魂的肉体，给用户的体验性不好。如今的 android 在动画效果方面早已空前的发展，1.View 动画框架 2.属性动画框架 3.Drawable 动画。相比后后二者，View 动画框架在 Android 的最开始就已经出现，即有着很是容易学习的有点，却也有着用法太死的毛病，但对于初学者而言，猪狗实现各类可选的效果了。html

“Android animator”的图片搜索结果

组成

对于 View 的动画框架而言，最多见的有：java

  • AlphaAnimation（透明度动画）、
  • RotateAnimation（旋转动画）、
  • ScaleAnimation（缩放动画）、
  • TranslateAnimation（平移动画）四种类型。

除此以外还提供了动画集合类（AnimationSet），用于将各类基本动画组合起来进行显示。android

使用

对于如今市面上的书籍 📚，基本都是在活动代码中，一步一步设置透明度，运行时间。来对控件添加动画框架。因此我这里仍是只讲 Java 代码添加那就太无聊了。因此这里我向你们介绍的使用方法，除了基本的以代码形式添加以外，更有 xml 文件的格式书写，并在活动中直接引用🚰的骚操做。app

若是你们对其余动画方式，好比 Drawable 动画啊，属性动画啊感兴趣，欢迎查看我之后的博文。框架

既然是要在 xml 中配置，那我献给你们介绍下，xml 中各类属性的意义：在 /res 下创建 名为 “anim” 的 Directory，将之后的 xml 配置文件都放在该目录下。函数

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="true">
    <!--透明度更变更画-->
    <alpha
        android:fromAlpha="float"
        android:toAlpha="float" />
    <!--缩放动画-->
    <scale
        android:fromXScale="float"
        android:toXScale="float"
        android:fromYScale="float"
        android:toYScale="float"
        android:pivotX="float"
        android:pivotY="float" />
    <!--平移动画-->
    <translate
        android:fromXDelta="float"
        android:toXDelta="float"
        android:fromYDelta="float"
        android:toYDelta="float" />
    <!--旋转动画-->
    <rotate
        android:fromDegrees="float"
        android:toDegrees="float"
        android:pivotX="float"
        android:pivotY="float" />
    <!--...-->
</set>

image.gif

下面，我就开始带领你们，以 ImageView TextView 为例，展现下使用方法，开始发干货咯：布局

在开始前

重点：唠叨一下学习

这里给出布局文件之后都是这样的，就再也不给出了 测试

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".AlphaAnimationActivity">

    <!--不建议用 Relativelayout 浪费内存 哈哈哈-->
    <ImageView
        android:id="@+id/image"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:src="@drawable/girl"
        android:scaleType="fitXY"
        android:alpha="1.0"/>

    <!--这里的 alpha 设置的是最大透明度-->
    <TextView
        android:id="@+id/text"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:gravity="center"
        android:text="@string/text"
        android:background="@color/papayawhip"
        android:alpha="0.75"/>

</LinearLayout>

image.gif

 在布局文件中，对控件设置 alpha 值，表示最大的透明度动画

透明度动画 -> Alpha

在 xml 文件中设置 alpha 动画，主要分为三个属性

  1. fromAlpha 表示开始时的透明度
  2. toAlpha     表示结束时的透明度
  3. duration    表示变化经历过程所占时间

在 /res/anim 下创建 alpha_anim.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="1000"/>
</set>

image.gif

而后直接在活动中实例化 Animate 对象，引用便可

Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha_anim);
        animation.setFillAfter(false);// 变化以后是永久更改仍是恢复原样

        ImageView imageView = findViewById(R.id.image);
        imageView.startAnimation(animation);

        TextView textView   = findViewById(R.id.text);
        textView.startAnimation(animation);

image.gif

 注意这个 setFillAfter 是用于设定：控件变化以后是永久更改，仍是运行完了就恢复原样

运行一下，看效果：

image

缩放动画 -> Scale

在属性文件（xml）中，scale 的标签主要有一下这几个

  • duration       运行时间
  • fromXScale 横轴方向开始变化时的大小
  • toXScale     横轴方向变化结束时的大小
  • fromYScale 纵轴方向开始变化时的大小
  • toYScale     纵轴方向变化结束时的大小
  • pivotX         按比例肯定缩小/放大中心点的横坐标
  • pivotY         按比例肯定缩小/放大中心点的纵坐标
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="2000"
        android:fromXScale="1.0"
        android:toXScale="0.0"
        android:fromYScale="1.0"
        android:toYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>

image.gif

若是你愿意，能够在布局文件中设置，默认开始是的缩放比例：

见名知意：

  • scaleX 横向默认缩放比
  • scaleY 纵向默认缩放比
<ImageView
        android:id="@+id/scale_image"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:src="@drawable/girl"
        android:scaleType="fitXY"
        android:scaleY="0.75"
        android:scaleX="1.15"/>

image.gif

能达到以下的效果 

image

一样的在活动中引用该属性文件：

和前面无异，改个文件便可

。。。
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale_anim);
        animation.setFillAfter(false);// 变化以后是永久更改仍是恢复原样

        ImageView imageView = findViewById(R.id.scale_image);
        imageView.startAnimation(animation);
。。。

image.gif

运行一下看看效果：

image

平移动画 -> Translate

平移动画相对其余简单的属性动画来讲，更为简单，主要有五个属性：

  1. duration       运行时间
  2. fromXDelta  在 X 轴的开始位置
  3. toXDelta      在 X 轴的结束位置
  4. fromYDelta  在 Y 轴的开始位置
  5. toYDelta      在 Y 轴的结束位置

注意，这里有个点比较特殊：

在肯定位置属性的时候，有三种类型的赋值方法：

  1. 整型值：如：android:fromXDelta="20" 表示本身与左边界的距离
  2. 百分比：如：android:fromXDelta="20%" 表示本身与左边界的距离 和 本身高度的百分比
  3. 百分比+p：如：android:fromXDelta="20%p" 表示本身与父控件（通常为 ViewGroup ）左边界的距离

篇幅问题，这里我只介绍整型值的使用方法

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="2000"
        android:fromXDelta="20"
        android:toXDelta="100"
        android:fromYDelta="20"
        android:toYDelta="100"/>
</set>

image.gif

一样的也能够在布局文件中加以引用，这顶初始值：

<ImageView
        android:id="@+id/scale_image"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:src="@drawable/girl"
        android:scaleType="fitXY"
        android:translationX="50sp"
        android:translationY="20sp"/>

image.gif

能够看到，设定了初始位移的 ImageView 相对与未设定的 TextView 发生了偏移

image

一样的，在活动中加以引用：

...
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate_anim);
        animation.setFillAfter(false);// 变化以后是永久更改仍是恢复原样

        ImageView imageView = findViewById(R.id.scale_image);
        imageView.startAnimation(animation);
...

image.gif

运行一下看看效果：

image

旋转动画 -> Rotate

对于旋转动画而言，一切就显得有趣了起来，我码字的双手就显得疲惫了起来

首先仍是设定属性，对于旋转动画，基本的属性有：

  1. duration         动画时间
  2. fromDegrees 动画开始角度
  3. toDegrees     动画结束偏转角度
  4. pivotX            旋转轴心点 X 位置
  5. pivotY            旋转轴心点 Y 位置

一样的 旋转动画的属性也有三种设置方法，但这主要是对于 pivot 而言，用于肯定轴心点位置

  1. 整型值：如：android:pivotX="20" 表示本身与左边界的距离
  2. 百分比：如：android:pivotX="20%" 表示本身与左边界的距离 和 本身高度的百分比
  3. 百分比+p：如：android:pivotX="20%p" 表示本身与父控件（通常为 ViewGroup ）左边界的距离
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:toDegrees="+360"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>

image.gif

老样子，添加布局

<ImageView
        android:id="@+id/scale_image"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:src="@drawable/girl"
        android:scaleType="fitXY"/>

image.gif

在活动中添加代码

...
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate_anim);
        animation.setFillAfter(false);// 变化以后是永久更改仍是恢复原样

        ImageView imageView = findViewById(R.id.scale_image);
        imageView.startAnimation(animation);
...

image.gif

一样的在运行一下

image

这时你可能会揪着我稀疏的秀发问我，这有趣在哪里？？！

好的请看！

image

360度无脑大旋转，好了牛逼吹完了，不告述你咋调的，我先跑了

开个玩笑啦，其实很简单，在布局文件中，设置下倾斜角就好了

  1. rotationX 横向倾斜角
  2. rotationY 纵向倾斜角
<ImageView
        android:id="@+id/scale_image"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:src="@drawable/girl"
        android:scaleType="fitXY"
        android:rotationX="50"
        android:rotationY="20"/>

image.gif

时间插值器

好了，到此为止基本动画就结束了，如今咱来点猛的：对就是：时间插值器

什么是时间插值器？我刚学时其实也很懵逼，如今发觉仍是给你们看例子方便

使用

首先教你们下使用方法，完了在以咋们透明度动画为例作纤细的介绍

首先看，这时咱们原来透明度的代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="1000"/>
</set>

image.gif

运行效果，咱们能够看到这是个比较均匀的变化过程

image

咱们简单的添加一行：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/accelerate_interpolator">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="5000"/>
</set>

image.gif

再来 此次时间加到10s，方便看效果；

image

能够看到，变化的数独愈来愈快，这就是时间插值器：

常见的时间插值器有：

  • android:interpolator="@android:anim/accelerate_interpolator" 设置动画为加速动画(动画播放中愈来愈快)  

  就是这例子，这里不在说了

  • android:interpolator="@android:anim/decelerate_interpolator" 设置动画为减速动画(动画播放中愈来愈慢)  

image

  • android:interpolator="@android:anim/accelerate_decelerate_interpolator" 设置动画为先加速在减速(开始速度最快 逐渐减慢)  

image

  • android:interpolator="@android:anim/anticipate_interpolator" 先反向执行一段，而后再加速反向回来（至关于咱们弹簧，先反向压缩一小段，而后在加速弹出）  

  image

  • android:interpolator="@android:anim/anticipate_overshoot_interpolator" 同上先反向一段，而后加速反向回来，执行完毕自带回弹效果（更形象的弹簧效果）  

image

  • android:interpolator="@android:anim/bounce_interpolator" 执行完毕以后会回弹跳跃几段（至关于咱们高空掉下一颗皮球，到地面是会跳动几下）  

  image

  • android:interpolator="@android:anim/cycle_interpolator" 循环，动画循环必定次数，值的改变为一正弦函数：Math.sin(2* mCycles* Math.PI* input)  

  image

  • android:interpolator="@android:anim/linear_interpolator" 线性均匀改变  

  image

  • android:interpolator="@android:anim/overshoot_interpolator" 加速执行，结束以后回弹

image

补间动画 -> Tween animation

抠完了上面每一个的细节，咱们玩波大的，首先咱们先定义一个动画集合：

首先们仍是，定义一个属性文件，但这里咱们集合了 缩放 透明度 两种效果：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/bounce_interpolator" >

    <scale
        android:duration="500"
        android:fromXScale="0.1"
        android:fromYScale="0.1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />

    <alpha
        android:duration="500"
        android:fromAlpha="0"
        android:toAlpha="1.0" />

</set>

image.gif

而后咱们在代码中，对 RecyclerView 设置它，对于 RecyclerView Adapter 的写法这里略去了，设置的详细方法以下：

private List<String> list;

    private void iniList(){
        list = new ArrayList<>();
        for (int i = 0 ; i < 30 ; i ++){
            list.add(i + " -- tween 测试 --");
        }
    }

    private void iniRecyclerView(){
        recyclerView = findViewById(R.id.recycler);
        GridLayoutManager manager = new GridLayoutManager(this,1);
        recyclerView.setLayoutManager(manager);

        LayoutAnimationController lac=new LayoutAnimationController(AnimationUtils
                .loadAnimation(this, R.anim.in_anim));
        lac.setDelay(0.5f);
        lac.setOrder(LayoutAnimationController.ORDER_RANDOM);
        recyclerView.setLayoutAnimation(lac);

        TweenRecyclerAdapter adapter = new TweenRecyclerAdapter(list);
        recyclerView.setAdapter(adapter);
    }

image.gif

让咱们运行下看看酷炫的效果： 

image

若是文中有误，欢迎在评论区指出

怎么样，我不用贵搓衣板了吧，哈哈哈，点个赞呗么么哒～

本文以同步发布到个人 CSDN 博客，欢迎你们来捧场：
点击跳转 https://blog.csdn.net/qq_43377749/article/details/91890323

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程