今天學習了animation的部分內容。包括了四種動畫效果,分別是AlphaAnimation(透明度漸變),scaleAnimation(大小漸變),translateAnimation(位置漸變),rotateAnimation(旋轉動畫)。animation定義有兩種方法,一種是在XML文件中定義,另一種是在java代碼中定義。通過點擊按鈕實現各種animation效果。
activity_main.xml佈局文件
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout android:id="@+id/id_linear1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button android:id="@+id/btn1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="AlphaAnimation"
/>
<Button android:id="@+id/btn2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="ScaleAnimation"
/>
</LinearLayout>
<LinearLayout android:id="@+id/id_linear2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="@id/id_linear1"
>
<Button android:id="@+id/btn3"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="TranslateAnimation"
/>
<Button android:id="@+id/btn4"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="RotateAnimation"
/>
</LinearLayout>
<ImageView android:id="@+id/id_image"
android:layout_width="150dp"
android:layout_height="200dp"
android:src="@drawable/image7"
android:layout_below="@id/id_linear2"
android:layout_centerHorizontal="true"/>
<Button android:id="@+id/btn5"
android:layout_below="@+id/id_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="共同作用"/>
</RelativeLayout>
一.XML中定義animation
首先在res文件夾下建一個名anim的文件夾(文件夾的名字一定要是anim)
1.AlphaAnimation
我在anim下建一個名爲alpha_anima.xml的文件
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<alpha
android:duration="3000"
android:fromAlpha="1.0"
android:toAlpha="0.0" >
<!-- 透明度控制動畫效果 alpha
浮點型值:
fromAlpha 屬性爲動畫起始時透明度
toAlpha 屬性爲動畫結束時透明度
說明:
0.0表示完全透明
1.0表示完全不透明
以上值取0.0-1.0之間的float數據類型的數字
長整型值:
duration 屬性爲動畫持續時間
說明:
時間以毫秒爲單位
-->
</alpha>
</set>
2.ScaleAnimation
我在anim下建一個名爲scale_animation.xml的文件
<pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:interpolator=
"@android:anim/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="3000" />
<!-- 尺寸伸縮動畫效果 scale
屬性:interpolator 指定一個動畫的插入器
在我試驗過程中,使用android.res.anim中的資源時候發現
有三種動畫插入器:
accelerate_decelerate_interpolator 加速-減速 動畫插入器
accelerate_interpolator 加速-動畫插入器
decelerate_interpolator 減速- 動畫插入器
其他的屬於特定的動畫效果
浮點型值:
fromXScale 屬性爲動畫起始時 X座標上的伸縮尺寸
toXScale 屬性爲動畫結束時 X座標上的伸縮尺寸
fromYScale 屬性爲動畫起始時Y座標上的伸縮尺寸
toYScale 屬性爲動畫結束時Y座標上的伸縮尺寸
說明:
以上四種屬性值
0.0表示收縮到沒有
1.0表示正常無伸縮
值小於1.0表示收縮
值大於1.0表示放大
pivotX 屬性爲動畫相對於物件的X座標的開始位置
pivotY 屬性爲動畫相對於物件的Y座標的開始位置
說明:
以上兩個屬性值 從0%-100%中取值
50%爲物件的X或Y方向座標上的中點位置
長整型值:
duration 屬性爲動畫持續時間
說明: 時間以毫秒爲單位
布爾型值:
fillAfter 屬性 當設置爲true ,該動畫轉化在動畫結束後被應用
-->
</set>
3.TranslateAnimation
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="3000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="300"
android:toYDelta="400" />
<!--
translate 位置轉移動畫效果
整型值:
fromXDelta 屬性爲動畫起始時 X座標上的位置
toXDelta 屬性爲動畫結束時 X座標上的位置
fromYDelta 屬性爲動畫起始時 Y座標上的位置
toYDelta 屬性爲動畫結束時 Y座標上的位置
注意:
沒有指定fromXType toXType fromYType toYType 時候,
默認是以自己爲相對參照物
長整型值:
duration 屬性爲動畫持續時間
說明: 時間以毫秒爲單位
-->
</set>
4.RotateAnimation
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<rotate
android:duration="3000"
android:fromDegrees="0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270" />
<!--
rotate 旋轉動畫效果
屬性:interpolator 指定一個動畫的插入器
在我試驗過程中,使用android.res.anim中的資源時候發現
有三種動畫插入器:
accelerate_decelerate_interpolator 加速-減速 動畫插入器
accelerate_interpolator 加速-動畫插入器
decelerate_interpolator 減速- 動畫插入器
其他的屬於特定的動畫效果
浮點數型值:
fromDegrees 屬性爲動畫起始時物件的角度
toDegrees 屬性爲動畫結束時物件旋轉的角度 可以大於360度
說明:
當角度爲負數——表示逆時針旋轉
當角度爲正數——表示順時針旋轉
(負數from——to正數:順時針旋轉)
(負數from——to負數:逆時針旋轉)
(正數from——to正數:順時針旋轉)
(正數from——to負數:逆時針旋轉)
pivotX 屬性爲動畫相對於物件的X座標的開始位置
pivotY 屬性爲動畫相對於物件的Y座標的開始位置
說明: 以上兩個屬性值 從0%-100%中取值
50%爲物件的X或Y方向座標上的中點位置
長整型值:
duration 屬性爲動畫持續時間
說明: 時間以毫秒爲單位
-->
</set>
5.多種animation共同作用
我建了一個commom_anim.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="3000"
android:fromDegrees="0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="+720" />
<translate
android:duration="3000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="300"
android:toYDelta="400" />
<scale
android:interpolator=
"@android:anim/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="3000" />
</set>
XML文件全部完成
下面是MainActivity中的代碼,我爲了省事就不把純java代碼的animation和採用xml的在分開寫了,有簡單的註釋,一看就明白
package com.lql.animation;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;
public class MainActivity extends ActionBarActivity implements OnClickListener {
private Button btn1, btn2, btn3, btn4, btn5;
private ImageView imageView;
private Animation animation, animation2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn1 = (Button) findViewById(R.id.btn1);
btn2 = (Button) findViewById(R.id.btn2);
btn3 = (Button) findViewById(R.id.btn3);
btn4 = (Button) findViewById(R.id.btn4);
btn5 = (Button) findViewById(R.id.btn5);
imageView = (ImageView) findViewById(R.id.id_image);
btn1.setOnClickListener(this);
btn2.setOnClickListener(this);
btn3.setOnClickListener(this);
btn4.setOnClickListener(this);
btn5.setOnClickListener(this);
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.btn1:
// XML中定義
// animation = AnimationUtils.loadAnimation(this,
// R.anim.alpha_anima);//得到xml文件中定義的動畫
// imageView.startAnimation(animation);
// 採用純java代碼定義
animation = new AlphaAnimation(0.0f, 1.0f);
animation.setDuration(3000);
imageView.setAnimation(animation);// 開啓動畫
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
Toast.makeText(MainActivity.this, "動畫執行完畢",
Toast.LENGTH_SHORT).show();
}
});
break;
case R.id.btn2:
// XML定義
// animation = AnimationUtils.loadAnimation(this,
// R.anim.scale_animation);
animation = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(3000);
imageView.startAnimation(animation);
break;
case R.id.btn3:
// animation = AnimationUtils.loadAnimation(this,
// R.anim.translate_anim);
animation = new TranslateAnimation(30.0f, 300.0f, 40.0f, 400.0f);
animation.setDuration(3000);
imageView.startAnimation(animation);
break;
case R.id.btn4:
animation = AnimationUtils.loadAnimation(this, R.anim.rotate_anim);
animation.setStartOffset(1000);//等待1000毫秒纔開始執行動畫
animation.setFillAfter(true);//動畫執行完畢後保持,執行後的狀態
imageView.startAnimation(animation);
break;
case R.id.btn5:
// animation = AnimationUtils.loadAnimation(this,
// R.anim.common_anim);
AnimationSet animationSet = new AnimationSet(true);// 動畫集
animation = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
animation2 = new TranslateAnimation(30.0f, 300.0f, 40.0f, 400.0f);
animation.setDuration(3000);
animation2.setDuration(3000);
animationSet.addAnimation(animation);// 將animation添加到動畫集中
animationSet.addAnimation(animation2);// 將animation2添加到動畫集中
imageView.startAnimation(animationSet);
break;
}
}
}