Android 补间动画之平移动画TranslateAnimation

Android动画系列

博客导航：

1.介绍：

Android补间动画之平移动画，在实际的开发过程中，其实有好多地方需要用到平移动画，这是对于平移动画的简单介绍。

2.属性

3.实现方式

3.1 xml方式

1. <?xml version="1.0" encoding="utf-8"?>  

2. <set xmlns:android="http://schemas.android.com/apk/res/android"  

3.     android:duration="1000">  

4.     <translate  

5.         android:fromYDelta="0%p"  

6.         android:toYDelta="80%p"/>  

7. </set>  

8.   

9. <!--  

10. duration ：时间  

11. fromYDelta ：动画开始点的Y轴坐标点，可以用三种方式表示：  

12.              1.数字50，表示当前View左上角的Y轴坐标+50px。  

13.              2.百分比50%，表示当前View的左上角Y轴坐标+此View的长度的50%。  

14.              3.百分数p 50%p，当前View左上角Y轴坐标+父控件长度的50%。  

15. toYDelta ：动画结束Y轴坐标。  

16. fromXDelta : 动画开始的X轴坐标。  

17. toXDelta ：动画结束的X轴坐标。  

18. -->  

3.2 代码方式实现

1.         TranslateAnimation translateAnimation1 = new TranslateAnimation(0,0,0,1000);  

2. //        使用java代码的方式创建TranslateAnimation，传入六个参数，fromXType、fromXValue、toXType、toXValue和fromYType、fromYValue、toYType、toYValue，使用如下构造方法。  

3. //        参数说明：  

4. //        fromXType：动画开始前的X坐标类型。取值范围为ABSOLUTE（绝对位置）、RELATIVE_TO_SELF（以自身宽或高为参考）、RELATIVE_TO_PARENT（以父控件宽或高为参考）。  

5. //        fromXValue：动画开始前的X坐标值。当对应的Type为ABSOLUTE时，表示绝对位置；否则表示相对位置，1.0表示100%。  

6. //        toXType：动画结束后的X坐标类型。  

7. //        toXValue：动画结束后的X坐标值。  

8. //        fromYType：动画开始前的Y坐标类型。  

9. //        fromYValue：动画开始前的Y坐标值。  

10. //        toYType：动画结束后的Y坐标类型。  

11. //        toYValue：动画结束后的Y坐标值。  

12.         translateAnimation1.setDuration(1000);  

13.         translateAnimation1.setInterpolator(new DecelerateInterpolator());  

14.         translate_img.startAnimation(translateAnimation1)  

4.动画的监听事件

1. translateAnimation1.setAnimationListener(new Animation.AnimationListener() {  

2.             @Override  

3.             public void onAnimationStart(Animation animation) {  

4.                 //动画开始  

5.             }  

6.   

7.             @Override  

8.             public void onAnimationEnd(Animation animation) {  

9.                 //动画结束  

10.                 translate_img.clearAnimation();  

11.             }  

12.   

13.             @Override  

14.             public void onAnimationRepeat(Animation animation) {  

15.                 //动画重复  

16.             }  

17.         });  

5.方法解释

6.案例实现

6.1 Activity的布局文件

1. <?xml version="1.0" encoding="utf-8"?>  

2. <RelativeLayout  

3.     xmlns:android="http://schemas.android.com/apk/res/android"  

4.     xmlns:tools="http://schemas.android.com/tools"  

5.     android:layout_width="match_parent"  

6.     android:layout_height="match_parent"  

7.     android:orientation="vertical"  

8.     android:background="#fff"  

9.     tools:context="com.menglong.animatordemo.translate.TranslateActivity">  

10.   

11.     <include layout="@layout/titlr_layout"></include>  

12.   

13.     <Button  

14.         android:background="#99ff0ff0"  

15.         android:layout_marginTop="100px"  

16.         android:id="@+id/translate_but"  

17.         android:text="平移"  

18.         android:layout_width="wrap_content"  

19.         android:layout_height="wrap_content" />  

20.   

21.     <ImageView  

22.         android:id="@+id/translate_img"  

23.         android:layout_marginTop="100px"  

24.         android:layout_centerHorizontal="true"  

25.         android:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@drawable/translate"  

26.         android:layout_width="150px"  

27.         android:layout_height="150px" />  

28.   

29. </RelativeLayout>  

6.2 Activity代码实现

1. package com.menglong.animatordemo.translate;  

2.   

3. import android.os.Bundle;  

4. import android.view.View;  

5. import android.view.animation.Animation;  

6. import android.view.animation.AnimationUtils;  

7. import android.view.animation.DecelerateInterpolator;  

8. import android.view.animation.Interpolator;  

9. import android.view.animation.TranslateAnimation;  

10. import android.widget.Button;  

11. import android.widget.ImageView;  

12.   

13. import com.menglong.animatordemo.R;  

14. import com.menglong.animatordemo.base.BaseActivity;  

15.   

16. public class TranslateActivity extends BaseActivity implements View.OnClickListener {  

17.   

18.     private ImageView translate_img;  

19.     private Animation translateAnimation;  

20.     private Button translate_but;  

21.   

22.     @Override  

23.     protected void onCreate(Bundle savedInstanceState) {  

24.         super.onCreate(savedInstanceState);  

25.         setContentView(R.layout.activity_translate);  

26.         initView();  

27.     }  

28.   

29.     private void initView() {  

30.         super.initTitle("平移动画");  

31.         translate_img = (ImageView) findViewById(R.id.translate_img);  

32.         translateAnimation = AnimationUtils.loadAnimation(this, R.anim.translate_anim);  

33. //        Interpolator interpolator = new LinearInterpolator();//匀速  

34. //        Interpolator interpolator = new AccelerateInterpolator();//先慢后快  

35. //        Interpolator interpolator = new AnticipateInterpolator();//开始回弹效果  

36. //        Interpolator interpolator = new BounceInterpolator();//结束回弹效果  

37. //        Interpolator interpolator = new CycleInterpolator(2);//跳一跳效果  

38. //        Interpolator interpolator = new OvershootInterpolator(1);//动画结束时向前弹一定距离再回到原来位置  

39. //        Interpolator interpolator = new AccelerateDecelerateInterpolator();//系统默认的动画效果，先加速后减速  

40. //        Interpolator interpolator = new AnticipateOvershootInterpolator();//开始之前向前甩，结束的时候向后甩  

41.         Interpolator interpolator = new DecelerateInterpolator();//开始加速再减速  

42.         translateAnimation.setInterpolator(interpolator);  

43.         translate_but = (Button) findViewById(R.id.translate_but);  

44.         translate_but.setOnClickListener(this);  

45.     }  

46.   

47.     @Override  

48.     public void onClick(View view) {  

49.         switch (view.getId()) {  

50.             case R.id.translate_but:  

51. //                translate_img.startAnimation(translateAnimation);  

52.                 code();  

53.                 break;  

54.             default:  

55.                 break;  

56.         }  

57.     }  

58.   

59.     //代码实现方式  

60.     private void code(){  

61.         TranslateAnimation translateAnimation1 = new TranslateAnimation(0,0,0,1000);  

62. //        使用java代码的方式创建TranslateAnimation，传入六个参数，fromXType、fromXValue、toXType、toXValue和fromYType、fromYValue、toYType、toYValue，使用如下构造方法。  

63. //        参数说明：  

64. //        fromXType：动画开始前的X坐标类型。取值范围为ABSOLUTE（绝对位置）、RELATIVE_TO_SELF（以自身宽或高为参考）、RELATIVE_TO_PARENT（以父控件宽或高为参考）。  

65. //        fromXValue：动画开始前的X坐标值。当对应的Type为ABSOLUTE时，表示绝对位置；否则表示相对位置，1.0表示100%。  

66. //        toXType：动画结束后的X坐标类型。  

67. //        toXValue：动画结束后的X坐标值。  

68. //        fromYType：动画开始前的Y坐标类型。  

69. //        fromYValue：动画开始前的Y坐标值。  

70. //        toYType：动画结束后的Y坐标类型。  

71. //        toYValue：动画结束后的Y坐标值。  

72.         translateAnimation1.setDuration(1000);  

73.         translateAnimation1.setInterpolator(new DecelerateInterpolator());  

74.         translate_img.startAnimation(translateAnimation1);  

75.         translateAnimation1.setAnimationListener(new Animation.AnimationListener() {  

76.             @Override  

77.             public void onAnimationStart(Animation animation) {  

78.                 //动画开始  

79.             }  

80.   

81.             @Override  

82.             public void onAnimationEnd(Animation animation) {  

83.                 //动画结束  

84.                 translate_img.clearAnimation();  

85.             }  

86.   

87.             @Override  

88.             public void onAnimationRepeat(Animation animation) {  

89.                 //动画重复  

90.             }  

91.         });  

92.     }  

93. }  

6.3 translat_anim.xml

1. <?xml version="1.0" encoding="utf-8"?>  

2. <set xmlns:android="http://schemas.android.com/apk/res/android"  

3.     android:duration="1000">  

4.     <translate  

5.         android:fromYDelta="0%p"  

6.         android:toYDelta="80%p"/>  

7. </set>  

7.案例效果展示

8.项目地址

https://github.com/SunMengLong/AnimatorDemo
原文出处