Android动画之Tween动画实现
2014-11-22 20:44
288 查看
Android 平台提供了两类动画。 一类是Tween动画,就是对场景里的对象不断的进行图像变化来产生动画效果(旋转、平移、放缩和渐变)。第二类就是 Frame动画,即顺序的播放事先做好的图像,与gif图片原理类似。下面就讲一下Tweene Animations。 主要类: Animation 动画AlphaAnimation 渐变透明度RotateAnimation 画面旋转ScaleAnimation 渐变尺寸缩放TranslateAnimation 位置移动AnimationSet 动画集一、等待动画实现在我们应用程序当中,经常会使用到等待动画,那么首先我们就来实现这个1.1首先,当然是布局啦activity_main.xml
二、开门动画实现2.1首先,当然是布局啦second.xml
三、透明旋转缩放移动动画实现及其混合实现3.1首先,当然是布局啦third.xml
四、重写View实现动画效果4.1首先,重写ViewTweenAnim.java![](https://img-blog.csdn.net/20141122222301864?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmluZ2RpYW5sYW54aW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](https://img-blog.csdn.net/20141122222314531?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmluZ2RpYW5sYW54aW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
五、利用XML实现动画效果5.1布局文件透明度alpha_anim.xml<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"><alphaandroid:fromAlpha="0.1"android:toAlpha="1.0"android:duration="2000"/></set>alpha动画参数
旋转rotate_anim.xmlrotate动画参数
缩放scale_anim.xmlscale动画参数
移动translate_anim.xmltranslate动画参数
Tween Animation共同的节点属性
5.2其次,就是重写View啦TweenAnim2.java
做了一天的成果,希望对大家有所帮助,谢谢!源码下载
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#fff" > <RelativeLayout android:layout_width="180dp" android:layout_height="180dp" android:layout_centerInParent="true" android:background="@drawable/loading_bg" > <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:orientation="vertical" > <ProgressBar android:id="@+id/progressBar1" style="?android:attr/progressBarStyleLarge" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="正在登录" android:layout_marginTop="10dp" android:textColor="#fff" android:textSize="20sp" /> </LinearLayout> </RelativeLayout> </RelativeLayout>1.2其次,就是实现啦MainActivity.java
public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //延迟一段时间后跳转到另一个界面 new Handler().postDelayed(new Runnable(){ @Override public void run(){ Intent intent = new Intent(MainActivity.this,SecondActivity.class); startActivity(intent); MainActivity.this.finish(); Toast.makeText(getApplicationContext(), "跳转成功", Toast.LENGTH_SHORT).show(); } }, 2000); } }1.3实现效果如图
<?xml version="1.0" encoding="UTF-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#000" > <ImageView android:id="@+id/imageLeft" android:scaleType="fitXY" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentLeft="true" android:src="@drawable/w_left" /> <ImageView android:id="@+id/imageRight" android:visibility="visible" android:scaleType="fitXY" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:src="@drawable/w_right" /> <TextView android:id="@+id/anim_text" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:layout_alignParentTop="true" android:layout_marginTop="35dp" android:text=" \n \nthis is a test!\n \n " android:textSize="22sp" android:textColor="#fff" /> </RelativeLayout>2.2其次,就是实现啦SecondActivity.java
public class SecondActivity extends Activity { private ImageView mLeft; private ImageView mRight; private TextView mText; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.second); mLeft = (ImageView)findViewById(R.id.imageLeft); mRight = (ImageView)findViewById(R.id.imageRight); mText = (TextView)findViewById(R.id.anim_text); //往左移动 AnimationSet anim = new AnimationSet(true); TranslateAnimation mytranslateanim = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,-1f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f); mytranslateanim.setDuration(2000); anim.setStartOffset(800); anim.addAnimation(mytranslateanim); anim.setFillAfter(true); mLeft.startAnimation(anim); //往右移动 AnimationSet anim1 = new AnimationSet(true); TranslateAnimation mytranslateanim1 = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,+1f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f); mytranslateanim1.setDuration(1500); anim1.addAnimation(mytranslateanim1); anim1.setStartOffset(800); anim1.setFillAfter(true); mRight.startAnimation(anim1); //文字变换 AnimationSet anim2 = new AnimationSet(true); ScaleAnimation myscaleanim = new ScaleAnimation(1f,3f,1f,3f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f); myscaleanim.setDuration(1000); AlphaAnimation myalphaanim = new AlphaAnimation(1,0.0001f); myalphaanim.setDuration(1500); anim2.addAnimation(myscaleanim); anim2.addAnimation(myalphaanim); anim2.setFillAfter(true); mText.startAnimation(anim2); //持续一段时间后跳转 new Handler().postDelayed(new Runnable(){ @Override public void run(){ Intent intent = new Intent(SecondActivity.this,ThirdActivity.class); startActivity(intent); SecondActivity.this.finish(); } }, 2000); } }2.3实现效果如图
<?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" android:background="#000" > <TextView android:id="@+id/tv1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="透明动画测试AlphaAnimation" android:textColor="#f00" android:textSize="20sp"/> <View android:layout_width="fill_parent" android:layout_height="10dip" android:background="?android:attr/listDivider"/> <TextView android:id="@+id/tv2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="旋转动画测试RotateAnimation" android:textColor="#0f0" android:textSize="20sp"/> <View android:layout_width="fill_parent" android:layout_height="10dip" android:background="?android:attr/listDivider"/> <TextView android:id="@+id/tv3" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="缩放动画测试ScaleAnimation" android:textColor="#00f" android:textSize="20sp"/> <View android:layout_width="fill_parent" android:layout_height="10dip" android:background="?android:attr/listDivider"/> <TextView android:id="@+id/tv4" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="移动动画测试TranslateAnimation" android:textColor="#ff0" android:textSize="20sp"/> <View android:layout_width="fill_parent" android:layout_height="10dip" android:background="?android:attr/listDivider"/> <TextView android:id="@+id/tv5" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="多个动画同时生效测试AnimationSet" android:textColor="#f0f" android:textSize="20sp"/> </LinearLayout>3.2其次,就是实现啦ThirdActivity.java
public class ThirdActivity extends Activity { private TextView mTextView1 = null; private TextView mTextView2 = null; private TextView mTextView3 = null; private TextView mTextView4 = null; private TextView mTextView5 = null; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.third); //透明动画测试 AlphaAnimation mTextView1 = (TextView)findViewById(R.id.tv1); //初始化 其中AlphaAnimation类第一个参数fromAlpha表示动画起始时的透明度,第二个参数toAlpha表示动画结束时的透明度 Animation alphaAnimation = new AlphaAnimation(0.1f, 1.0f); //设置动画时间 setDuration用来设置动画持续时间 alphaAnimation.setDuration(5000); mTextView1.startAnimation(alphaAnimation); /*其中AlphaAnimation类第一个参数fromAlpha表示动画起始时的透明度, 第二个参数toAlpha表示动画结束时的透明度。 setDuration用来设置动画持续时间。*/ //旋转动画测试 RotateAnimation mTextView2 = (TextView)findViewById(R.id.tv2); Animation rotateAnimation = new RotateAnimation(0f, 360f); rotateAnimation.setDuration(5000); mTextView2.startAnimation(rotateAnimation); /*其中RotateAnimation类第一个参数fromDegrees表示动画起始时的角度, 第二个参数toDegrees表示动画结束时的角度。 另外还可以设置伸缩模式pivotXType、pivotYType, 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。*/ //缩放动画测试 ScaleAnimation mTextView3 = (TextView)findViewById(R.id.tv3); //初始化 Animation scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f); //设置动画时间 scaleAnimation.setDuration(5000); mTextView3.startAnimation(scaleAnimation); /*第一个参数fromX ,第二个参数toX:分别是动画起始、结束时X坐标上的伸缩尺寸。 第三个参数fromY ,第四个参数toY:分别是动画起始、结束时Y坐标上的伸缩尺寸。 另外还可以设置伸缩模式pivotXType、pivotYType, 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。*/ //移动动画测试 TranslateAnimation mTextView4 = (TextView)findViewById(R.id.tv4); //初始化 Animation translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f); //设置动画时间 translateAnimation.setDuration(5000); mTextView4.startAnimation(translateAnimation); /*第一个参数fromXDelta ,第二个参数toXDelta:分别是动画起始、结束时X坐标。 第三个参数fromYDelta ,第四个参数toYDelta:分别是动画起始、结束时Y坐标。*/ //多个动画同时生效 AnimationSet mTextView5 = (TextView)findViewById(R.id.tv5); //初始化 Alpha动画 Animation alphaAnimation5 = new AlphaAnimation(0.1f, 1.0f); //初始化 Rotate动画 Animation rotateAnimation5 = new RotateAnimation(0f, 360f); //初始化 Scale动画 Animation scaleAnimation5 = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f); //初始化 Translate动画 Animation translateAnimation5 = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f); //动画集 AnimationSet set = new AnimationSet(true); set.addAnimation(alphaAnimation5); set.addAnimation(rotateAnimation5); set.addAnimation(scaleAnimation5); set.addAnimation(translateAnimation5); //设置动画时间 (作用到每个动画) set.setDuration(5000); mTextView5.startAnimation(set); new Handler().postDelayed(new Runnable(){ @Override public void run(){ Intent intent = new Intent(ThirdActivity.this,FourActivity.class); startActivity(intent); ThirdActivity.this.finish(); } }, 6000); } }3.3实现效果如图
public class TweenAnim extends View { //Alpha动画 - 渐变透明度 private Animation alphaAnimation = null; //Sacle动画 - 渐变尺寸缩放 private Animation scaleAnimation = null; //Translate动画 - 位置移动 private Animation translateAnimation = null; //Rotate动画 - 画面旋转 private Animation rotateAnimation = null; public TweenAnim(Context context) { super(context); //初始化 Alpha动画 alphaAnimation = new AlphaAnimation(0.1f, 1.0f); //初始化 Rotate动画 rotateAnimation = new RotateAnimation(0f, 360f); //初始化 Scale动画 scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f); //初始化 Translate动画 translateAnimation = new TranslateAnimation(0.1f, 300.0f,0.1f,300.0f); //动画集 AnimationSet set = new AnimationSet(true); set.addAnimation(alphaAnimation); set.addAnimation(rotateAnimation); set.addAnimation(scaleAnimation); set.addAnimation(translateAnimation); //设置动画时间 (作用到每个动画) set.setDuration(5000); this.startAnimation(set); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); Log.e("Tween", "onDraw"); //加载一个图片 canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.background1)).getBitmap(), 0, 0, null); } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { Log.e("Tween", "onKeyDown"); return true; } @Override public boolean onKeyUp(int keyCode, KeyEvent event) { Log.e("Tween", "onKeyDown"); switch (keyCode) { case KeyEvent.KEYCODE_DPAD_UP: Log.e("Tween", "onKeyDown - KEYCODE_DPAD_UP"); break; case KeyEvent.KEYCODE_DPAD_DOWN: Log.e("Tween", "onKeyDown - KEYCODE_DPAD_DOWN"); break; case KeyEvent.KEYCODE_DPAD_LEFT: Log.e("Tween", "onKeyDown - KEYCODE_DPAD_LEFT"); break; case KeyEvent.KEYCODE_DPAD_RIGHT: Log.e("Tween", "onKeyDown - KEYCODE_DPAD_RIGHT"); break; case KeyEvent.KEYCODE_DPAD_CENTER: break; default: break; } return true; } }在Activity中调用该类时,需要注意一定setFocusable(true), 否则焦点在Activity上的话,onKeyUp方法是不会生效的。4.2其次,就是实现啦FourActivity.java
public class FourActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); TweenAnim anim = new TweenAnim(FourActivity.this); anim.setFocusable(true); setContentView(anim); new Handler().postDelayed(new Runnable(){ @Override public void run(){ Intent intent = new Intent(FourActivity.this,FiveActivity.class); startActivity(intent); FourActivity.this.finish(); } }, 6000); } }4.3实现效果如图
XML节点 | 功能说明 |
alpha | 透明度动画 |
fromAlpha | 动画起始时透明度0.0表示完全透明1.0表示完全不透明以上值取0.0-1.0之间的float数据类型的数字 |
toAlpha | 动画结束时透明度 |
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"><rotateandroid:interpolator="@android:anim/accelerate_decelerate_interpolator"android:fromDegrees="0"android:toDegrees="360"android:pivotX="50%"android:pivotY="50%"android:duration="2000"/></set>
XML节点 | 功能说明 |
rotate | 旋转动画 |
fromDegrees | 动画起始时物件的角度当角度为负数——表示逆时针旋转当角度为正数——表示顺时针旋转(负数from——to正数:顺时针旋转)(负数from——to负数:逆时针旋转)(正数from——to正数:顺时针旋转)(正数from——to负数:逆时针旋转) |
toDegrees | 属性为动画结束时物件旋转的角度 可以大于360度 |
pivotXpivotY | 为动画相对于物件的X、Y坐标的开始位以上两个属性值 从0%-100%中取值50%为物件的X或Y方向坐标上的中点位置 |
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"><scaleandroid:interpolator="@android:anim/accelerate_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="2000"/></set>
XML节点 | 功能说明 |
scale | 缩放动画 |
fromXScale[float]fromYScale[float] | 动画起始时,X、Y坐标上的伸缩尺寸0.0表示收缩到没有1.0表示正常无伸缩值小于1.0表示收缩值大于1.0表示放大 |
toXScale [float]toYScale[float] | 动画结束时,X、Y坐标上的伸缩尺寸 |
pivotX[float]pivotY[float] | 动画相对于物件的X、Y坐标的开始位置从0%-100%中取值,50%为物件的X或Y方向坐标上的中点位置 |
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"><translateandroid:fromXDelta="10"android:toXDelta="300"android:fromYDelta="10"android:toYDelta="300"/></set>
XML节点 | 功能说明 |
translate | 移动动画 |
fromXDeltatoXDelta | 动画、结束起始时 X坐标上的位置 |
fromYDeltatoYDelta | 动画、结束起始时 Y坐标上的位置 |
属性[类型] | 功能 | 备注 |
Duration[long] | 属性为动画持续时间 | 时间以毫秒为单位 |
fillAfter [boolean] | 当设置为true ,该动画转化在动画结束后被应用 | |
fillBefore[boolean] | 当设置为true ,该动画转化在动画开始前被应用 | |
interpolator | 指定一个动画的插入器 | 有一些常见的插入器accelerate_decelerate_interpolator加速-减速 动画插入器accelerate_interpolator加速-动画插入器decelerate_interpolator减速- 动画插入器其他的属于特定的动画效果 |
repeatCount[int] | 动画的重复次数 | |
RepeatMode[int] | 定义重复的行为 | 1:重新开始 2:plays backward |
startOffset[long] | 动画之间的时间间隔,从上次动画停多少时间开始执行下个动画 | |
zAdjustment[int] | 定义动画的Z Order的改变 | 0:保持Z Order不变1:保持在最上层-1:保持在最下层 |
public class TweenAnim2 extends View {//Alpha动画 - 渐变透明度private Animation alphaAnimation = null;//Sacle动画 - 渐变尺寸缩放private Animation scaleAnimation = null;//Translate动画 - 位置移动private Animation translateAnimation = null;//Rotate动画 - 画面旋转private Animation rotateAnimation = null;public TweenAnim2(Context context) {super(context);//初始化 Alpha动画alphaAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.alpha_anim);//初始化 Rotate动画rotateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.rotate_anim);//初始化 Scale动画scaleAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.scale_anim);//初始化 Translate动画translateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.translate_anim);//动画集AnimationSet set = new AnimationSet(true);set.addAnimation(alphaAnimation);set.addAnimation(rotateAnimation);set.addAnimation(scaleAnimation);set.addAnimation(translateAnimation);//设置动画时间 (作用到每个动画)set.setDuration(5000);this.startAnimation(set);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);Log.e("Tween", "onDraw");//加载一个图片canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.background2)).getBitmap(), 0, 0, null);}@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {Log.e("Tween", "onKeyDown");return true;}@Overridepublic boolean onKeyUp(int keyCode, KeyEvent event) {Log.e("Tween", "onKeyDown");switch (keyCode) {case KeyEvent.KEYCODE_DPAD_UP:Log.e("Tween", "onKeyDown - KEYCODE_DPAD_UP");break;case KeyEvent.KEYCODE_DPAD_DOWN:Log.e("Tween", "onKeyDown - KEYCODE_DPAD_DOWN");this.startAnimation(rotateAnimation);break;case KeyEvent.KEYCODE_DPAD_LEFT:Log.e("Tween", "onKeyDown - KEYCODE_DPAD_LEFT");break;case KeyEvent.KEYCODE_DPAD_RIGHT:Log.e("Tween", "onKeyDown - KEYCODE_DPAD_RIGHT");break;case KeyEvent.KEYCODE_DPAD_CENTER:Log.e("Tween", "onKeyDown - KEYCODE_DPAD_CENTER");break;default:break;}return true;}}5.3然后,就是实现啦FiveActivity.java
public class FiveActivity extends Activity{@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);TweenAnim2 anim = new TweenAnim2(FiveActivity.this);anim.setFocusable(true);setContentView(anim);}}5.4实现效果如图
相关文章推荐
- Android Tween动画之RotateAnimation实现图片不停旋转
- Android Tween动画之RotateAnimation实现图片不停旋转效果实例介绍
- Android Tween动画之RotateAnimation实现图片不停旋转
- Android开发之Tween动画实现方法
- Android Tween动画之RotateAnimation实现图片不停旋转
- Android开发教程Tween动画实现代码
- Android Tween动画之RotateAnimation实现图片不停旋转
- Android Tween动画之RotateAnimation实现图片不停旋转
- Android游戏开发之Tween动画的实现(三十二)
- Android Tween动画之RotateAnimation实现图片360°不停旋转
- Android Tween动画之RotateAnimation实现图片不停旋转
- Android开发(26)--补间动画(Tween)的实现
- android动画-tween动画实现原理
- Android动画Animation之Tween用代码实现动画效果
- Android Tween动画之RotateAnimation实现图片不停旋转
- Android Tween动画之RotateAnimation实现图片不停旋转
- Android动画Animation之Tween用代码实现动画
- Android Tween动画之RotateAnimation实现图片不停旋转
- Android Tween动画之RotateAnimation实现图片不停旋转
- Android xml形式实现Tween动画