前言：动画的介绍
图片动画详解，移步这篇文章进行查看学习
下面讲解视图动画相关的API如下(View Animation)
Animation公用的功能
视图启动动画后，默认是恢复到开始的状态。
下面通过编码和xml两种方式实现视图动画，代码中已给出注释
1、布局文件如下
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".activity.AnimationActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="startCodeScale" android:text="Code Scale" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="startXmlScale" android:text="Xml Scale" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="startCodeRotate" android:text="Code Rotate" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="startXmlRotate" android:text="Xml Rotate" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="startCodeAlpha" android:text="Code Alpha" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="startXmlAlpha" android:text="Xml Alpha" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="startCodeTranslate" android:text="Code Translation" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="startXmlTranslate" android:text="Xml Translation" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="startCodeAnimationSet" android:text="Code AnimationSet" android:textSize="15sp" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="startXmlAnimationSet" android:text="Xml AnimationSet" android:textSize="15sp" /> </LinearLayout> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:onClick="testAnimationListener" android:text="Test Animation Listener" /> <ImageView android:id="@+id/iv_animation" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/logo1" /> <TextView android:id="@+id/tv_animation_msg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="显示动画描述信息" android:textSize="18dp" /> </LinearLayout>
2、AnimationActivity 类
public class AnimationActivity extends AppCompatActivity { private TextView tv_animation_msg; private ImageView iv_animation; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_animation); tv_animation_msg = findViewById(R.id.tv_animation_msg); iv_animation = findViewById(R.id.iv_animation); } /** * 1.1编码实现缩放动画 * ScaleAnimation * <p> * 1.创建动画对象 * 2.设置 * 3.启动动画 */ public void startCodeScale(View view) { tv_animation_msg.setText("Code缩放动画: 宽度从0.5到1.5, 高度从0.0到1.0, 缩放的圆心为顶部中心点,延迟1s开始,持续2s,最终还原"); //1.创建动画对象 ScaleAnimation scaleAnimation = new ScaleAnimation(0.5f, 1.5f, 0.0f, 1.0f, Animation.ABSOLUTE, iv_animation.getWidth() / 2, Animation.ABSOLUTE, 0); scaleAnimation = new ScaleAnimation(0.5f, 1.5f, 1.0f, 2.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0); //2.设置 //延迟1s开始 scaleAnimation.setStartOffset(1000); //持续2s scaleAnimation.setDuration(2000); //最终还原 scaleAnimation.setFillBefore(true); //3.启动动画 iv_animation.startAnimation(scaleAnimation); } /** * 1.2 xml实现:缩放动画 * 1.定义动画文件 * 2.加载动画文件得到动画对象 * 3.启动动画 * <scale> */ public void startXmlScale(View view) { tv_animation_msg.setText("Xml缩放动画: Xml缩放动画: 宽度从0.0到1.5, 高度从0.0到1.0, 延迟1s开始,持续3s,圆心为右下角, 最终固定"); //1.定义动画文件 // 2.加载动画文件得到动画对象 Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale_test); // 3.启动动画 iv_animation.startAnimation(animation); } /** * 1.1编码实现旋转动画 * ScaleAnimation * 1.创建动画对象 * 2.设置 * 3.启动动画 */ public void startCodeRotate(View view) { tv_animation_msg.setText("Code旋转动画: 以图片中心点为中心, 从负90度到正90度, 持续5s"); //1.创建动画对象 RotateAnimation rotateAnimation = new RotateAnimation(-90, 90, Animation.RELATIVE_TO_SELF, 0.5F, Animation.RELATIVE_TO_SELF, 0.5f); //2.设置 rotateAnimation.setDuration(5000); iv_animation.startAnimation(rotateAnimation); } /** * 1.2 xml实现:旋转动画 * 1.定义动画文件 * 2.加载动画文件得到动画对象 * 3.启动动画 * <rotate> */ public void startXmlRotate(View view) { tv_animation_msg.setText("Xml旋转动画: 以左顶点为坐标, 从正90度到负90度, 持续5s"); //1.定义动画文件 //* 2.加载动画文件得到动画对象 Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate_test); //* 3.启动动画 iv_animation.startAnimation(animation); } /* * 3.1 编码实现: 透明度动画 * 完全透明 : 0 * 完全不透明 : 1 * AlphaAnimation */ public void startCodeAlpha(View view) { tv_animation_msg.setText("Code透明度动画: 从完全透明到完全不透明, 持续2s"); //1.创建动画对象 AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f); //2.设置 alphaAnimation.setDuration(4000); //3.启动动画 iv_animation.startAnimation(alphaAnimation); } /** * 1.2 xml实现:透明度动画 * 1.定义动画文件 * 2.加载动画文件得到动画对象 * 3.启动动画 * <alpha> */ public void startXmlAlpha(View view) { tv_animation_msg.setText("Xml透明度动画: 从完全不透明到完全透明, 持续4s"); //1.定义动画文件 //* 2.加载动画文件得到动画对象 Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha_test); animation.setFillAfter(true); //* 3.启动动画 iv_animation.startAnimation(animation); } /** * 4.1 编码实现: 平移动画 * TranslateAnimation */ public void startCodeTranslate(View view) { tv_animation_msg.setText("Code移动动画: 向右移动一个自己的宽度, 向下移动一个自己的高度, 持续2s"); //1.创建动画对象 TranslateAnimation translateAnimation = new TranslateAnimation(Animation.ABSOLUTE, 0, Animation.RELATIVE_TO_SELF, 1.0f, Animation.ABSOLUTE, 0, Animation.RELATIVE_TO_SELF, 1.0F); //设置 translateAnimation.setDuration(2000); //启动动画 iv_animation.startAnimation(translateAnimation); } /* * 4.2 xml实现: 平移动画 * <translate> */ public void startXmlTranslate(View view) { tv_animation_msg.setText("xml移动动画: 从屏幕的右边逐渐回到原来的位置, 持续2s"); //***此效果用于界面切换的动画效果 //1.定义动画文件 //* 2.加载动画文件得到动画对象 Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate_test); //* 3.启动动画 iv_animation.startAnimation(animation); } /* * 5.1 编码实现: 复合动画 * AnimationSet */ public void startCodeAnimationSet(View view) { tv_animation_msg.setText("Code复合动画: 透明度从透明到不透明, 持续2s, 接着进行旋转360度的动画, 持续1s"); //1.创建透明度动画并设置 AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1); alphaAnimation.setDuration(2000); //2.创建旋转动画并设置 RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); rotateAnimation.setDuration(1000); rotateAnimation.setStartOffset(2000);//延迟2s后，执行旋转动画 //3.创建复合动画对象 //设置为true 表示给AnimationSet设置变化率，会应用到这个复合动画中的所有子动画上面 AnimationSet animationSet = new AnimationSet(true); //4.添加两个动画 animationSet.addAnimation(alphaAnimation); animationSet.addAnimation(rotateAnimation); //5.启动复合动画对象 iv_animation.startAnimation(animationSet); } /* * 4.2 xml实现: 平移动画 * <set> */ public void startXmlAnimationSet(View view) { tv_animation_msg.setText("Xml复合动画: 透明度从透明到不透明, 持续2s, 接着进行旋转360度的动画, 持续2s"); //1. 定义动画文件 //2. 加载动画文件得到动画对象 Animation animation = AnimationUtils.loadAnimation(this, R.anim.set_test); //3. 启动动画 iv_animation.startAnimation(animation); } /* * 6. 测试动画监听 */ public void testAnimationListener(View view) { tv_animation_msg.setText("测试动画监听"); //1.定义动画文件 //* 2.加载动画文件得到动画对象 Animation animation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); animation.setDuration(1000); //设置变化率 animation.setInterpolator(new LinearInterpolator()); //设置动画重复次数 animation.setRepeatCount(Animation.INFINITE); //设置动画监听 animation.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) { Log.i("TAG", "动画开始"); } @Override public void onAnimationEnd(Animation animation) { Log.i("TAG", "动画结束"); } @Override public void onAnimationRepeat(Animation animation) { Log.i("TAG", "动画重复"); } }); //* 3.启动动画 iv_animation.startAnimation(animation); } }
3、对应的xml文件如下
1、透明度动画alpha_test.xml
<?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="4000" android:fromAlpha="1" android:toAlpha="0"> </alpha><!--Xml透明度动画: 从完全不透明到完全透明, 持续4s-->
2、旋转动画rotate_test.xml
<?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="5000" android:fromDegrees="90" android:toDegrees="-90"> </rotate><!--Xml旋转动画: 以左顶点为坐标, 从正90度到负90度, 持续5s-->
3、缩放动画scale_test.xml
<?xml version="1.0" encoding="utf-8"?> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:duration="3000" android:fillAfter="true" android:fromXScale="0.0" android:fromYScale="0.0" android:pivotX="100%" android:pivotY="100%" android:startOffset="1000" android:toXScale="1.5" android:toYScale="1.0"> </scale><!--Xml缩放动画: Xml缩放动画: 宽度从0.0到1.5, 高度从0.0到1.0, 延迟1s开始,持续3s,圆心为右下角, 最终固定-->
4、平移动画translate_test.xml
<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="2000" android:fromXDelta="100%p" android:fromYDelta="0" android:toXDelta="0" android:toYDelta="0"> </translate><!--从屏幕的右边逐渐回到原来的位置, 持续2s-->
5、复合动画set_test.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:duration="2000" android:fromAlpha="0" android:toAlpha="1" /> <rotate android:duration="2000" android:fromDegrees="0" android:startOffset="2000" android:toDegrees="360" /> </set><!--Xml复合动画: 透明度从透明到不透明, 持续2s, 接着进行旋转360度的动画, 持续2s-->
具体效果如图所示：
