寫在前面的幾句話
<p>
上一篇對Material Design 有簡單的認識與了解了，我相信大家應該對Material Desgin有一定的認知了把，同時我相信絕大部分的童鞋應該對于其中的動畫很感興趣，那么這一篇就介紹下Material Design的動畫實現，由于這些動畫效果是在5.0上才提供Api的，那么如何在5.0以下的系統實現相似甚至相同的效果呢？那么本篇文章就對這方面進行詳細的介紹，由于內容較多，那么我會分為上下兩個文章進行說明。
分類
<p>
根據動畫的類別和提供的類和屬性等，可以將 Material Design Animation分為 6 類
Touch Feedback (觸摸反饋)
Reveal Effect (揭露效果)
Curved Motion (曲線運動)
View State Changes (視圖狀態改變)
Animate View Drawables (可繪矢量動畫)
Activity Transitions ( Activity 切換效果 )
接下來就對這6類動畫進行說明，及在5.0系統下如何實現相似效果
<p>
一.Touch Feedback (觸摸反饋)
<p>
觸摸反饋應該很好理解，平時開發中，其實也會對觸控有不同的反饋，比如變灰呀等等，但是5.0的觸控反饋其實是加入了漣漪(波紋)效應，這也是與之前的觸控反饋有不同的地方
按鈕的默認觸摸反饋動畫是使用了新的RippleDrawable類，它會是波紋效果在不同狀態間變換。
大多數情況下，我們可以使用這個功能通過在xml文件中定義背景：
android:attr/selectableItemBackground 有界限的波紋
android:attr/selectableItemBackgroundBorderless 可以超出視圖區域的波紋 (21新添加的api)
<Button android:layout_width="100dp"
android:layout_height="50dp"
android:background="?android:attr/selectableItemBackground"
android:text="有界"
android:textColor="@android:color/white"
android:colorControlHighlight="@android:color/holo_red_dark"
android:layout_marginTop="20dp" />
<Button android:layout_width="100dp"
android:layout_height="50dp"
android:background="?android:attr/selectableItemBackgroundBorderless"
android:textColor="@android:color/white"
android:text="無界"
android:layout_marginTop="20dp" />
你可以給RippleDrawable對象分配一個顏色。使用主題的android:colorControlHighlight
屬性可以改變默認的觸摸反饋顏色。
另外，也可以自定義按鈕的效果，這里使用ripple元素定義RippleDrawable作為一個xml資源
ripple_button.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@android:color/holo_blue_light" android:radius="20dp">
<item android:drawable="@android:color/holo_green_dark" />
<!--<item>-->
<!--<shape-->
<!--android:shape="oval">-->
<!--<solid android:color="?android:colorAccent" />-->
<!--</shape>-->
<!--</item>-->
<!--<item>-->
<!--<shape android:shape="rectangle">-->
<!--<solid android:color="#FFFFFF" />-->
<!--<corners android:radius="4dp" />-->
<!--</shape>-->
<!--</item>-->
<!--<item android:drawable="@drawable/ic_launcher" />-->
</ripple>
xml定義了需要定義color,這個color代表按下后的漣漪效果的顏色，內部的內容則和Style樣式一致
<Button android:layout_width="100dp" android:layout_height="50dp"
android:background="@drawable/ripple_button"
android:textColor="@android:color/white"
android:text="自定義1"
android:layout_marginTop="20dp"
/>
那么如何在低版本下實現這種漣漪的效果呢？
自然要去自定義控件來實現了
主要的代碼則是這部分
//繪制按下后的整個背景
canvas.drawRect(pointX, pointY, pointX + viewWidth, pointY + viewHeight, bottomPaint);
canvas.save();
//繪制擴散圓形背景
canvas.clipRect(pointX, pointY, pointX + viewWidth, pointY + viewHeight);
canvas.drawCircle(eventX, eventY, shaderRadio, colorPaint);
canvas.restore();
這里則是繪制漣漪的代碼，自定義控件又分為兩個方向了，第一種是自定義單個控件，這個控件有這種點擊的效果，另外一種則是定義一個layout，layout內部的控件點擊都具有這種漣漪效果
上面紅色的區域為自定義的Button，下面的部分為自定義的layout，可以看到TextView也有與Button同樣的效果
<p>
二.Reveal Effect (揭露效果)
<p>
揭露動畫為用戶提供視覺上的持續性擋顯示或者隱藏一組界面元素
Android 5.0 引入了 ViewAnimationUtils.createCircularReveal()接口來提供動畫效果來揭露或者隱藏一個視圖
Animator animator;
if (isFirst){
animator = ViewAnimationUtils.createCircularReveal(
v,
cx,
cy,
v.getWidth(),
0
);
}else {
animator = ViewAnimationUtils.createCircularReveal(
v,
cx,
cy,
0,
v.getWidth()
);
}
animator.setInterpolator(new DecelerateInterpolator());
animator.setDuration(500);
<p>
三.Curved Motion (曲線運動)
<p>
Material Design中，動畫依賴時間插值和空間移動模式曲線。在android5.0(api 21)和更高版本，你可以為動畫自定義時間曲線和移動曲線。
PathInterpolator: 以三次 bezier 曲線中間 2 個控制點的坐標來定義動畫的速率快慢
PathInterpolator類是一個新的基于貝塞爾曲線或Path對象的插值器。這個插值器在1*1的正方形上定義了曲線運動，以（0，0）和（1，1）點作為錨點，根據夠照參數控制點。你也可以使用xml文件的定義一個路徑插值器，如：
<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:controlX1="0.4"
android:controlY1="0"
android:controlX2="1"
android:controlY2="1"/>
Material Design設計規范中，系統提供了三個基本曲線的xml資源:
- @interpolator/fast_out_linear_in.xml
- @interpolator/fast_out_slow_in.xml
- @interpolator/linear_out_slow_in.xml
我們可以給Animator.setInterpolator()傳一個PathInterpolator對象來設置。
ObjectAnimator.ofFloat(T target, Property<T, Float> xProperty, Property<T, Float> yProperty, Path path): 中間的 path參數定義位移動畫的路徑。
Path path = new Path();
path.lineTo(0,300);
path.cubicTo(100, 0, 300, 900, 500, 600);
PathInterpolator pathInterpolator = new PathInterpolator(0.8f, 0f, 1f, 1f);
final ObjectAnimator mAnimator = ObjectAnimator.ofFloat(v, View.X, View.Y, path);
mAnimator.setInterpolator(pathInterpolator);
mAnimator.setDuration(3000);
mAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
}
});
mAnimator.start();
那么如何在低版本下實現這種曲線運動的效果呢？
我總結了下有兩種方式，一種為PathMeasure,另一種為TypeEvaluator,PathMeasure在前面的Path學習筆記中有介紹，關于TypeEvaluator會在后面動畫學習筆記中進行介紹
直接上代碼，第一種為PathMeasure實現方式
mPath = new Path();
mPath.moveTo(0, 0);
mPath.lineTo(0, 300);
mPath.cubicTo(100, 0, 300, 900, 500, 600);
mPathMeasure = new PathMeasure(mPath, true);
mCurrentPosition = new float[2];
ValueAnimator valueAnimator = ValueAnimator.ofFloat((float)0, mPathMeasure.getLength() - (float)Math.sqrt((double)(500*500 + 600*600)) );
valueAnimator.setDuration(3000);
// 減速插值器
valueAnimator.setInterpolator(new DecelerateInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (Float) animation.getAnimatedValue();
// 獲取當前點坐標封裝到mCurrentPosition
mPathMeasure.getPosTan(value, mCurrentPosition, null);
postInvalidate();
}
});
valueAnimator.start();
canvas.drawCircle(mCurrentPosition[0], mCurrentPosition[1], 10, mPaint);
第二種為是TypeEvaluator實現方式
public class BezierEvaluator implements TypeEvaluator<PointF>{
//途徑的兩個點
private PointF pointF1;
private PointF pointF2;
public BezierEvaluator(PointF pointF1, PointF pointF2) {
this.pointF1 = pointF1;
this.pointF2 = pointF2;
}
@Override
public PointF evaluate(float time, PointF startValue, PointF endValue) {
float timeLeft = 1.0f - time;
PointF point = new PointF();
PointF point0 = (PointF)startValue;//起點
PointF point3 = (PointF)endValue;//終點
//代入公式
point.x = timeLeft * timeLeft * timeLeft * (point0.x)
+ 3 * timeLeft * timeLeft * time * (pointF1.x)
+ 3 * timeLeft * time * time * (pointF2.x)
+ time * time * time * (point3.x);
point.y = timeLeft * timeLeft * timeLeft * (point0.y)
+ 3 * timeLeft * timeLeft * time * (pointF1.y)
+ 3 * timeLeft * time * time * (pointF2.y)
+ time * time * time * (point3.y);
return point;
}
}
ObjectAnimator animator1 = ObjectAnimator.ofFloat(button,View.TRANSLATION_Y,0,300);
animator1.setDuration(600);
BezierEvaluator evaluator = new BezierEvaluator(new PointF(100,0),new PointF(300,900));
ValueAnimator animator = ValueAnimator.ofObject(evaluator,new PointF(0,300),new PointF(500,600));//隨機
animator.addUpdateListener(new BezierListenr(button));
animator.setDuration(2400);
AnimatorSet allSet = new AnimatorSet();
allSet.play(animator1).before(animator);
allSet.start();
private class BezierListenr implements ValueAnimator.AnimatorUpdateListener{
private View target;
public BezierListenr(View target) {
this.target = target;
}
@Override
public void onAnimationUpdate(ValueAnimator animation) {
PointF pointF = (PointF) animation.getAnimatedValue();
target.setX(pointF.x);
target.setY(pointF.y);
}
}
四.View State Changes (視圖狀態改變)
<p>
Android 5.0提供了StateListAnimator類，可以用來定義動畫集
1.定義一個XML資源的StateListAnimator
anim_statelistanimater
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<set>
<objectAnimator android:propertyName="translationZ"
android:duration="@android:integer/config_shortAnimTime"
android:valueTo="10"
android:valueType="floatType"/>
<objectAnimator android:propertyName="rotationX"
android:duration="@android:integer/config_shortAnimTime"
android:valueTo="360"
android:valueType="floatType"/>
</set>
</item>
<item android:state_pressed="false">
<set>
<objectAnimator android:propertyName="translationZ"
android:duration="10000"
android:valueTo="0"
android:valueType="floatType"/>
<objectAnimator android:propertyName="rotationX"
android:duration="@android:integer/config_shortAnimTime"
android:valueTo="0"
android:valueType="floatType"/>
</set>
</item>
</selector>
2.配置,配置分為兩種一種為動態配置一種為靜態配置
（1）靜態配置
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="button2"
android:stateListAnimator="@anim/anim_statelistanimator"
/>
(2)動態配置
StateListAnimator stateLAnim = AnimatorInflater.loadStateListAnimator(this, R.anim.anim_statelistanimator);
button3.setStateListAnimator(stateLAnim);
那么如何在低版本下實現這種視圖狀態改變的效果呢？
很簡單，其實XML資源的StateListAnimator就是一些Animator的集合
所以直接對需要動畫的對象設置Animator就可以了
anim_statechange.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:ordering="together" >
<objectAnimator android:propertyName="translationZ"
android:duration="@android:integer/config_shortAnimTime"
android:valueTo="10"
android:valueType="floatType"/>
<objectAnimator android:propertyName="rotationX"
android:duration="@android:integer/config_shortAnimTime"
android:valueTo="360"
android:valueType="floatType"/>
</set>
anim = AnimatorInflater.loadAnimator(this, R.anim.anim_state);
anim.setTarget(view);
anim.start();
寫在后面的幾句
<p>
至此我們分析了Touch Feedback (觸摸反饋)，Reveal Effect (揭露效果)，Curved Motion (曲線運動)，View State Changes (視圖狀態改變)動畫效果在5.0及5.0以下的實現效果，那么后面的兩個Animate View Drawables (可繪矢量動畫)，Activity Transitions ( Activity 切換效果 )會在Material Design(三)動畫實現下中進行分析。。
