我们不得不饮食、睡眠、游玩、恋爱,也就是说,我们不得不接触生活中最甜蜜的事情,不过我们必须不屈服于这些事物。—— 居里夫人
本讲内容:Android基础动画
一、动画分类
1、Tween Animation 变换动画
2、Frame Animation 帧动画
3、Layout Animation 布局动画
4、Property Animation 属性动画
二、Tween Animation 变换动画
a、Alpha: 渐变透明度动画(0.0表示完全透明 1.0表示完全不透明)
1、fromAlpha:动画起始时的透明度
2、toAlpha:动画终止时的透明度
b、Scale: 渐变尺寸缩放动画
1、fromX,toX分别是起始和结束时x坐标上的伸缩尺寸
2、fromY,toY分别是起始和结束时y坐标上的伸缩尺寸
3、pivotX,pivotY分别为伸缩动画相对于x,y坐标开始的位置
c、Translate:位置移动动画
1、fromXDelta,fromYDelta分别是起始时X,Y的坐标
2、toXDelta,toYDelta分别是结束时X,Y的坐标
d、Rotate: 旋转动画
1、fromDegrees 起始的角度
2、toDegrees 终止的角度
3、pivotX,pivotY分别是旋转动画相对于x,y的坐标开始位置
Tween Animation 变换动画共同属性
1、Duration: 动画持续时间(单位:毫秒)
2、fillAfter: 动画结束后,就停留在结束状态
3、fillBefore: 动画结束后,要回到开始时状态
4、interpolator: 动画插入器(加速、减速插入器)
5、repeatCount: 动画重复次数
6、repateMode: 顺序重复/倒序重复
7、startOffset: 动画之间的时间间隔(相当于动画延时,动画集中用到)
三、Tween Animation 实现方式
1、配置文件(/res/anim)--alpha、scale、translate、rotate
//加载配置文件
Animation scale=AnimationUtils.loadAnimation(this,R.anim.scale);
//开始播放
img.startAnimation(scale);
2、Java代码实现 --AlphaAnimation、ScaleAnimation、TranslateAnimation、RotateAnimation(AnimationSet动画集)
//创建Alpha动画
Animation alpha=new AlphaAnimation(0.1f,1.0f);透明度从10%到100%
//设置动画时间为5秒
alhpa.setDuration(5000);
//开始播放
img.startAnimation(alpha);
示例一:
下面是res/layout/activity_main.xml 布局文件:
<LinearLayout 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"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:id="@+id/id_image"
android:layout_width="200dp"
android:layout_height="250dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/pic" />
<Button
android:id="@+id/id_alpha"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="透明度动画" />
<Button
android:id="@+id/id_scale"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="缩放动画" />
<Button
android:id="@+id/id_translate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="移位动画" />
<Button
android:id="@+id/id_rotate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="旋转动画" />
<Button
android:id="@+id/id_rotate_and_alpha"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="旋转和透明动画" />
</LinearLayout>
下面是res/anim/alpha动画文件:
<?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>
下面是res/anim/scale动画文件:
<?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>
下面是res/anim/translate动画文件:
<?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>
下面是res/anim/rotate动画文件:
<?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>
下面是res/anim/rotate_alpha动画文件:
<?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" />
<alpha
android:duration="1000"
android:fromAlpha="0.1"
android:toAlpha="1.0" >
</alpha>
</set>
下面是MainActivity.java主界面文件:
public class MainActivity extends Activity implements OnClickListener {
private ImageView image;
private Button alpha;
private Button scale;
private Button translate;
private Button rotate;
private Button rotate_alpha;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
/**
* 初始化控件
*/
private void initViews() {
image = (ImageView) findViewById(R.id.id_image);
alpha = (Button) findViewById(R.id.id_alpha);
scale = (Button) findViewById(R.id.id_scale);
translate = (Button) findViewById(R.id.id_translate);
rotate = (Button) findViewById(R.id.id_rotate);
rotate_alpha = (Button) findViewById(R.id.id_rotate_and_alpha);
alpha.setOnClickListener(this);
scale.setOnClickListener(this);
translate.setOnClickListener(this);
rotate.setOnClickListener(this);
rotate_alpha.setOnClickListener(this);
}
/**
* 按钮点击事件
*/
public void onClick(View v) {
Animation loadAnimation;
switch (v.getId()) {
case R.id.id_alpha:
loadAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha);
image.startAnimation(loadAnimation);
break;
case R.id.id_scale:
loadAnimation = AnimationUtils.loadAnimation(this, R.anim.scale);
image.startAnimation(loadAnimation);
break;
case R.id.id_translate:
loadAnimation = AnimationUtils
.loadAnimation(this, R.anim.translate);
image.startAnimation(loadAnimation);
break;
case R.id.id_rotate:
loadAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate);
image.startAnimation(loadAnimation);
break;
case R.id.id_rotate_and_alpha:
loadAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate_alpha);
image.startAnimation(loadAnimation);
break;
}
}
}
示例二:
下面是res/layout/activity_main.xml 布局文件:
<LinearLayout 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"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:id="@+id/id_image"
android:layout_width="200dp"
android:layout_height="250dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/pic" />
<Button
android:id="@+id/id_btn1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="组合一" />
<Button
android:id="@+id/id_btn2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="组合二" />
<Button
android:id="@+id/id_btn3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="组合三" />
</LinearLayout>
下面是res/anim/activity_in动画文件:
<?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="3000"
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="3000"
android:fromAlpha="0"
android:toAlpha="1.0" />
</set>
下面是res/anim/activity_out动画文件:
<?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>
下面是MainActivity.java主界面文件:
public class MainActivity extends Activity implements OnClickListener {
private ImageView image;
private Button b1;
private Button b2;
private Button b3;
private Button b4;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
/**
* 初始化控件
*/
private void initViews() {
image = (ImageView) findViewById(R.id.id_image);
b1 = (Button) findViewById(R.id.id_btn1);
b2 = (Button) findViewById(R.id.id_btn2);
b3 = (Button) findViewById(R.id.id_btn3);
b1.setOnClickListener(this);
b2.setOnClickListener(this);
b3.setOnClickListener(this);
}
/**
* 按钮点击事件
*/
public void onClick(View v) {
Animation loadAnimation;
switch (v.getId()) {
case R.id.id_btn1:
//先播放A动画,结束后再播放B动画
loadAnimation = AnimationUtils.loadAnimation(this, R.anim.translate);
final Animation loadAnimation2 = AnimationUtils.loadAnimation(this, R.anim.rotate);
image.startAnimation(loadAnimation);
loadAnimation.setAnimationListener(new AnimationListener() {
/**
* 动画开始时调用
*/
public void onAnimationStart(Animation animation) {
}
/**
* 动画重复时调用
*/
public void onAnimationRepeat(Animation animation) {
}
/**
* 动画结束时调用
*/
public void onAnimationEnd(Animation animation) {
image.startAnimation(loadAnimation2);
}
});
break;
case R.id.id_btn2:
//重复某个动画
Animation alpha=new AlphaAnimation(0.1f, 1.0f);
alpha.setDuration(1000);
alpha.setRepeatCount(10);
//倒序重复REVERSE 正序重复RESTART
alpha.setRepeatMode(Animation.REVERSE);
image.startAnimation(alpha);
break;
case R.id.id_btn3:
/**
* Activity切换动画使用overridePendingTransition()方法
* 参数:第二个activity进入时的动画
* 第一个activity退出时的动画
*/
Intent intent=new Intent(MainActivity.this,MainActivity2.class);
startActivity(intent);
overridePendingTransition(R.anim.activity_in, R.anim.activity_out);
break;
}
}
}
示例三:
下面是res/layout/activity_main.xml 布局文件:
<LinearLayout 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"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:id="@+id/id_image"
android:layout_width="200dp"
android:layout_height="250dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/b4" />
<Button
android:id="@+id/id_btn1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="布局动画" />
<Button
android:id="@+id/id_btn2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="逐帧动画" />
</LinearLayout>
下面是res/layout/list_layout.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" >
<ListView
android:id="@+id/id_listView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
下面是res/drawable/frame.xml 布局文件:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="@drawable/b1"
android:duration="500"/>
<item
android:drawable="@drawable/b2"
android:duration="500"/>
<item
android:drawable="@drawable/b3"
android:duration="500"/>
<item
android:drawable="@drawable/b4"
android:duration="500"/>
</animation-list>
下面是ListActivity.java文件:
public class ListActivity extends Activity{
private ListView listView;
private List<String> dataList;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.list_layout);
listView=(ListView) findViewById(R.id.id_listView);
ArrayAdapter<String> adapter=new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, getData());
listView.setAdapter(adapter);
//布局动画
Animation loadAnimation = AnimationUtils.loadAnimation(this, R.anim.activity_in);
LayoutAnimationController control=new LayoutAnimationController(loadAnimation);
control.setOrder(LayoutAnimationController.ORDER_RANDOM);//播放的顺序
listView.setLayoutAnimation(control);
listView.startLayoutAnimation();
}
private List<String> getData() {
dataList=new ArrayList<String>();
for(int i=0;i<20;i++){
dataList.add("黎国劲"+i);
}
return dataList;
}
}
下面是MainActivity.java主界面文件:
public class MainActivity extends Activity implements OnClickListener {
private ImageView image;
private Button b1;
private Button b2;
private Button b3;
private Button b4;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
/**
* 初始化控件
*/
private void initViews() {
image = (ImageView) findViewById(R.id.id_image);
b1 = (Button) findViewById(R.id.id_btn1);
b2 = (Button) findViewById(R.id.id_btn2);
b1.setOnClickListener(this);
b2.setOnClickListener(this);
}
/**
* 按钮点击事件
*/
public void onClick(View v) {
Animation loadAnimation;
switch (v.getId()) {
case R.id.id_btn1:
Intent intent=new Intent(MainActivity.this,ListActivity.class);
startActivity(intent);
break;
case R.id.id_btn2:
image.setImageResource(R.drawable.frame);
break;
}
}
}
Take your time and enjoy it