TweenAnimation补间动画
一.在Java代码中编译动画
①java程序
public class MainActivity extends Activity { private ImageView iv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); iv = (ImageView) findViewById(R.id.iv); // 补间动画是不会改变动画的本质属性的.比如平移动画,View不会改变自己的位置. iv.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, "大圣在此!", Toast.LENGTH_SHORT) .show(); } }); } // 透明度动画 public void alpha(View v) { // fromAlpha:起始透明度;toAlpha:终止透明度 AlphaAnimation aa = new AlphaAnimation(0.1f, 0.5f); // 设置动画的持续时间 aa.setDuration(3000); // 设置动画的重复次数 aa.setRepeatCount(2); // 设置动画的重复模式 // RESTART:重新开始 // REVERSE:折返 aa.setRepeatMode(Animation.REVERSE); // 保持动画结束时候的状态 aa.setFillAfter(true); // 开始动画 iv.startAnimation(aa); } // 平移动画 public void translate(View v) { // 以控件自身所在的位置为标准. // fromXDelta:x轴上的起始点,以像素为单位; // toXDelta:x轴上终点; // fromYDelta:y轴上的起始点; // toYDelta:y轴上的终点. // TranslateAnimation ta = new TranslateAnimation(0, 100.0f, 0f, // 100.0f); // fromXType:起点时候在x轴上变化时参照的类型. // Animation.ABSOLUTE:极少用;Animation.RELATIVE_TO_SELF:相对自身进行变化; // Animation.RELATIVE_TO_PARENT:相对父窗体进行变化 // fromXValue:x轴上的起始点. // toXType:终点时候在x轴上变化时参照的类型. // toXValue:x轴上终点. // Animation.RELATIVE_TO_SELF, 0:控件本身所在的坐标+0*控件本身的宽度; // Animation.RELATIVE_TO_SELF,2.0f:控件本身所在的坐标+2*控件本身的宽度. // Animation.RELATIVE_TO_PARENT, 0.2f:控件本身所在的坐标+0.2*父窗体的宽度. TranslateAnimation ta = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 2.0f, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, -2.0f); ta.setDuration(2000); ta.setRepeatCount(2); ta.setFillAfter(true); ta.setRepeatMode(Animation.RESTART); iv.startAnimation(ta); } // 缩放动画 public void scale(View v) { // fromX:x轴上开始缩放的起点; // toX:x轴上结束缩放的起点; // fromY:y轴.... // toY:y轴... // 控件缩放的起始点:控件本身的左上角. // ScaleAnimation sa = new ScaleAnimation(1, 2.0f, 1, 4.0f); // pivotX:x轴上进行缩放的坐标值. // pivotY:y轴上进行缩放的坐标值. // pivotX:-100:控件的缩放点向左移动100个像素,然后进行缩放----->正确. // pivotY:50:动画要沿着y轴往下移动50个像素,然后进行缩放---->正确. // 注意:pivotX,pivotY的方向是与正常的方向相反的. // x+30: ScaleAnimation sa = new ScaleAnimation(1, 2.0f, 1, 4.0f, 30, 0); // Animation.ABSOLUTE: // Animation.RELATIVE_TO_SELF: // Animation.RELATIVE_TO_PARENT // Animation.RELATIVE_TO_SELF, -2:控件本身所在的坐标+2*控件本身的宽度 // Animation.RELATIVE_TO_PARENT,0.2f:控件本身所在的坐标+0.2*父窗体的高度. // ScaleAnimation sa = new ScaleAnimation(1, 2, 1, 4, // Animation.RELATIVE_TO_SELF, -2, Animation.RELATIVE_TO_PARENT, // 0.2f); sa.setDuration(2000); sa.setRepeatCount(2); sa.setRepeatMode(Animation.REVERSE); sa.setFillAfter(true); iv.startAnimation(sa); } // 旋转动画 public void rotate(View v) { // 以顺时针为正的变化范围. // fromDegrees:起始的角度; // toDegrees:终止的角度. //RotateAnimation ra = new RotateAnimation(0, 45); // pivotX: // pivotY: RotateAnimation ra = new RotateAnimation(0, 45, 50, 0); // pivotXType: // pivotXValue: // RotateAnimation ra = new RotateAnimation(0, 360, // Animation.RELATIVE_TO_SELF, 2.0f, Animation.RELATIVE_TO_SELF, 0); ra.setDuration(2000); ra.setRepeatCount(2); ra.setRepeatMode(Animation.RESTART); ra.setFillAfter(true); iv.startAnimation(ra); } // 动画集合 public void set(View v) { // true:动画集合中所有的动画类型都共用一个插值器. // false:每种动画都可以使用自己的插值器. AnimationSet set = new AnimationSet(true); AlphaAnimation aa = new AlphaAnimation(0.1f, 0.5f); TranslateAnimation ta = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 2.0f, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, -2.0f); ScaleAnimation sa = new ScaleAnimation(1, 2, 1, 4, Animation.RELATIVE_TO_SELF, -2, Animation.RELATIVE_TO_PARENT, 0.2f); // 添加动画 set.addAnimation(aa); set.addAnimation(ta); set.addAnimation(sa); set.setDuration(2000); set.setRepeatCount(2); iv.startAnimation(set); } }
②.xml布局。
<RelativeLayout 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" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="alpha" android:text="透明" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="translate" android:text="平移" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="scale" android:text="缩放" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="rotate" android:text="旋转" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="set" android:text="集合" /> </LinearLayout> <ImageView android:id="@+id/iv" android:layout_width="50dp" android:layout_height="50dp" android:layout_centerInParent="true" android:src="@drawable/houzi" /> </RelativeLayout>
二.在res中编译动画
①.在res中创建一个anim文件，再在里面创建要实现的动画效果的xml文件
<alpha xmlns:android="http://schemas.android.com/apk/res/android" android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="1000" android:fillAfter="true" > <!-- 0.0-1.0 android:fromAlpha="1.0" 变化之前的透明度 100% android:toAlpha="0.5" 变化之后的透明度 50% android:duration="1000" 变化的时间间隔 android:fillAfter="true"动画结束后 维持到最后动画状态 --> </alpha>
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0.0" android:toDegrees="-360.0" android:pivotX="50%" android:pivotY="50%" android:duration="1000" android:repeatCount="infinite" android:repeatMode="restart" > <!-- android:fromDegrees="0.0" 开始的起始角度 android:toDegrees="-360.0" 结束后的角度 android:pivotX="0.5" android:pivotY="0.5" android:duration="1000" android:repeatCount="infinite" 无限循环 android:repeatMode="restart" restart 正向 reverse反向 --> </rotate>
<scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="1.0" android:toXScale="0.5" android:fromYScale="1.0" android:toYScale="0.5" android:pivotX="50%" android:pivotY="50%" android:duration="1000" android:fillAfter="true" > <!-- android:fromXScale="1.0" 变化前x轴的值 100% android:toXScale="0.5" 变化后 x轴的值 50% android:fromYScale="1.0" 变化前y轴的值 android:toYScale="0.5" 变化后y轴的值 android:pivotX="0.5" x轴的图片位置 为原点 50% android:pivotY="0.5" y轴的图片位置 为原点 50% android:duration="1000" android:fillAfter="true" --> </scale>
<translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:fillAfter="true" android:fromXDelta="0.0" android:fromYDelta="0.0" android:toXDelta="0.0" android:toYDelta="70.0" > </translate>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/decelerate_interpolator" > <rotate android:duration="1000" android:fromDegrees="0.0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="-360.0" /> <translate android:duration="1000" android:fillAfter="true" android:fromXDelta="0.0" android:fromYDelta="0.0" android:startOffset="1000" android:toXDelta="0.0" android:toYDelta="70.0" > </translate> <!-- set:集合动画 android:startOffset="1000" 动画的间隔时间 android:interpolator="@android:anim/accelerate_decelerate_interpolator" @android:anim/accelerate_decelerate_interpolator:先加速后减速 accelerate_interpolator :一直加速 decelerate_interpolator:一直减速 @android:anim/linear_interpolator:匀速 动画的插入器: 加速 减速 先减速后加速... --> </set>
②.JAVA程序
public class MainActivity extends Activity { private ImageView iv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); iv = (ImageView) findViewById(R.id.iv_show); } public void OnclickBtn(View v){ switch (v.getId()) { case R.id.btn_alpha://淡入淡出 //startAnimation 控制开启动画 AnimationUtils.loadAnimation将动画引入进来 iv.startAnimation(AnimationUtils.loadAnimation(this, R.anim.alpha_animation)); break; case R.id.btn_scale://缩放 //startAnimation 控制开启动画 AnimationUtils.loadAnimation将动画引入进来 iv.startAnimation(AnimationUtils.loadAnimation(this, R.anim.scale_animation)); break; case R.id.btn_translate://位移 //startAnimation 控制开启动画 AnimationUtils.loadAnimation将动画引入进来 iv.startAnimation(AnimationUtils.loadAnimation(this, R.anim.translate_animation)); break; case R.id.btn_rotate://旋转 //startAnimation 控制开启动画 AnimationUtils.loadAnimation将动画引入进来 iv.startAnimation(AnimationUtils.loadAnimation(this, R.anim.set_rotate)); break; default: break; } } }
③.xml布局
<RelativeLayout 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" > <ImageView android:id="@+id/iv_show" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/ic_launcher" /> <Button android:id="@+id/btn_alpha" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/iv_show" android:onClick="OnclickBtn" android:text="淡入淡出 alpha" /> <Button android:id="@+id/btn_scale" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/btn_alpha" android:onClick="OnclickBtn" android:text="缩放 scale" /> <Button android:id="@+id/btn_translate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/iv_show" android:layout_toRightOf="@id/btn_alpha" android:onClick="OnclickBtn" android:text="位移 translate" /> <Button android:id="@+id/btn_rotate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/btn_alpha" android:layout_toRightOf="@id/btn_scale" android:onClick="OnclickBtn" android:text="旋转 rotate" /> </RelativeLayout>
文件
