最近看到了一些關于Animation的內容,總結一下留待后用;
視圖動畫
我們在APP中看到的動畫一般都是視圖動畫,那就先來總結一下視圖動畫;一般我們使用到的視圖動畫包括透明動畫(AlphaAnimation)、旋轉動畫(RotateAnimation)、移動動畫(TranslateAnimation)和縮放動畫(ScaleAnimation)。我們先來看看運行效果圖,然后再來呈現代碼。
不多說了直接上代碼
透明動畫(AlphaAnimation)
純java實現:
只需要在對應的button點擊事件中添加AlphaAnimation即可:
findViewById(R.id.btn_alpha).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);//透明度從0~1
alphaAnimation.setDuration(1000);//持續時間
v.startAnimation(alphaAnimation);
}
});
java和xml結合條件下:
在res/anim下創建alpha.xml如下:
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromAlpha="0"
android:toAlpha="1">
</alpha>
在java代碼點擊事件中添加上:
v.startAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha));
剩下的3個動畫也和上面的方法類似,下面就簡單的介紹一下
旋轉動畫(RotateAnimation)
純java實現:
只需要在對應的button點擊事件中添加RotateAnimation即可:
RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
//上述參數解釋分別為:旋轉起始角度,旋轉結束角度,相對與自身,x軸方向的一半,相對于自身,y軸方向的一半
rotateAnimation.setDuration(1000);
v.startAnimation(rotateAnimation);
java和xml結合條件下:
在res/anim下創建rotate.xml如下:
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360">
</rotate>
在java代碼點擊事件中添加上:
v.startAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate));
移動動畫(TranslateAnimation)
純java實現:
TranslateAnimation translateAnimation = new TranslateAnimation(0,80,0,80);
//起始x軸,最終x軸,起始y軸,最終y軸
translateAnimation.setDuration(1000);
v.startAnimation(translateAnimation);
java和xml結合條件下:
在res/anim下創建translate.xml如下:
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="80"
android:toYDelta="80">
</translate>
在java代碼點擊事件中添加上:
v.startAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate));
縮放動畫(ScaleAnimation)
純java實現:
ScaleAnimation scaleAnimation = new ScaleAnimation(0,1,0,1);//x軸0倍,x軸1倍,y軸0倍,y軸1倍
scaleAnimation.setDuration(1000);
v.startAnimation(scaleAnimation);
java和xml結合條件下:
在res/anim下創建scale.xml如下:
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="0"
android:fromYScale="0"
android:toXScale="1"
android:toYScale="1">
</scale>
在java代碼點擊事件中添加上:
v.startAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale ));
混合動畫
純java實現:
AnimationSet animationSet = new AnimationSet(true);//共用動畫補間
animationSet.setDuration(1000);
AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
alphaAnimation.setDuration(1000);
animationSet.addAnimation(alphaAnimation);
TranslateAnimation translateAnimation = new TranslateAnimation(0, 80, 0, 80);
translateAnimation.setDuration(1000);
animationSet.addAnimation(translateAnimation);
v.startAnimation(animationSet);
java和xml結合條件下:
在res/anim下創建blend_set.xml如下:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:shareInterpolator="true">
<!--透明度動畫-->
<alpha
android:duration="1000"
android:fromAlpha="0"
android:toAlpha="1">
</alpha>
<!--移動動畫-->
<translate
android:duration="1000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="80"
android:toYDelta="80">
</translate>
</set>
在java代碼點擊事件中添加上:
v.startAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.blend_set));
布局動畫
先看效果圖:
根據示意圖我們發現button按鈕出現的時間是不一樣的,這就是對整個頁面布局添加了動畫之后的效果;我們來看一下如何實現的:
RelativeLayout activity_main = (RelativeLayout) findViewById(R.id.activity_main);
ScaleAnimation scaleAnimation = new ScaleAnimation(0,1,0,1);
scaleAnimation.setDuration(1000);
LayoutAnimationController layoutAnimationController = new LayoutAnimationController(scaleAnimation,0.5f);//動畫效果、每個動畫效果之間延遲一半時間運行
layoutAnimationController.setOrder(LayoutAnimationController.ORDER_RANDOM);
//加載順序:包括從上倒下(ORDER_NORMAL)、從下到上(ORDER_REVERSE)、隨機(ORDER_RANDOM)
activity_main.setLayoutAnimation(layoutAnimationController);
實現步驟
- 先設置動畫效果
- 利用LayoutAnimationController ()方法添加上動畫、延遲時間以及出現順序
- 然后找到布局對應的layout文件,使用setLayoutAnimation()方法即可
在第二頁中的listview實現的動畫效果是在xml中設置的,也比較簡單:
在res/anim下創建list_animation.xml文件(借用上面的scale.xml文件):
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
android:animation="@anim/scale"
android:delay="0.5">
</layoutAnimation>
在lsitview的xml文件下添加一句:
android:layoutAnimation="@anim/list_animation"
OK,以上功能完全實現~