**原文地址:http://blog.csdn.net/qq_34902522/article/details/77651799
前言###
現(xiàn)在的android開發(fā)提出的需求是越來越接近現(xiàn)實(shí)真實(shí)感抽活,提高用戶
體驗(yàn)感摊溶。就拿動(dòng)畫效果來說馁筐,之前設(shè)計(jì)給的需求大都比較直接妻往,縮放、
旋轉(zhuǎn)雇锡、移動(dòng)等動(dòng)畫效果都執(zhí)行完就結(jié)束了◎窍樱現(xiàn)在的話渠概,為了追求現(xiàn)實(shí)
生活中的那種真實(shí)感,往往都會(huì)有一個(gè)回彈的效果舶替,稱之為彈性動(dòng)畫令境。
非彈性動(dòng)畫體驗(yàn)###
非彈性動(dòng)畫的效果圖:
普通縮放動(dòng)畫效果
我們來看一下實(shí)現(xiàn)該效果的代碼:
private void onScaleAnimation(){
ObjectAnimator animatorX = ObjectAnimator.ofFloat(imageView,"scaleX",1.0f,1.8f);
ObjectAnimator animatorY = ObjectAnimator.ofFloat(imageView,"scaleY",1.0f,1.8f);
AnimatorSet set =new AnimatorSet();
set.setDuration(1000);
set.playTogether(animatorX,animatorY);
set.start();
}
通過效果圖,我們會(huì)覺得不real顾瞪,我們想讓他Q一點(diǎn)展父,有彈性效果
那該怎么實(shí)現(xiàn)呢?往下看玲昧。
彈性動(dòng)畫的三種實(shí)現(xiàn)方式###
way 1####
通過interpolator(差值器)實(shí)現(xiàn)彈性效果栖茉。
這里給大家安利一個(gè)關(guān)于差值器網(wǎng)站:
在這個(gè)網(wǎng)站上可以在線看每種interpolator的效果,從而選擇
所需要的interpolator孵延。這里我們選擇scaling,library選
擇spring吕漂。如下圖:
這里寫圖片描述
然后重寫interpolator類,代碼如下:
public class SpringScaleInterpolator implements Interpolator {
//彈性因數(shù)
private float factor;
public SpringScaleInterpolator(float factor) {
this.factor = factor;
}
@Override
public float getInterpolation(float input) {
return (float) (Math.pow(2, -10 * input) * Math.sin((input - factor / 4) * (2 * Math.PI) / factor) + 1);
}
}
接下來就是把我們重寫的差值器設(shè)置進(jìn)去尘应,看代碼:
private void onScaleAnimationBySpringWayOne(){
// ScaleAnimation animation =new ScaleAnimation(1.0f,1.8f,1.0f,1.8f);
// animation.setDuration(1000);
// animation.setInterpolator(new SpringScaleInterpolator(0.4f));
// imageView.startAnimation(animation);
ObjectAnimator animatorX = ObjectAnimator.ofFloat(imageView,"scaleX",1.0f,1.8f);
ObjectAnimator animatorY = ObjectAnimator.ofFloat(imageView,"scaleY",1.0f,1.8f);
AnimatorSet set =new AnimatorSet();
set.setDuration(1000);
set.setInterpolator(new SpringScaleInterpolator(0.4f));
set.playTogether(animatorX,animatorY);
set.start();
}
這里重寫的interpolator的構(gòu)造方法中我穿的參數(shù)是因子惶凝,
它的值越大吼虎,它回彈效果越慢。讓我們來看看效果吧苍鲜。
重寫interpolator實(shí)現(xiàn)的回彈效果
確實(shí)達(dá)到了我們要的彈性效果思灰,如果覺得彈性不夠的話,可以修改
彈性因數(shù)即可混滔。這里我用的是屬性動(dòng)畫洒疚,用補(bǔ)間動(dòng)畫設(shè)置自己
重寫的interpolator也是同樣可以的。
way 2####
第二種實(shí)現(xiàn)彈性動(dòng)畫的方式是使用Facebook推出的rebound
如何使用的呢坯屿?首先我們要在build.gradle中引入如下依賴:
compile 'com.facebook.rebound:rebound:0.3.8'
然后我們先上代碼油湖,根據(jù)代碼來講解使用:
private void onScaleAnimationBySpringWayTwo(){
SpringSystem springSystem = SpringSystem.create();
Spring spring = springSystem.createSpring();
spring.setCurrentValue(1.0f);
spring.setSpringConfig(new SpringConfig(50,5));
spring.addListener(new SimpleSpringListener(){
@Override
public void onSpringUpdate(Spring spring) {
super.onSpringUpdate(spring);
float currentValue = (float) spring.getCurrentValue();
imageView.setScaleX(currentValue);
imageView.setScaleY(currentValue);
}
});
spring.setEndValue(1.8f);
}
使用rebound我們需要初始化SpringSystem對象和Spring對象。
通過Spring我們可以設(shè)置動(dòng)畫屬性的初始值领跛、結(jié)束值乏德。
Spring需要添加一個(gè)SpringListener接口,代碼中我用的SimpleSpringListener
是Springlistener的實(shí)現(xiàn)類吠昭。(ps:addListener這里如果new 一個(gè)SpringListener的話
要重寫全部的方法喊括,沒必要,需要哪個(gè)寫哪個(gè))矢棚。
我們看下SpringListener接口的定義
public interface SpringListener {
/**
* called whenever the spring is updated
* @param spring the Spring sending the update
*/
void onSpringUpdate(Spring spring);
/**
* called whenever the spring achieves a resting state
* @param spring the spring that's now resting
*/
void onSpringAtRest(Spring spring);
/**
* called whenever the spring leaves its resting state
* @param spring the spring that has left its resting state
*/
void onSpringActivate(Spring spring);
/**
* called whenever the spring notifies of displacement state changes
* @param spring the spring whose end state has changed
*/
void onSpringEndStateChange(Spring spring);
}
我們需要什么樣的需求就重寫對應(yīng)方法就好瘾晃。
上面的代碼中有SpringConfig這個(gè)對象,通過看源碼發(fā)現(xiàn)
他的構(gòu)造函數(shù)接受兩個(gè)變量:1.tension(拉力)幻妓、2.friction(摩擦力)蹦误。
作用是什么呢?很好理解tension拉力越大肉津,彈性越大强胰,friction
摩擦力越大,彈性效果越小妹沙。默認(rèn)的tension值偶洋,friction值如下:
public static SpringConfig defaultConfig = SpringConfig.fromOrigamiTensionAndFriction(40, 7);
下面讓我們看下通過rebound實(shí)現(xiàn)的彈性效果是什么樣的.
通過rebound實(shí)現(xiàn)彈性動(dòng)畫
彈性效果可以通過修改tension和friction的值來改變,大家可以試試距糖。
way 3####
下面我們說一說最后一種實(shí)現(xiàn)方式玄窝。通過引入官方提供的SpringAnimation
來實(shí)現(xiàn)。上面第二種方式我們是用的Facebook推出的框架悍引,現(xiàn)在
我們看看Google官方的效果吧恩脂。
首先我們在build.gradle文件中引入依賴:
compile 'com.android.support:support-dynamic-animation:25.3.1'
接下來上代碼:
private void onScaleAnimationBySpringWayThree(){
SpringAnimation animationX = new SpringAnimation(imageView, SpringAnimation.SCALE_X,1.8f);
SpringAnimation animationY = new SpringAnimation(imageView, SpringAnimation.SCALE_Y,1.8f);
animationX.getSpring().setStiffness(SpringForce.STIFFNESS_LOW);
animationX.getSpring().setDampingRatio(SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY);
animationX.setStartValue(1.0f);
animationY.getSpring().setStiffness(SpringForce.STIFFNESS_LOW);
animationY.getSpring().setDampingRatio(SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY);
animationY.setStartValue(1.0f);
animationX.start();
animationY.start();
}
這里面具體的一些用法,我就不細(xì)說了趣斤,可以參考:
這個(gè)鏈接里面說的還挺詳細(xì)的俩块。那我們看下通過SpringAnimation
實(shí)現(xiàn)的效果是怎么樣的。
彈性動(dòng)畫實(shí)現(xiàn)通過SpringAnimation
同rebound,這邊如果你對彈性動(dòng)畫的彈性效果不滿意可以通過
setStiffness()和setDampingRatio()方法來實(shí)現(xiàn)你想要的效果玉凯。
注意哦势腮,stiffness的值越小,彈性效果越好漫仆,彈時(shí)間越長捎拯。
DampingRatio的值越大,彈性效果越差盲厌。
區(qū)別###
這三種方式都可以實(shí)現(xiàn)彈性效果署照,那到底選擇什么方式呢,這里說一下
rebound和SpringAnimation狸眼。SpringAnimation的話在對一個(gè)控件
多個(gè)屬性的動(dòng)畫效果設(shè)置比如一個(gè)view我既設(shè)置縮放動(dòng)畫又設(shè)置
平移動(dòng)畫藤树。就會(huì)會(huì)出現(xiàn)代碼量多的問題浴滴,而rebound則相對好些拓萌。
下面附上一張完整的效果圖:
這里寫圖片描述
最后附上項(xiàng)目的demo,有需要的可以看看升略。