當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

【Android动画】之Tween动画 (渐变、缩放、位移、旋转)

發布時間：2023/11/27 生活经验 39 豆豆

生活随笔收集整理的這篇文章主要介紹了【Android动画】之Tween动画 (渐变、缩放、位移、旋转) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Android 平臺提供了兩類動畫。一類是Tween動畫，就是對場景里的對象不斷的進行圖像變化來產生動畫效果（旋轉、平移、放縮和漸變）。

第二類就是 Frame動畫，即順序的播放事先做好的圖像，與gif圖片原理類似。

下面就講一下Tweene Animations。

主要類：

Animation ? 動畫

AlphaAnimation 漸變透明度

RotateAnimation 畫面旋轉

ScaleAnimation 漸變尺寸縮放

TranslateAnimation 位置移動

AnimationSet? 動畫集

有了這些類，那么我們如何來實現動畫效果呢？?

以自定義View為例，該View很簡單，畫面上只有一個圖片。現在我們要對整個View分別實現各種Tween動畫效果。

AlphaAnimation

通過代碼實現?AlphaAnimation，如下：

[java]?view plaincopyprint?

//初始化??
Animation?alphaAnimation?=?new?AlphaAnimation(0.1f,?1.0f);??
//設置動畫時間????????????alphaAnimation.setDuration(3000);??
????????????????this.startAnimation(alphaAnimation);??

其中AlphaAnimation類第一個參數fromAlpha表示動畫起始時的透明度，第二個參數toAlpha表示動畫結束時的透明度。?

setDuration用來設置動畫持續時間。

RotateAnimation

代碼：

[java]?view plaincopyprint?

Animation?rotateAnimation?=?new?RotateAnimation(0f,?360f);??
????????????????rotateAnimation.setDuration(1000);??
????????????????this.startAnimation(rotateAnimation);??

其中RotateAnimation類第一個參數fromDegrees表示動畫起始時的角度，第二個參數toDegrees表示動畫結束時的角度。?

另外還可以設置伸縮模式pivotXType、pivotYType，伸縮動畫相對于x,y 坐標的開始位置pivotXValue、pivotYValue等。

ScaleAnimation

代碼：

[java]?view plaincopyprint?

//初始化??
Animation?scaleAnimation?=?new?ScaleAnimation(0.1f,?1.0f,0.1f,1.0f);??
//設置動畫時間??
scaleAnimation.setDuration(500);??
????????????????this.startAnimation(scaleAnimation);??

ScaleAnimation類中

第一個參數fromX ,第二個參數toX:分別是動畫起始、結束時X坐標上的伸縮尺寸。

第三個參數fromY ,第四個參數toY:分別是動畫起始、結束時Y坐標上的伸縮尺寸。

另外還可以設置伸縮模式pivotXType、pivotYType，伸縮動畫相對于x,y 坐標的開始位置pivotXValue、pivotYValue等。

TranslateAnimation

代碼：

[java]?view plaincopyprint?

//初始化??
Animation?translateAnimation?=?new?TranslateAnimation(0.1f,?100.0f,0.1f,100.0f);??
//設置動畫時間????????????????translateAnimation.setDuration(1000);??
????????????????????????????this.startAnimation(translateAnimation);??

TranslateAnimation類

第一個參數fromXDelta ,第二個參數toXDelta:分別是動畫起始、結束時X坐標。

第三個參數fromYDelta?,第四個參數toYDelta:分別是動畫起始、結束時Y坐標。

參數詳細說明：

表二
XML節點		功能說明
alpha		漸變透明度動畫效果
<alpha android:fromAlpha=”0.1″ android:toAlpha=”1.0″ android:duration=”3000″ />
fromAlpha	屬性為動畫起始時透明度	0.0表示完全透明 1.0表示完全不透明以上值取0.0-1.0之間的float數據類型的數字
toAlpha	屬性為動畫結束時透明度

表三
scale		漸變尺寸伸縮動畫效果
<scale android:interpolator= “@android:anim/accelerate_decelerate_interpolator” android:fromXScale=”0.0″ android:toXScale=”1.4″ android:fromYScale=”0.0″ android:toYScale=”1.4″ android:pivotX=”50%” android:pivotY=”50%” android:fillAfter=”false” android:startOffset=“700” android:duration=”700″ android:repeatCount=”10″ />
fromXScale[float] fromYScale[float]	為動畫起始時，X、Y坐標上的伸縮尺寸		0.0表示收縮到沒有 1.0表示正常無伸縮值小于1.0表示收縮值大于1.0表示放大
toXScale [float] toYScale[float]	為動畫結束時，X、Y坐標上的伸縮尺寸
pivotX[float] pivotY[float]	為動畫相對于物件的X、Y坐標的開始位置		屬性值說明：從0%-100%中取值，50%為物件的X或Y方向坐標上的中點位置
?	?	?	?

表四
translate		畫面轉換位置移動動畫效果
<translate android:fromXDelta=”30″ android:toXDelta=”-80″ android:fromYDelta=”30″ android:toYDelta=”300″ android:duration=”2000″ />
fromXDelta toXDelta	為動畫、結束起始時 X坐標上的位置		?
fromYDelta toYDelta	為動畫、結束起始時 Y坐標上的位置		?
?	?	?	?

表五
rotate			畫面轉移旋轉動畫效果
<rotate android:interpolator=”@android:anim/accelerate_decelerate_interpolator” android:fromDegrees=”0″ android:toDegrees=”+350″ android:pivotX=”50%” android:pivotY=”50%” android:duration=”3000″ />
fromDegrees	為動畫起始時物件的角度	說明當角度為負數——表示逆時針旋轉當角度為正數——表示順時針旋轉 (負數from——to正數:順時針旋轉) (負數from——to負數:逆時針旋轉) (正數from——to正數:順時針旋轉) (正數from——to負數:逆時針旋轉)
toDegrees	屬性為動畫結束時物件旋轉的角度可以大于360度
pivotX pivotY	為動畫相對于物件的X、Y坐標的開始位	說明：以上兩個屬性值從0%-100%中取值 50%為物件的X或Y方向坐標上的中點位置
?	?	?	?

以上都是單獨的使用某個動畫，那么如何讓多個動畫同時生效呢？

答案是?AnimationSet。 ?

初看整個類名，還以為只是用來存放 Animation的一個Set，細看才發現，該類也是繼承自 Animation的。

下面我們實現一個動畫，該動畫會讓圖片移動的同時，圖片透明度漸變，直接看代碼吧。

[java]?view plaincopyprint?

//初始化?Translate動畫??
translateAnimation?=?new?TranslateAnimation(0.1f,?100.0f,0.1f,100.0f);??
//初始化?Alpha動畫??
alphaAnimation?=?new?AlphaAnimation(0.1f,?1.0f);??
??
//動畫集??
AnimationSet?set?=?new?AnimationSet(true);??
set.addAnimation(translateAnimation);??
set.addAnimation(alphaAnimation);??
??
//設置動畫時間?(作用到每個動畫)??
set.setDuration(1000);??
this.startAnimation(set);??

是不是覺得很簡單呢？

附上整個View類的代碼吧。

[java]?view plaincopyprint?

package?com.yfz.view;??
import?com.yfz.R;??
import?android.content.Context;??
import?android.graphics.Canvas;??
import?android.graphics.drawable.BitmapDrawable;??
import?android.util.Log;??
import?android.view.KeyEvent;??
import?android.view.View;??
import?android.view.animation.AlphaAnimation;??
import?android.view.animation.Animation;??
import?android.view.animation.AnimationSet;??
import?android.view.animation.RotateAnimation;??
import?android.view.animation.ScaleAnimation;??
import?android.view.animation.TranslateAnimation;??
public?class?TweenAnim?extends?View?{??
??????
????//Alpha動畫?-?漸變透明度??
????private?Animation?alphaAnimation?=?null;??
??????
????//Sacle動畫?-?漸變尺寸縮放??
????private?Animation?scaleAnimation?=?null;??
??????
????//Translate動畫?-?位置移動??
????private?Animation?translateAnimation?=?null;??
??????
????//Rotate動畫?-?畫面旋轉??
????private?Animation?rotateAnimation?=?null;??
??????
????public?TweenAnim(Context?context)?{??
????????super(context);??
????}??
????@Override??
????protected?void?onDraw(Canvas?canvas)?{??
????????super.onDraw(canvas);??
????????Log.e("Tween",?"onDraw");??
????????//加載一個圖片??
????????canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.gallery_photo_5)).getBitmap(),?0,?0,?null);??
????}??
????@Override??
????public?boolean?onKeyDown(int?keyCode,?KeyEvent?event)?{??
????????Log.e("Tween",?"onKeyDown");??
????????return?true;??
????}??
????@Override??
????public?boolean?onKeyUp(int?keyCode,?KeyEvent?event)?{??
????????Log.e("Tween",?"onKeyDown");??
????????switch?(keyCode)?{??
????????????case?KeyEvent.KEYCODE_DPAD_UP:??
????????????????Log.e("Tween",?"onKeyDown?-?KEYCODE_DPAD_UP");??
????????????????alphaAnimation?=?new?AlphaAnimation(0.1f,?1.0f);??
????????????????//設置動畫時間??
????????????????alphaAnimation.setDuration(3000);??
????????????????this.startAnimation(alphaAnimation);??
????????????????break;??
????????????case?KeyEvent.KEYCODE_DPAD_DOWN:??
????????????????Log.e("Tween",?"onKeyDown?-?KEYCODE_DPAD_DOWN");??
????????????????rotateAnimation?=?new?RotateAnimation(0f,?360f);??
????????????????rotateAnimation.setDuration(1000);??
????????????????this.startAnimation(rotateAnimation);??
????????????????break;??
????????????case?KeyEvent.KEYCODE_DPAD_LEFT:??
????????????????Log.e("Tween",?"onKeyDown?-?KEYCODE_DPAD_LEFT");??
????????????????//初始化??
????????????????scaleAnimation?=?new?ScaleAnimation(0.1f,?1.0f,0.1f,1.0f);??
????????????????//設置動畫時間??
????????????????scaleAnimation.setDuration(500);??
????????????????this.startAnimation(scaleAnimation);??
????????????????break;??
????????????case?KeyEvent.KEYCODE_DPAD_RIGHT:??
????????????????Log.e("Tween",?"onKeyDown?-?KEYCODE_DPAD_RIGHT");??
????????????????//初始化??
????????????????translateAnimation?=?new?TranslateAnimation(0.1f,?100.0f,0.1f,100.0f);??
????????????????//設置動畫時間??
????????????????translateAnimation.setDuration(1000);??
??????????????????
????????????????this.startAnimation(translateAnimation);??
????????????????break;??
????????????case?KeyEvent.KEYCODE_DPAD_CENTER:??
????????????????Log.e("Tween",?"onKeyDown?-?KEYCODE_DPAD_CENTER");??
????????????????//初始化?Translate動畫??
????????????????translateAnimation?=?new?TranslateAnimation(0.1f,?100.0f,0.1f,100.0f);??
????????????????//初始化?Alpha動畫??
????????????????alphaAnimation?=?new?AlphaAnimation(0.1f,?1.0f);??
??????????????????
????????????????//動畫集??
????????????????AnimationSet?set?=?new?AnimationSet(true);??
????????????????set.addAnimation(translateAnimation);??
????????????????set.addAnimation(alphaAnimation);??
??????????????????
????????????????//設置動畫時間?(作用到每個動畫)??
????????????????set.setDuration(1000);??
????????????????this.startAnimation(set);??
????????????????break;??
????????????default:??
????????????????break;??
????????}??
????????return?true;??
????}??
??????
}??

在Activity中調用該類時，需要注意一定setFocusable(true)，否則焦點在Activity上的話，onKeyUp方法是不會生效的。

調用該View的代碼：

[java]?view plaincopyprint?

TweenAnim?anim?=?new?TweenAnim(Lesson_11.this);??
anim.setFocusable(true);??
setContentView(anim);??

上面通過Java代碼，實現了4中不同的Tween動畫，其實在Android中完全可以通過 XML文件來實現動畫。這種方式可能更加簡潔、清晰，也更利于重用。?

下面我們分別對這幾種動畫改用xml來實現。

首先是AlphaAnimation。

alpha_anim.xml：

[xhtml]?view plaincopyprint?

<?xml?version="1.0"?encoding="utf-8"?>??
<set?xmlns:android="http://schemas.android.com/apk/res/android">??
????<alpha??
????????android:fromAlpha="0.1"??
????????android:toAlpha="1.0"??
????????android:duration="2000"??
????/>??
</set>??

不用解釋了吧。

RotateAnimation

rotate_anim.xml：

[xhtml]?view plaincopyprint?

<?xml?version="1.0"?encoding="utf-8"?>??
<set?xmlns:android="http://schemas.android.com/apk/res/android">??
????<rotate??
????????android:interpolator="@android:anim/accelerate_decelerate_interpolator"??
????????android:fromDegrees="0"??
????????android:toDegrees="360"??
????????android:pivotX="50%"??
????????android:pivotY="50%"??
????????android:duration="500"??
????/>??
</set>??

ScaleAnimation

scale_anim.xml：

[xhtml]?view plaincopyprint?

<?xml?version="1.0"?encoding="utf-8"?>??
<set?xmlns:android="http://schemas.android.com/apk/res/android">??
????<scale??
????????android:interpolator="@android:anim/accelerate_decelerate_interpolator"??
????????android:fromXScale="0.0"??
????????android:toXScale="1.0"??
????????android:fromYScale="0.0"??
????????android:toYScale="1.0"??
????????android:pivotX="50%"??
????????android:pivotY="50%"??
????????android:fillAfter="false"??
????????android:duration="500"??
????/>?????
</set>??

TranslateAnimation

translate_anim.xml：

[xhtml]?view plaincopyprint?

<?xml?version="1.0"?encoding="utf-8"?>??
<set?xmlns:android="http://schemas.android.com/apk/res/android">??
????<translate??
????????android:fromXDelta="10"??
????????android:toXDelta="100"??
????????android:fromYDelta="10"??
????????android:toYDelta="100"??
????/>??
</set>??

布局文件都已經寫完，那么如何來使用這些文件呢？

其實也很簡單，此時需要用到AnimationUtils類。通過該類中?loadAnimation 方法來加載這些布局文件。

如：

[java]?view plaincopyprint?

rotateAnimation?=?AnimationUtils.loadAnimation(this.getContext(),?R.anim.rotate_anim);??

這次View類的代碼如下：

[java]?view plaincopyprint?

package?com.yfz.view;??
import?com.yfz.R;??
import?android.content.Context;??
import?android.graphics.Canvas;??
import?android.graphics.drawable.BitmapDrawable;??
import?android.util.Log;??
import?android.view.KeyEvent;??
import?android.view.View;??
import?android.view.animation.AlphaAnimation;??
import?android.view.animation.Animation;??
import?android.view.animation.AnimationSet;??
import?android.view.animation.AnimationUtils;??
import?android.view.animation.RotateAnimation;??
import?android.view.animation.ScaleAnimation;??
import?android.view.animation.TranslateAnimation;??
public?class?TweenAnim2?extends?View?{??
??????
????//Alpha動畫?-?漸變透明度??
????private?Animation?alphaAnimation?=?null;??
??????
????//Sacle動畫?-?漸變尺寸縮放??
????private?Animation?scaleAnimation?=?null;??
??????
????//Translate動畫?-?位置移動??
????private?Animation?translateAnimation?=?null;??
??????
????//Rotate動畫?-?畫面旋轉??
????private?Animation?rotateAnimation?=?null;??
??????
????public?TweenAnim2(Context?context)?{??
????????super(context);??
????}??
????@Override??
????protected?void?onDraw(Canvas?canvas)?{??
????????super.onDraw(canvas);??
????????Log.e("Tween",?"onDraw");??
????????//加載一個圖片??
????????canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.gallery_photo_5)).getBitmap(),?0,?0,?null);??
????}??
????@Override??
????public?boolean?onKeyDown(int?keyCode,?KeyEvent?event)?{??
????????Log.e("Tween",?"onKeyDown");??
????????return?true;??
????}??
????@Override??
????public?boolean?onKeyUp(int?keyCode,?KeyEvent?event)?{??
????????Log.e("Tween",?"onKeyDown");??
????????switch?(keyCode)?{??
????????????case?KeyEvent.KEYCODE_DPAD_UP:??
????????????????Log.e("Tween",?"onKeyDown?-?KEYCODE_DPAD_UP");??
??????????????????
????????????????alphaAnimation?=?AnimationUtils.loadAnimation(this.getContext(),?R.anim.alpha_anim);??
??????????????????
????????????????this.startAnimation(alphaAnimation);??
????????????????break;??
????????????case?KeyEvent.KEYCODE_DPAD_DOWN:??
????????????????Log.e("Tween",?"onKeyDown?-?KEYCODE_DPAD_DOWN");??
??????????????????
????????????????rotateAnimation?=?AnimationUtils.loadAnimation(this.getContext(),?R.anim.rotate_anim);??
??????????????????
????????????????this.startAnimation(rotateAnimation);??
????????????????break;??
????????????case?KeyEvent.KEYCODE_DPAD_LEFT:??
????????????????Log.e("Tween",?"onKeyDown?-?KEYCODE_DPAD_LEFT");??
??????????????????
????????????????scaleAnimation?=?AnimationUtils.loadAnimation(this.getContext(),?R.anim.scale_anim);??
??????????????????
????????????????this.startAnimation(scaleAnimation);??
????????????????break;??
????????????case?KeyEvent.KEYCODE_DPAD_RIGHT:??
????????????????Log.e("Tween",?"onKeyDown?-?KEYCODE_DPAD_RIGHT");??
??????????????????
????????????????translateAnimation?=?AnimationUtils.loadAnimation(this.getContext(),?R.anim.translate_anim);??
??????????????????
????????????????this.startAnimation(translateAnimation);??
????????????????break;??
????????????case?KeyEvent.KEYCODE_DPAD_CENTER:??
????????????????Log.e("Tween",?"onKeyDown?-?KEYCODE_DPAD_CENTER");??
????????????????//初始化?Translate動畫??
????????????????translateAnimation?=?AnimationUtils.loadAnimation(this.getContext(),?R.anim.translate_anim);??
??????????????????
????????????????//初始化?Alpha動畫??
????????????????alphaAnimation?=?AnimationUtils.loadAnimation(this.getContext(),?R.anim.alpha_anim);??
??????????????????
????????????????//動畫集??
????????????????AnimationSet?set?=?new?AnimationSet(true);??
????????????????set.addAnimation(translateAnimation);??
????????????????set.addAnimation(alphaAnimation);??
??????????????????
????????????????//設置動畫時間?(作用到每個動畫)??
????????????????set.setDuration(1000);??
????????????????this.startAnimation(set);??
????????????????break;??
????????????default:??
????????????????break;??
????????}??
????????return?true;??
????}??
??????
} ?

轉載于:https://www.cnblogs.com/Free-Thinker/p/4380002.html

總結

以上是生活随笔為你收集整理的【Android动画】之Tween动画 (渐变、缩放、位移、旋转)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。