前言
Android5.0釋出時，Google推出了material design，其中有幾個比較實用、使用也非常簡單的陰影和動畫效果，使用這些效果能使能使你的app界面更加炫酷同時也能增強使用者體驗
在這裡主要介紹其中的三個效果：
- Elevation
- Ripple
- RevealEffect
注：以下效果測試代碼編寫使用的IDE為Android studio,sdk必須是5.0及以上
1.Elevation
Elevation是用來設定view的陰影的，這個屬性隻有在5.0及以上的系統才有
具體使用方法是在布局檔案中直接添加這個屬性
- 代碼
?
| 1 2 3 4 5 6 | |
- 效果
elevation 和 translationZ 經常配合使用以達到不一樣的陰影效果
translationZ 用來設定view 在空間中z軸的高度，使用如下：
- 代碼
?
| 1 2 3 4 5 6 7 | |
- 效果
2.Ripple
ripple 是在觸摸 view 時提供觸摸回報的動畫，5.0之前觸摸回報隻是改變背景圖檔或顔色
5.0及以後你可以設定ripple來實作圓形動畫擴散的動畫回報，并且點選可長按效果也不一樣
使用方法一
- 直接在控件中給控件添加兩個屬性
有邊界
android:background="?attr/selectableItemBackground"
android:clickable="true
無邊界
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true
代碼：
有邊界
?
| 1 2 3 4 5 6 | |
無邊界
?
| 1 2 3 4 5 6 | |
效果(有邊界)：
效果（無邊界）：
說明: 這種方式隻适用于不需要定義背景顔色的控件，定義北京顔色就無法使用了
如果要定義背景顔色，則需編寫一個drawable
使用方法二
- 編寫drawable
代碼：
drawable ：bg.xml
?
| 1 2 3 4 5 6 | |
控件代碼：
?
| 1 2 3 4 5 6 | |
效果：
說明：
這種方式的好處是
不僅能定義控件背景（bg.xml中drawable屬性），還可以定義ripple效果顔色（bg.xml中color 屬性）
以及ripple效果的透明度（bg.xml中color 屬性中8位顔色值前兩位代表透明度）
但也存在問題，我們隻能定義有邊界的類型，無邊界的那種效果我還沒找到方法實作，那位大神知道教教我 →_→
3.Reveal Effect
RevealEffect是 view的一個動畫效果，與普通動畫效果有很大差别
它是由ViewAnimationUtils來單獨建立的，并且也是圓形擴散效果
下面示範一個textview在gone和visible之間的切換效果（可見和不可見之間的切換效果）
使用方法
- 代碼
布局檔案
?
| 1 2 3 4 5 6 7 8 | |
activity完整代碼
package com.example.revealeffect;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.TypedValue;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.view.animation.DecelerateInterpolator;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private TextView textView;
//flag
private boolean isFirst = true;
private int radius;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
textView = (TextView) findViewById(R.id.tv_test);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (isFirst) {
textView.setVisibility(View.VISIBLE);
createAnimation(textView, isFirst).start();
} else {
Animator animator = createAnimation(textView, isFirst);
//設定動畫監聽器，因為動畫完了之後，我們才設定textview不可見
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
textView.setVisibility(View.GONE);
}
});
animator.start();
}
isFirst = !isFirst;
}
});
//将200dp轉為像素，作為動畫效果的半徑
radius = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
200, getResources().getDisplayMetrics());
}
//建立動畫的函數
public Animator createAnimation(View v,boolean isFirst) {
Animator animator;
if (isFirst) {
//從gone到visible動畫
//5個參數作用分别是 操作的view 圓心x坐标 圓心y坐标 動畫開始半徑 動畫結束半徑
animator = ViewAnimationUtils.createCircularReveal(v, 0, 0,0, radius);
} else {
//從visible到動畫gone
animator = ViewAnimationUtils.createCircularReveal( v, 0,0,radius,0);
}
animator.setInterpolator(new DecelerateInterpolator());
animator.setDuration(1500);
return animator;
}
}
效果
- 說明
使用這個動畫時，要注意半徑設定是否正确，比如在onCreate()方法中擷取控件寬高作為半徑是不可取的
因為onCreate()方法中控件寬高還未進行測量，隻是初始化了控件
還有如果view設定為 GONE 即隐藏時，也是無法擷取寬高的，但設定為INVISIBLE時可以擷取到寬高
具體原因可以搜尋 GONE和INVISIBLE差別
上面預設的activity是通過android studio 建立的basic activity，有個FloatActionButton作為點選事件
附上build.gradle中dependencies
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.2.0'
compile 'com.android.support:design:23.2.0'
}
gradle在國内用好坑啊。。。