動畫效果Animation-android
》自Android 3.0版本開始,系統給我們提供了一種全新的動畫模式,屬性動畫(property animation)。
Android之前的補間動畫機制其實還算是比較健全的,在android.view.animation包下面有好多的類可以供我們操作,來完成一系列的動畫效果,比如說對View進行移動、縮放、旋轉和淡入淡出,並且我們還可以藉助AnimationSet來將這些動畫效果組合起來使用,除此之外還可以通過配置Interpolator來控制動畫的播放速度等。
新引入的屬性動畫機制已經不再是針對於View來設計的了,也不限定於只能實現移動、縮放、旋轉和淡入淡出這幾種動畫操作,同時也不再只是一種視覺上的動畫效果了。它實際上是一種不斷地對值進行操作的機制,並將值賦值到指定物件的指定屬性上,可以是任意物件的任意屬性。所以我們仍然可以將一個View進行移動或者縮放,但同時也可以對自定義View中的Point物件進行動畫操作了。我們只需要告訴系統動畫的執行時長,需要執行哪種型別的動畫,以及動畫的初始值和結束值,剩下的工作就可以全部交給系統去完成了。
既然屬性動畫的實現機制是通過對目標物件進行賦值並修改其屬性來實現的,那麼之前所說的按鈕顯示的問題也就不復存在了,如果我們通過屬性動畫來移動一個按鈕,那麼這個按鈕就是真正的移動了,而不再是僅僅在另外一個位置繪製了而已。
》ValueAnimator、ObjectAnimator、AnimatorSet、組合動畫、XML配置動畫屬性
1.屬性動畫要求動畫作用的物件提供該屬性的get和set方法,屬性動畫根據你傳遞的該熟悉的初始值和最終值,以動畫的效果多次去呼叫set方法,每次傳遞給set方法的值都不一樣,確切來說是隨著時間的推移,所傳遞的值越來越接近最終值。
private
void
performAnimate()
{
ViewWrapper
wrapper =
new
ViewWrapper(mButton);
ObjectAnimator.ofInt(wrapper,
width,
500
).setDuration(
5000
).start();
}
@Override
public
void
onClick(View
v) {
if
(v
== mButton) {
performAnimate();
}
}
private
static
class
ViewWrapper {
private
View
mTarget;
public
ViewWrapper(View
target) {
mTarget
= target;
}
public
int
getWidth()
{
return
mTarget.getLayoutParams().width;
}
public
void
setWidth(
int
width)
{
mTarget.getLayoutParams().width
= width;
mTarget.requestLayout();
}
}
> 1.View動畫(漸變動畫)的功能是有限的,大家可以嘗試使用屬性動畫
2.為了在各種安卓版本上使用屬性動畫,你需要採用nineoldandroids,它是GitHub開源專案,jar包和原始碼都可以在網上下到,如果下不到jar包,我可以發給大家
3.再複雜的動畫都是簡單動畫的合理組合,再加上本文介紹的方法,可以對任何屬性作用動畫效果,也就是說你幾乎可以做出任何動畫
4.屬性動畫中的插值器(Interpolator)和估值器(TypeEvaluator)很重要,它是實現非勻速動畫的重要手段,你應該試著搞懂它,最好你還能夠自定義它們
private
void
performAnimate(
final
View
target,
final
int
start,
final
int
end)
{
ValueAnimator
valueAnimator = ValueAnimator.ofInt(
1
,
100
);
valueAnimator.addUpdateListener(
new
AnimatorUpdateListener()
{
//持有一個IntEvaluator物件,方便下面估值的時候使用
private
IntEvaluator
mEvaluator =
new
IntEvaluator();
@Override
public
void
onAnimationUpdate(ValueAnimator
animator) {
//獲得當前動畫的進度值,整型,1-100之間
int
currentValue
= (Integer)animator.getAnimatedValue();
Log.d(TAG,
current value: + currentValue);
//計算當前進度佔整個動畫過程的比例,浮點型,0-1之間
float
fraction
= currentValue / 100f;
//這裡我偷懶了,不過有現成的幹嗎不用呢
//直接呼叫整型估值器通過比例計算出寬度,然後再設給Button
target.getLayoutParams().width
= mEvaluator.evaluate(fraction, start, end);
target.requestLayout();
}
});
valueAnimator.setDuration(
5000
).start();
}
@Override
public
void
onClick(View
v) {
if
(v
== mButton) {
performAnimate(mButton,
mButton.getWidth(),
500
);
}
}
Animator.start()
//
start the animation from the beginning
Animator.end()
//
end the animation
Animator.cancel()
//
cancel the animation
Animator.pause()
//
added in API 19; pause the animation
Animator.resume()
//
added in API 19; resume a paused animation
>有些時候,我們需要去查詢當前動畫的狀態,這個需求可以通過下面這些方法來完成。
1
2
3
|
boolean isStarted() //
added in API 14 boolean isRunning() boolean isPaused() //
added in API 19 |
如果當前動畫已經呼叫了start函式並且還沒播放完成也沒有被取消掉,那麼isStarted方法會返回true。請注意,isStarted 方法最低的 API 需求是 14.同時,就算是在動畫播放延遲中,該方法依然會返回 true。這就是這個方法和 isRunning 方法的不同點,isRunning 方法只會在動畫確實在播放並且還沒停止的時候返回 true。
在 API 19 的時候,isPaused 方法被加入進來。這是由於那時候動畫可以被暫停和恢復了,如果 isPaused 返回了 true,那麼說明當前動畫是在暫停狀態下,反之亦然。
當我們通過pause呼叫去暫停動畫時,isPaused會返回true。然後通過 resume呼叫去恢復動畫播放後,isPaused也會變成false。可以注意到,圖中如果動畫是自然結束的,動畫的狀態並沒有改變。當然,動畫停止播放後,isStarted和isRunning肯定應該是返回false的。實際上,在動畫自然停止後,如果我們再去呼叫 isStarted和isRunning他們的的確確會返回false。相關文章
- jQuery 效果 – 動畫jQuery動畫
- jQuery 動畫效果 與 動畫佇列jQuery動畫佇列
- JS動畫效果——多物體動畫JS動畫
- jQuery 效果 – 停止動畫jQuery動畫
- 萬彩動畫大師教程 | 新增動畫效果動畫
- JavaScript 簡單動畫效果JavaScript動畫
- vue-lottie動畫效果Vue動畫
- SVG 漸變動畫效果SVG動畫
- 卡片旋轉動畫效果動畫
- Java 給PPT新增動畫效果(預設動畫/自定義動畫)Java動畫
- Flutter抖動動畫、顫抖動畫、Flutter文字抖動效果Flutter動畫
- JavaScript簡單的動畫效果JavaScript動畫
- 頁面旋轉動畫效果動畫
- CSS3動畫效果下拉導航選單效果CSSS3動畫
- Vue 常用 transition 動畫效果記錄Vue動畫
- 前端基礎-jQuery的動畫效果前端jQuery動畫
- CSS3動畫按鈕效果CSSS3動畫
- Flutter動畫實現粒子漂浮效果Flutter動畫
- Flutter “孔雀開屏”的動畫效果Flutter動畫
- iOS動畫-擴散波紋效果iOS動畫
- css3動畫效果抖動解決CSSS3動畫
- 分享一個簡單的畫刷動畫效果:?️BrushEffect動畫
- 萬彩動畫大師教程 | 增加滑入等進場動畫效果動畫
- 萬彩動畫大師教程 | 如何給物件新增浮動的動畫效果動畫物件
- 萬彩動畫大師教程 | 如何給字型新增抖動的動畫效果動畫
- CSS3圖片上下動畫浮動效果CSSS3動畫
- CSS動畫效果——語音播放小喇叭CSS動畫
- 加入購物車動畫效果實現動畫
- canvas模擬eharts首頁動畫效果Canvas動畫
- 滑鼠懸浮連結動畫高亮效果動畫
- 5分鐘學會Vue動畫效果Vue動畫
- CSS3 loadding載入動畫效果CSSS3動畫
- CSS3載入等待動畫效果CSSS3動畫
- JavaScript教程全套影片合集:DOM動畫效果JavaScript動畫
- Flutter 類抽屜效果動畫實現。Flutter動畫
- Flex的動畫效果與變換!(二)Flex動畫
- Flutter 動畫曲線Curves 效果一覽Flutter動畫
- CSS 滑鼠懸浮動畫暫停效果CSS動畫
- Web 頁面如何實現動畫效果Web動畫