Android基礎(chǔ)動(dòng)畫
- Tween Animation 變換動(dòng)畫
- Frame Animation 幀動(dòng)畫
- Layout Animation 布局動(dòng)畫
- Property Animation 屬性動(dòng)畫
Tween Animation(變換動(dòng)畫)在Android中又被分為四種:
Alpha:漸變透明度動(dòng)畫
Scale:漸變尺寸縮放動(dòng)畫
Translate:位置移動(dòng)動(dòng)畫
Rotate:旋轉(zhuǎn)動(dòng)畫
Tween Animation共同屬性:
- Duration:動(dòng)畫持續(xù)時(shí)間(單位:毫秒)
- fillAfter:設(shè)置為true,動(dòng)畫轉(zhuǎn)化在動(dòng)畫結(jié)束后被應(yīng)用
- fillBefore:設(shè)置為true,動(dòng)畫轉(zhuǎn)化在動(dòng)畫開始前被應(yīng)用
- interpolator:動(dòng)畫插入器(加速、減速插入器)
- repeatCount:動(dòng)畫重復(fù)次數(shù)
- repateMode:順序重復(fù)/倒序重復(fù)
- startOffset:動(dòng)畫之間的時(shí)間間隔
Animation實(shí)現(xiàn)方式有兩種:
- 配置文件(/res/anim)——alpha、scale、translate、rotate。更簡(jiǎn)單。
- Java代碼實(shí)現(xiàn)——AlphaAnimation、ScaleAnimation、TranAnimation、RotateAnimation。更靈活。
兩種方式各有所長(zhǎng):
如果變換比較多,而且很多參數(shù)都是動(dòng)態(tài)的(比如時(shí)間間隔、位移移動(dòng)的坐標(biāo)通過動(dòng)態(tài)獲取、動(dòng)態(tài)計(jì)算),則推薦使用Java代碼實(shí)現(xiàn)。
如果動(dòng)畫是一個(gè)固定的效果,則推薦使用配置文件的方式。
通過加載配置文件的方式實(shí)現(xiàn)動(dòng)畫:
Animation scale = AnimationUtils.loadAnimation(TweenActivity.this,R.anim.scale_anim);
//開始動(dòng)畫
img.startAnimation(scale);
MainActivity.java
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
public class MainActivity extends Activity implements OnClickListener {
private ImageView image;
private Button scale;
private Button rotate;
private Button translate;
private Button mix;
private Button alpha;
private Button continue_btn;
private Button continue_btn2;
private Button flash;
private Button move;
private Button change;
private Button layout;
private Button frame;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.main);
image = (ImageView) findViewById(R.id.image);
scale = (Button) findViewById(R.id.scale);
rotate = (Button) findViewById(R.id.rotate);
translate = (Button) findViewById(R.id.translate);
alpha = (Button) findViewById(R.id.alpha);
continue_btn = (Button) findViewById(R.id.continue_btn);
continue_btn2 = (Button) findViewById(R.id.continue_btn2);
flash = (Button) findViewById(R.id.flash);
move = (Button) findViewById(R.id.move);
change=(Button) findViewById(R.id.change);
layout=(Button) findViewById(R.id.layout);
frame=(Button) findViewById(R.id.frame);
scale.setOnClickListener(this);
rotate.setOnClickListener(this);
translate.setOnClickListener(this);
alpha.setOnClickListener(this);
continue_btn.setOnClickListener(this);
continue_btn2.setOnClickListener(this);
flash.setOnClickListener(this);
move.setOnClickListener(this);
change.setOnClickListener(this);
layout.setOnClickListener(this);
frame.setOnClickListener(this);
}
@Override
public void onClick(View view) {
// TODO Auto-generated method stub
Animation loadAnimation;
switch (view.getId()) {
case R.id.scale: {
loadAnimation = AnimationUtils.loadAnimation(this, R.anim.scale);
image.startAnimation(loadAnimation);
break;
}
case R.id.rotate: {
loadAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate);
image.startAnimation(loadAnimation);
break;
}
case R.id.translate: {
loadAnimation = AnimationUtils
.loadAnimation(this, R.anim.translate);
image.startAnimation(loadAnimation);
break;
}
case R.id.continue_btn: {
loadAnimation = AnimationUtils
.loadAnimation(this, R.anim.translate);
image.startAnimation(loadAnimation);
final Animation loadAnimation2 = AnimationUtils.loadAnimation(this,
R.anim.rotate);
loadAnimation.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation arg0) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationRepeat(Animation arg0) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animation arg0) {
// TODO Auto-generated method stub
image.startAnimation(loadAnimation2);
}
});
break;
}
case R.id.continue_btn2: {
loadAnimation = AnimationUtils.loadAnimation(this,
R.anim.continue_anim);
image.startAnimation(loadAnimation);
break;
}
case R.id.alpha: {
loadAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha);
image.startAnimation(loadAnimation);
break;
}
case R.id.move: {
TranslateAnimation translate = new TranslateAnimation(-50, 50,
0, 0);
translate.setDuration(1000);
translate.setRepeatCount(Animation.INFINITE);
translate.setRepeatMode(Animation.REVERSE);
image.startAnimation(translate);
break;
}
case R.id.flash: {
AlphaAnimation alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
alphaAnimation.setDuration(100);
alphaAnimation.setRepeatCount(10);
alphaAnimation.setRepeatMode(Animation.REVERSE);
image.startAnimation(alphaAnimation);
break;
}
case R.id.change:
{
Intent intent=new Intent(MainActivity.this,MainActivity2.class);
startActivity(intent);
overridePendingTransition(R.anim.zoom_in,R.anim.zoom_out);
break;
}
case R.id.layout:
{
Intent intent=new Intent(MainActivity.this,ListActivity.class);
startActivity(intent);
break;
}
case R.id.frame:
{
image.setImageResource(R.drawable.anim_list);
break;
}
}
}
}
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical" >
<Button
android:id="@+id/scale"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:paddingBottom="5dp"
android:paddingTop="5sp"
android:text="ScaleAnimation(縮放動(dòng)畫)" />
<Button
android:id="@+id/alpha"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:paddingBottom="5dp"
android:paddingTop="5sp"
android:text="AlphaAnimation(透明度動(dòng)畫)" />
<Button
android:id="@+id/rotate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:paddingBottom="5dp"
android:paddingTop="5sp"
android:text="RotateAnimation(旋轉(zhuǎn)動(dòng)畫)" />
<Button
android:id="@+id/translate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:paddingBottom="5dp"
android:paddingTop="5sp"
android:text="TranslateAnimation(位移動(dòng)畫)" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="@+id/continue_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:paddingBottom="5dp"
android:paddingTop="5sp"
android:text="續(xù)播1" />
<Button
android:id="@+id/continue_btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:paddingBottom="5dp"
android:paddingTop="5sp"
android:text="續(xù)播2" />
<Button
android:id="@+id/flash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:paddingBottom="5dp"
android:paddingTop="5sp"
android:text="閃爍" />
<Button
android:id="@+id/move"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:paddingBottom="5dp"
android:paddingTop="5sp"
android:text="抖動(dòng)" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="@+id/change"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:paddingBottom="5dp"
android:paddingTop="5sp"
android:text="切換動(dòng)畫" />
<Button
android:id="@+id/layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:paddingBottom="5dp"
android:paddingTop="5sp"
android:text="布局動(dòng)畫" />
<Button
android:id="@+id/frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:paddingBottom="5dp"
android:paddingTop="5sp"
android:text="逐幀動(dòng)畫" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:src="@drawable/ic_launcher" >
</ImageView>
</LinearLayout>
</LinearLayout>
ListActivity.java
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.view.animation.AnimationUtils;
import android.view.animation.LayoutAnimationController;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class ListActivity extends Activity{
private ListView listView;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.list_layout);
listView=(ListView) findViewById(R.id.listView);
List<String>list=new ArrayList<String>();
for(int i=0;i<20;i++)
{
list.add("aa"+i);
}
ArrayAdapter<String>adapter=new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, list);
listView.setAdapter(adapter);
LayoutAnimationController lac=new LayoutAnimationController(AnimationUtils.loadAnimation(this, R.anim.zoom_in));
lac.setOrder(LayoutAnimationController.ORDER_NORMAL);
listView.setLayoutAnimation(lac);
listView.startLayoutAnimation();
}
}
MainActivity2.java
package com.imooc.android_animation;
import android.app.Activity;
import android.os.Bundle;
public class MainActivity2 extends Activity{
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.main2);
}
}
res/anim動(dòng)畫配置文件
alpha.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<alpha
android:duration="1000"
android:fromAlpha="0.1"
android:toAlpha="1.0" >
</alpha>
</set>
continue_anim.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<alpha
android:duration="3000"
android:fromAlpha="0.2"
android:toAlpha="1.0" />
<alpha
android:duration="3000"
android:fromAlpha="1.0"
android:startOffset="3000"
android:toAlpha="0.2" />
</set>
rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<rotate
android:duration="1000"
android:fromDegrees="0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="+360" />
</set>
scale.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<scale
android:duration="2000"
android:fillAfter="false"
android:fromXScale="0.0"
android:fromYScale="0.0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
translate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1000"
android:fromXDelta="10"
android:fromYDelta="10"
android:toXDelta="100"
android:toYDelta="100" />
</set>
zoom_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator" >
<scale
android:duration="1000"
android:fromXScale="0.1"
android:fromYScale="0.1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.0"
android:toYScale="1.0" />
<alpha
android:duration="1000"
android:fromAlpha="0"
android:toAlpha="1.0" />
</set>
zoom_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator"
android:zAdjustment="top" >
<scale
android:duration="@android:integer/config_mediumAnimTime"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%p"
android:pivotY="50%p"
android:toXScale="0.1"
android:toYScale="0.1" />
<alpha
android:duration="@android:integer/config_mediumAnimTime"
android:fromAlpha="1.0"
android:toAlpha="0" />
</set>
演示效果:

anim.gif