看完這篇再不會 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教程