寫在前面的幾句話
<p>
上一篇對Material Design 有簡單的認(rèn)識與了解了批旺，我相信大家應(yīng)該對Material Desgin有一定的認(rèn)知了把懊亡，同時(shí)我相信絕大部分的童鞋應(yīng)該對于其中的動畫很感興趣，那么這一篇就介紹下Material Design的動畫實(shí)現(xiàn)诬滩，由于這些動畫效果是在5.0上才提供Api的凉倚，那么如何在5.0以下的系統(tǒng)實(shí)現(xiàn)相似甚至相同的效果呢渺氧？那么本篇文章就對這方面進(jìn)行詳細(xì)的介紹友驮，由于內(nèi)容較多漂羊，那么我會分為上下兩個文章進(jìn)行說明。
分類
<p>
根據(jù)動畫的類別和提供的類和屬性等卸留，可以將 Material Design Animation分為 6 類
Touch Feedback (觸摸反饋)
Reveal Effect (揭露效果)
Curved Motion (曲線運(yùn)動)
View State Changes (視圖狀態(tài)改變)
Animate View Drawables (可繪矢量動畫)
Activity Transitions ( Activity 切換效果 )
接下來就對這6類動畫進(jìn)行說明走越，及在5.0系統(tǒng)下如何實(shí)現(xiàn)相似效果
<p>
一.Touch Feedback (觸摸反饋)
<p>
觸摸反饋應(yīng)該很好理解，平時(shí)開發(fā)中耻瑟，其實(shí)也會對觸控有不同的反饋旨指，比如變灰呀等等，但是5.0的觸控反饋其實(shí)是加入了漣漪(波紋)效應(yīng)喳整，這也是與之前的觸控反饋有不同的地方
按鈕的默認(rèn)觸摸反饋動畫是使用了新的RippleDrawable類谆构，它會是波紋效果在不同狀態(tài)間變換。
大多數(shù)情況下框都，我們可以使用這個功能通過在xml文件中定義背景：
android:attr/selectableItemBackground 有界限的波紋
android:attr/selectableItemBackgroundBorderless 可以超出視圖區(qū)域的波紋 (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
屬性可以改變默認(rèn)的觸摸反饋顏色。
另外瞬项，也可以自定義按鈕的效果蔗蹋，這里使用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代表按下后的漣漪效果的顏色，內(nèi)部的內(nèi)容則和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"
/>
那么如何在低版本下實(shí)現(xiàn)這種漣漪的效果呢囱淋？
自然要去自定義控件來實(shí)現(xiàn)了
主要的代碼則是這部分
//繪制按下后的整個背景
canvas.drawRect(pointX, pointY, pointX + viewWidth, pointY + viewHeight, bottomPaint);
canvas.save();
//繪制擴(kuò)散圓形背景
canvas.clipRect(pointX, pointY, pointX + viewWidth, pointY + viewHeight);
canvas.drawCircle(eventX, eventY, shaderRadio, colorPaint);
canvas.restore();
這里則是繪制漣漪的代碼猪杭，自定義控件又分為兩個方向了，第一種是自定義單個控件妥衣，這個控件有這種點(diǎn)擊的效果皂吮，另外一種則是定義一個layout，layout內(nèi)部的控件點(diǎn)擊都具有這種漣漪效果
上面紅色的區(qū)域?yàn)樽远x的Button税手，下面的部分為自定義的layout蜂筹，可以看到TextView也有與Button同樣的效果
<p>
二.Reveal Effect (揭露效果)
<p>
揭露動畫為用戶提供視覺上的持續(xù)性擋顯示或者隱藏一組界面元素
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 (曲線運(yùn)動)
<p>
Material Design中，動畫依賴時(shí)間插值和空間移動模式曲線芦倒。在android5.0(api 21)和更高版本艺挪，你可以為動畫自定義時(shí)間曲線和移動曲線。
PathInterpolator: 以三次 bezier 曲線中間 2 個控制點(diǎn)的坐標(biāo)來定義動畫的速率快慢
PathInterpolator類是一個新的基于貝塞爾曲線或Path對象的插值器兵扬。這個插值器在1*1的正方形上定義了曲線運(yùn)動麻裳，以（0，0）和（1器钟，1）點(diǎn)作為錨點(diǎn)津坑，根據(jù)夠照參數(shù)控制點(diǎn)。你也可以使用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設(shè)計(jì)規(guī)范中疆瑰，系統(tǒng)提供了三個基本曲線的xml資源:
- @interpolator/fast_out_linear_in.xml
- @interpolator/fast_out_slow_in.xml
- @interpolator/linear_out_slow_in.xml
我們可以給Animator.setInterpolator()傳一個PathInterpolator對象來設(shè)置眉反。
ObjectAnimator.ofFloat(T target, Property<T, Float> xProperty, Property<T, Float> yProperty, Path path): 中間的 path參數(shù)定義位移動畫的路徑。
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();
那么如何在低版本下實(shí)現(xiàn)這種曲線運(yùn)動的效果呢穆役？
我總結(jié)了下有兩種方式寸五，一種為PathMeasure,另一種為TypeEvaluator,PathMeasure在前面的Path學(xué)習(xí)筆記中有介紹，關(guān)于TypeEvaluator會在后面動畫學(xué)習(xí)筆記中進(jìn)行介紹
直接上代碼孵睬，第一種為PathMeasure實(shí)現(xiàn)方式
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();
// 獲取當(dāng)前點(diǎn)坐標(biāo)封裝到mCurrentPosition
mPathMeasure.getPosTan(value, mCurrentPosition, null);
postInvalidate();
}
});
valueAnimator.start();
canvas.drawCircle(mCurrentPosition[0], mCurrentPosition[1], 10, mPaint);
第二種為是TypeEvaluator實(shí)現(xiàn)方式
public class BezierEvaluator implements TypeEvaluator<PointF>{
//途徑的兩個點(diǎn)
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;//起點(diǎn)
PointF point3 = (PointF)endValue;//終點(diǎn)
//代入公式
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));//隨機(jī)
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 (視圖狀態(tài)改變)
<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.配置,配置分為兩種一種為動態(tài)配置一種為靜態(tài)配置
（1）靜態(tài)配置
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="button2"
android:stateListAnimator="@anim/anim_statelistanimator"
/>
(2)動態(tài)配置
StateListAnimator stateLAnim = AnimatorInflater.loadStateListAnimator(this, R.anim.anim_statelistanimator);
button3.setStateListAnimator(stateLAnim);
那么如何在低版本下實(shí)現(xiàn)這種視圖狀態(tài)改變的效果呢？
很簡單掰读，其實(shí)XML資源的StateListAnimator就是一些Animator的集合
所以直接對需要動畫的對象設(shè)置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 (曲線運(yùn)動)蹈集，View State Changes (視圖狀態(tài)改變)動畫效果在5.0及5.0以下的實(shí)現(xiàn)效果烁试，那么后面的兩個Animate View Drawables (可繪矢量動畫)，Activity Transitions ( Activity 切換效果 )會在Material Design(三)動畫實(shí)現(xiàn)下中進(jìn)行分析拢肆。减响。
