Android開發之MaterialDesign動畫總結

前言：話說MaterialDesign的效果很是強大，相信你看了我之前總結的MD控件的使用，你對MD風格也有一定的瞭解。相信你看了我之前的屬性動畫《Android開發之安卓屬性動畫大總結》，對安卓的動畫有一定的瞭解，今天我們就來總結一下MD的動畫效果，介紹1、Touch Feedback（觸摸反饋）；2、Reveal Effect（揭露效果）；3、3.Activity transition（Activity轉場動畫效果）；

------- 一：Touch Feedback（觸摸反饋）----------

例子水波紋效果（5.x以上自帶的效果，關於如何兼容5.x以下的水波紋，我們以後再單獨）

我們直接看代碼：

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:text="5.x自帶按鍵效果" />

    <Button
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:gravity="center"
        android:text="按下效果" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:text="按下圓形水波紋" />

</LinearLayout>

效果圖展示（三個效果依次展示）：

當然了我們也可以自定義按下的效果顏色（設置再style中）：

   <!--可以修改背景顏色和水波紋的顏色：-->
        <item name="colorControlHighlight">@color/colorAccent</item>
        <item name="colorButtonNormal">@color/material_blue_grey_800</item>

效果展示：

--------- 二：Reveal Effect（揭露效果）---------

例子：Activity的揭露出現的效果。

使用ViewAnimationUtil工具類來完成此效果。

ok，我們先來看下第一個效果：

代碼：

 bt1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animator animator = ViewAnimationUtils.createCircularReveal(bt1,//作用在哪個View上面
                        bt1.getWidth() / 2, bt1.getHeight() / 2,//擴散的中心點
                        0,//開始擴散初始半徑
                        bt1.getHeight());//擴散結束半徑
                animator.setDuration(1000);
                animator.setInterpolator(new AccelerateInterpolator());
                animator.start();
            }
        });

使用起來很是方便，當然我們也可以做出其他的效果，相關api不用我多做解釋了吧。

ok我們再來看下第二個效果：

代碼：

bt2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animator animator = ViewAnimationUtils.createCircularReveal(bt2, 0, 0, 0,
                        (float) Math.hypot(bt2.getWidth(), bt2.getHeight()));
                animator.setDuration(1000);
                animator.setInterpolator(new AccelerateInterpolator());
                animator.start();
            }
        });

其他效果可以自行測試！

---------- 三：Activity transition（Activity轉場動畫效果）---------

就是兩個Activity進行跳轉的時候，轉場動畫。

1、5.0之前通常使用三種系統帶的：滑動效果(Slide)、展開效果Explode、漸變顯示隱藏效果Fade。

看下滑動效果：

代碼實現：

 public void jump(View view) {
        //平移效果
        startActivity(new Intent(MainActivity.this, SecondActivity.class));
        overridePendingTransition(android.R.anim.slide_in_left, android.R.anim.slide_out_right);
    }

其他兩種效果可自行實現。

2、共享元素轉換：把兩個Activity當中的相同的元素關聯起來做連貫的變換動畫，當然效果肯定是比上面的要好。

使用ActivityOptions類。但是這個類只支持API21以上的版本。所以我們一般使用這個兼容類：ActivityOptionsCompat（v4包中），此類在低版本上面並沒有轉場動畫效果，只能使用上述普通的slide來進行相應的轉換。共享元素轉換分爲單個共享元素和多個共享元素。

其中最關鍵的是給兩個Activity當中的共享元素view都設置同一個名字---android:transitionName

還需要給兩個Activity都設置如下：
//方法一：
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
//方法二：
修改主題：<item name="android:windowContentTransitions">true</item>

1）單個元素共享（放大效果展示圖）：

全部代碼：MainActivity類：

public class MainActivity extends AppCompatActivity {

    private Button button;
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //設置允許使用轉場動畫
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = (ImageView) findViewById(R.id.iv);
        button = (Button) findViewById(bt);
    }

    public void jump(View view) {

        //放大效果//單個元素共享
//		ActivityOptions
//        		ActivityOptionsCompat optionsCompat = ActivityOptionsCompat
//				.makeSceneTransitionAnimation(
//						activity, //當前的Activity
//						sharedElement,//共享元素---哪一個View
//						sharedElementName)//共享元素的名稱 android:transitionName="iv_meinv3"
        ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, imageView, "meinv");
        Intent intent = new Intent(this, SecondActivity.class);
        startActivity(intent, optionsCompat.toBundle());
    }
}

activity_main佈局：

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

    <ImageView
        android:id="@+id/iv"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:src="@drawable/timg"
        android:transitionName="meinv" />

    <Button
        android:id="@+id/bt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="jump"
        android:text="MainActivity"
        android:textAllCaps="false"
        android:transitionName="bt" />

</LinearLayout>

SecondActivity代碼：

public class SecondActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        //設置允許使用轉場動畫
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
    }
}

activity_second佈局：

<?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:orientation="vertical">

    <ImageView
        android:id="@+id/iv1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/timg"
        android:transitionName="meinv" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="SecondActivity"
        android:textAllCaps="false"
        android:transitionName="bt" />
</RelativeLayout>

2）多個元素共享（效果展示圖）：

發現裏面有幾個不一樣的地方：第一個是加了一個toolBar（爲了好看），第二個是Button也跟隨着圖片變化，然後變字，so這就是多個元素的共享！

ok來看代碼（其他的代碼和上面單個元素共享一樣，這裏就不貼出代碼了）：

        //多個共享元素
        ActivityOptionsCompat optionsCompat = ActivityOptionsCompat
                .makeSceneTransitionAnimation(this, Pair.create((View) imageView, "meinv"), Pair.create((View) button, "bt"));
        Intent intent = new Intent(this,SecondActivity.class);
        startActivity(intent,optionsCompat.toBundle());

3）元素不共享（但是需要配合其他動畫）：

MainActivity中：

public void jump(View view) {
        ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this);
        Intent intent = new Intent(MainActivity.this, SecondActivity.class);
        startActivity(intent, optionsCompat.toBundle());
    }

SecondActivity中：

public class SecondActivity extends AppCompatActivity {
    @SuppressLint("NewApi")
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        //設置允許使用轉場動畫
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
        Slide slide = new Slide();
        slide.setDuration(500);
        getWindow().setExitTransition(slide);//出去1動畫
        getWindow().setEnterTransition(slide);//進來的動畫

//        Explode explode = new Explode();
//        explode.setDuration(1000);
//        getWindow().setExitTransition(explode);//出去的動畫
//        getWindow().setEnterTransition(explode);//進來的動畫
//
//        Fade fade = new Fade();
//        fade.setDuration(1000);
//        getWindow().setExitTransition(fade);//出去的動畫
//        getWindow().setEnterTransition(fade);//進來的動畫
    }

    @SuppressLint("NewApi")
    public void back(View view) {
        onBackPressed();
    }
}

其他兩種效果可自行實現，這裏就不一一實現了。

-------------------完------------------

Android開發之MaterialDesign動畫總結

「Pygors跨平臺GUI」1：Pygors跨平臺GUI應用研究

[轉帖]

python列出centos7內存使用前50的進程信息

「Pygors跨平臺GUI」2：安裝MinGW-w64、MSYS2還是WSL2

一鍵自動化博客發佈工具,用過的人都說好(掘金篇)

通義千問 2.5 “客串” ChatGPT4，你分的清嗎？

Garnet：微軟官方基於.NET開源的高性能分佈式緩存存儲數據庫

Flink執行圖

Java響應式編程

評估統計算法在銀行僞造鈔票檢測中的價值

Flask開發之數據庫(SQLAlchemy)的配置以及增刪改查

Django開發之數據庫表的關聯(Django模型)

Flask開發之視圖

Flask開發之藍圖Blueprint

Django開發之自定義管理器、ORM關聯表、事務

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結