玩转Android---2D图形及动画---动画分析(Tween详细分析)
2015-07-30 19:40
609 查看
原址:http://hualang.iteye.com/category/143855
在Android系统中提供了两种动画实现方式:一种是Tween动画,这种实现方式可以使视图组件移动、放大、缩小以及产生透明度的变化;另一种方式是Frame动画,这是逐帧动画,通过顺序播放排列好的图片来实现的,类似电影。
Tween动画:
Tween动画能完成一系列简单的变化(如位置、尺寸、透明度和旋转等)。例如,在你的程序中有一个ImageView组件,我们通过Tween动画可以使该视图实现放大、缩小、旋转、渐变等。Tween动画类位于android.view.animation包中,该包中包含了一些常用的动画实现类。
Animation:动画抽象类,其他几个实现类继承它
ScaleAnimation:控制尺寸变化的动画类
AlphaAnimation:控制透明度变化的动画类
RotateAnimation:控制旋转变化的动画类
TranslateAnimation:控制位置变化的动画类
AnimationSet:定义动画属性集合类
AnimationUtils:动画工具类
总的来说,Android系统Tween动画提供了四种实现方式。Tween动画的实现凡是有两种:一种是通过硬编码的凡是在程序代码中实现;另一种是在配置文件中定义。Android系统推荐使用配置文件的方法,这种方式可口占星较好。
如果全部选择Animation.ABSOLUTE,其实就是第二个构造函数。
以x轴为例介绍参照与对应值的关系
如果选择参照为Animation.ABSOLUTE,那么对应的值应该是具体的坐标值,比如100到300,指绝对的屏幕像素单位
如果选择参照为Animation.RELATIVE_TO_SELF或者 Animation.RELATIVE_TO_PARENT指的是相对于自身或父控件,
对应值应该理解为相对于自身或者父控件的几倍或百分之多少。
下面是个例子,看看硬编码是如何实现的
布局文件main.xml
Xml代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/ScaleBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Scale"
/>
<Button
android:id="@+id/AlphaBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Alpha"
/>
<Button
android:id="@+id/TranslateBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Translate"
/>
<Button
android:id="@+id/RotateBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rotate"
/>
</LinearLayout>
<ImageView
android:id="@+id/Imageview01"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ni_png_0707"
/>
</LinearLayout>
MainActivity.java
Java代码
package com.loulijun.AnimaitonTest;
import android.app.Activity;
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.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
public class MainActivity extends Activity {
private Button scaleBtn,rotateBtn,alphaBtn,translateBtn;
private ImageView img;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
img = (ImageView)findViewById(R.id.Imageview01);
scaleBtn = (Button)findViewById(R.id.ScaleBtn);
rotateBtn = (Button)findViewById(R.id.RotateBtn);
alphaBtn = (Button)findViewById(R.id.AlphaBtn);
translateBtn = (Button)findViewById(R.id.TranslateBtn);
scaleBtn.setOnClickListener(new Button.OnClickListener()
{
@Override
public void onClick(View arg0) {
//创建伸缩动画
Animation scaleAnimation = new ScaleAnimation(0f,1f,0f,1f,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
//设置动画持续时间
scaleAnimation.setDuration(2000);
//开始动画
img.startAnimation(scaleAnimation);
}
});
rotateBtn.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v) {
//创建rotate旋转动画
Animation rotateAnimation = new RotateAnimation(0f, +36f,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
//设置动画持续时间
rotateAnimation.setDuration(2000);
//开始动画
img.startAnimation(rotateAnimation);
}
});
translateBtn.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v) {
// 创建位置变化动画
Animation translateAnimation = new TranslateAnimation(10, 100, 10, 100);
//设置动画持续时间
translateAnimation.setDuration(2000);
//开始动画
img.startAnimation(translateAnimation);
}
});
alphaBtn.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v) {
//创建渐变动画
Animation alphaAnimation = new AlphaAnimation(0.1f,1.0f);
//设置动画持续时间
alphaAnimation.setDuration(2000);
//开始动画
img.startAnimation(alphaAnimation);
}
});
}
}
运行效果(四个效果自己尝试下就可以了)
当然,最好是在配置文件中来实现动画
在res/anim目录下定义不同的动画的配置文件,一般要有个set根元素,根元素里面定义不同的动画了,然后通过调用
AnimationUtils.loadAnimation()方法获取动画实例,调用视图组件的startAnimation()方法开启动画即可
主布局文件main.xml
Xml代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/ScaleBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Scale"
/>
<Button
android:id="@+id/AlphaBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Alpha"
/>
<Button
android:id="@+id/TranslateBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Translate"
/>
<Button
android:id="@+id/RotateBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rotate"
/>
</LinearLayout>
<ImageView
android:id="@+id/Imageview01"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ni_png_0707"
/>
</LinearLayout>
然后在res/anim/目录下创建四个布局文件,分别对应四个动画效果的配置
myalpha.xml
Xml代码
<?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>
myrotate.xml
Xml代码
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="-180"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"
/>
</set>
mytranslate.xml
Xml代码
<?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"
android:duration="2000"
/>
</set>
myscale.xml
Xml代码
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="0.0"
android:toXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"
/>
</set>
下面这个是主程序了,在里面主要是通过AnimationUtils.loadAnimaiton()将上面的动画配置文件加载后,开始动画即可
MainActivity.java
Java代码
package com.loulijun.animationtest2;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
public class MainActivity extends Activity {
private Button alphaBtn,rotateBtn,translateBtn,scaleBtn;
private ImageView img;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
img = (ImageView)findViewById(R.id.Imageview01);
alphaBtn = (Button)findViewById(R.id.AlphaBtn);
rotateBtn = (Button)findViewById(R.id.RotateBtn);
translateBtn = (Button)findViewById(R.id.TranslateBtn);
scaleBtn = (Button)findViewById(R.id.ScaleBtn);
alphaBtn.setOnClickListener(new Button.OnClickListener()
{
@Override
public void onClick(View v) {
//设置渐变动画
Animation alphaAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.myalpha);
//开始动画
img.startAnimation(alphaAnimation);
}
});
rotateBtn.setOnClickListener(new Button.OnClickListener()
{
@Override
public void onClick(View v) {
//设置旋转动画
Animation rotateAnimation = AnimationUtils.loadAnimation(MainActivity.this,R.anim.myrotate);
//开始动画
img.startAnimation(rotateAnimation);
}
});
translateBtn.setOnClickListener(new Button.OnClickListener()
{
@Override
public void onClick(View v) {
//设置位置变化动画
Animation translateAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.mytranslate);
//开始动画
img.startAnimation(translateAnimation);
}
});
scaleBtn.setOnClickListener(new Button.OnClickListener()
{
@Override
public void onClick(View v) {
//创建伸缩动画
Animation scaleAnimation = AnimationUtils.loadAnimation(MainActivity.this,
R.anim.myscale);
//开始动画
img.startAnimation(scaleAnimation);
}
});
}
}
效果如下:
在Android系统中提供了两种动画实现方式:一种是Tween动画,这种实现方式可以使视图组件移动、放大、缩小以及产生透明度的变化;另一种方式是Frame动画,这是逐帧动画,通过顺序播放排列好的图片来实现的,类似电影。
Tween动画:
Tween动画能完成一系列简单的变化(如位置、尺寸、透明度和旋转等)。例如,在你的程序中有一个ImageView组件,我们通过Tween动画可以使该视图实现放大、缩小、旋转、渐变等。Tween动画类位于android.view.animation包中,该包中包含了一些常用的动画实现类。
Animation:动画抽象类,其他几个实现类继承它
ScaleAnimation:控制尺寸变化的动画类
AlphaAnimation:控制透明度变化的动画类
RotateAnimation:控制旋转变化的动画类
TranslateAnimation:控制位置变化的动画类
AnimationSet:定义动画属性集合类
AnimationUtils:动画工具类
总的来说,Android系统Tween动画提供了四种实现方式。Tween动画的实现凡是有两种:一种是通过硬编码的凡是在程序代码中实现;另一种是在配置文件中定义。Android系统推荐使用配置文件的方法,这种方式可口占星较好。
常用构造方法 | 参数说明 |
AlphaAnimation(float fromAlpha, float toAlpha) | fromAlpha:动画开始透明度 toAlpha:动画结束透明度(取值范围0.0~1.0) 1.0表示完全不透明 0.0表示完全透明 |
ScaleAnimation(float fromX, float toX,float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) | fromX:起始X坐标上的伸缩尺寸 toX:结束X坐标上的伸缩尺寸 fromY:其实Y坐标上的伸缩尺寸 toY:结束Y坐标上的伸缩尺寸 pivotXType:X坐标伸缩模式(取值Animation.ABSOLUTE、Animation.RELATIVE_TO_SELF、Animation.RELATIVE_TO_PARENT) pivotXValue:相当于X坐标伸缩值 pivotYType:Y坐标伸缩模式(取值 Animation.ABSOLUTE、 Animation.RELATIVE_TO_SELF、 Animation.RELATIVE_TO_PARENT) pivotYValue:相当于Y坐标伸缩值 |
TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) | fromXDelta:其实X坐标 toXDelta:结束X坐标 fromYDelta:起始Y坐标 toYDelta:结束Y坐标 |
RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, pivotYType, float pivotYValue) | fromDegrees:旋转开始角度 toDegrees:旋转结束角度 pivotXType:X坐标伸缩模式(取值Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF,Animation.RELATIVE_TO_PARENT) pivotXValue:相当于X坐标伸缩值 pivotYType:Y坐标伸缩模式(取值Animation.ABSULUTE, Animation.RELATIVE_TO_SELF,Animation.RELATIVE_TO_PARENT) pivotYValue:相当于Y坐标伸缩值 |
以x轴为例介绍参照与对应值的关系
如果选择参照为Animation.ABSOLUTE,那么对应的值应该是具体的坐标值,比如100到300,指绝对的屏幕像素单位
如果选择参照为Animation.RELATIVE_TO_SELF或者 Animation.RELATIVE_TO_PARENT指的是相对于自身或父控件,
对应值应该理解为相对于自身或者父控件的几倍或百分之多少。
下面是个例子,看看硬编码是如何实现的
布局文件main.xml
Xml代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/ScaleBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Scale"
/>
<Button
android:id="@+id/AlphaBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Alpha"
/>
<Button
android:id="@+id/TranslateBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Translate"
/>
<Button
android:id="@+id/RotateBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rotate"
/>
</LinearLayout>
<ImageView
android:id="@+id/Imageview01"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ni_png_0707"
/>
</LinearLayout>
MainActivity.java
Java代码
package com.loulijun.AnimaitonTest;
import android.app.Activity;
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.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
public class MainActivity extends Activity {
private Button scaleBtn,rotateBtn,alphaBtn,translateBtn;
private ImageView img;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
img = (ImageView)findViewById(R.id.Imageview01);
scaleBtn = (Button)findViewById(R.id.ScaleBtn);
rotateBtn = (Button)findViewById(R.id.RotateBtn);
alphaBtn = (Button)findViewById(R.id.AlphaBtn);
translateBtn = (Button)findViewById(R.id.TranslateBtn);
scaleBtn.setOnClickListener(new Button.OnClickListener()
{
@Override
public void onClick(View arg0) {
//创建伸缩动画
Animation scaleAnimation = new ScaleAnimation(0f,1f,0f,1f,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
//设置动画持续时间
scaleAnimation.setDuration(2000);
//开始动画
img.startAnimation(scaleAnimation);
}
});
rotateBtn.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v) {
//创建rotate旋转动画
Animation rotateAnimation = new RotateAnimation(0f, +36f,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
//设置动画持续时间
rotateAnimation.setDuration(2000);
//开始动画
img.startAnimation(rotateAnimation);
}
});
translateBtn.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v) {
// 创建位置变化动画
Animation translateAnimation = new TranslateAnimation(10, 100, 10, 100);
//设置动画持续时间
translateAnimation.setDuration(2000);
//开始动画
img.startAnimation(translateAnimation);
}
});
alphaBtn.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v) {
//创建渐变动画
Animation alphaAnimation = new AlphaAnimation(0.1f,1.0f);
//设置动画持续时间
alphaAnimation.setDuration(2000);
//开始动画
img.startAnimation(alphaAnimation);
}
});
}
}
运行效果(四个效果自己尝试下就可以了)
当然,最好是在配置文件中来实现动画
在res/anim目录下定义不同的动画的配置文件,一般要有个set根元素,根元素里面定义不同的动画了,然后通过调用
AnimationUtils.loadAnimation()方法获取动画实例,调用视图组件的startAnimation()方法开启动画即可
主布局文件main.xml
Xml代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/ScaleBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Scale"
/>
<Button
android:id="@+id/AlphaBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Alpha"
/>
<Button
android:id="@+id/TranslateBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Translate"
/>
<Button
android:id="@+id/RotateBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rotate"
/>
</LinearLayout>
<ImageView
android:id="@+id/Imageview01"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ni_png_0707"
/>
</LinearLayout>
然后在res/anim/目录下创建四个布局文件,分别对应四个动画效果的配置
myalpha.xml
Xml代码
<?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>
myrotate.xml
Xml代码
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="-180"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"
/>
</set>
mytranslate.xml
Xml代码
<?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"
android:duration="2000"
/>
</set>
myscale.xml
Xml代码
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="0.0"
android:toXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"
/>
</set>
下面这个是主程序了,在里面主要是通过AnimationUtils.loadAnimaiton()将上面的动画配置文件加载后,开始动画即可
MainActivity.java
Java代码
package com.loulijun.animationtest2;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
public class MainActivity extends Activity {
private Button alphaBtn,rotateBtn,translateBtn,scaleBtn;
private ImageView img;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
img = (ImageView)findViewById(R.id.Imageview01);
alphaBtn = (Button)findViewById(R.id.AlphaBtn);
rotateBtn = (Button)findViewById(R.id.RotateBtn);
translateBtn = (Button)findViewById(R.id.TranslateBtn);
scaleBtn = (Button)findViewById(R.id.ScaleBtn);
alphaBtn.setOnClickListener(new Button.OnClickListener()
{
@Override
public void onClick(View v) {
//设置渐变动画
Animation alphaAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.myalpha);
//开始动画
img.startAnimation(alphaAnimation);
}
});
rotateBtn.setOnClickListener(new Button.OnClickListener()
{
@Override
public void onClick(View v) {
//设置旋转动画
Animation rotateAnimation = AnimationUtils.loadAnimation(MainActivity.this,R.anim.myrotate);
//开始动画
img.startAnimation(rotateAnimation);
}
});
translateBtn.setOnClickListener(new Button.OnClickListener()
{
@Override
public void onClick(View v) {
//设置位置变化动画
Animation translateAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.mytranslate);
//开始动画
img.startAnimation(translateAnimation);
}
});
scaleBtn.setOnClickListener(new Button.OnClickListener()
{
@Override
public void onClick(View v) {
//创建伸缩动画
Animation scaleAnimation = AnimationUtils.loadAnimation(MainActivity.this,
R.anim.myscale);
//开始动画
img.startAnimation(scaleAnimation);
}
});
}
}
效果如下:
相关文章推荐
- 玩转Android---2D图形及动画---Gif动画
- 玩转Android---2D图形及动画---图片处理
- 玩转Android---2D图形及动画---Tween动画
- 玩转Android---组件篇---TextSwitcher
- 玩转Android--组件篇---Handler的使用
- 玩转Android---组件篇---AnalogClock,DigitalClock
- 玩转Android---2D图形及动画---Frame动画
- 玩转Android---2D图形及动画---View类使用
- 玩转Android---组件篇---SeekBar,RatingBar,Chronometer
- 玩转Android---组件篇---Handler的使用(2)
- 让你的 EditText 全部清除
- Android的ListView中给RadioGroup添加setOnCheckChangeListener的问题之一
- android省市区三级联动案例:(三)主要功能实现
- android省市区三级联动案例:(三)布局文件
- Android内存泄漏分析及调试
- 关于 android 程序中的 context
- Chromium on Android: Android在系统Chromium为了实现主消息循环分析
- android省市区三级联动案例:(一)运行效果
- Android中Handler的简单应用(一)
- android ViewDragHelper完全解析 自定义ViewGroup神器