补间动画
老规矩,先上菜单:
现在我们来谈一谈补间动画的特点,通常我们再需要一些动画特效时,需要改变控件的形状等属性,而用帧动画的效果时无法完全满足这样对的需求的,所以补间动画就应运而生,但是补间动画也是有缺点的,动画效果只是将图片的显示位置改变到指定的地点,并没有将其对应的属性和资源位置改变,如其点击效果,还是在控件最初的位置有效。
总结一下:
1)平移(Translate):new TranslateAnimation();
>2) 缩放(scale):new ScaleAnimation();
3) 透明度(alpha):new AlphaAnimation();
4) 旋转(rotate): new RotateAnimation();
* 每个动画效果的参数不一样,所以这里就没有具体描述,详细的可以看下面的代码。
现在我们先来看布局文件:
<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"
tools:context="com.wanchuan.tweenanimation.MainActivity" >
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="move"
android:text="位移" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="scale"
android:text="缩放" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="rotate"
android:text="旋转" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="alpha"
android:text="透明" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="fly"
android:text="全动画" />
</LinearLayout>
<ImageView
android:id="@+id/iv_1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/p7"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
/>
<ImageView
android:id="@+id/iv_2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/p9"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
/>
接下来就是你们梦寐以求的java代码了:
package com.wanchuan.tweenanimation;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
public class MainActivity extends Activity {
private ImageView iv_1;
private ImageView iv_2;
private TranslateAnimation ta_1;
private ScaleAnimation sa;
private RotateAnimation ra;
private AlphaAnimation aa;
private TranslateAnimation ta_2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
iv_1=(ImageView) findViewById(R.id.iv_1);
iv_2=(ImageView) findViewById(R.id.iv_2);
}
public void move(View v)//该方法为平移的动画
{
ta_1 = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 2,
Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 2);
//定义动画持续时间
ta_1.setDuration(2000);
ta_1.setRepeatCount(1);//重复播放次数,额外次数
ta_1.setRepeatMode(Animation.REVERSE);//设置重复模式(restart,源方向,reverse,反方向
ta_1.setFillAfter(true);//在结束位置上填充动画
iv_1.startAnimation(ta_1);
ta_2 = new TranslateAnimation(0, -100, 0, 100);
ta_2.setDuration(2000);
ta_2.setFillAfter(true);
iv_2.startAnimation(ta_2);
}
public void scale(View v)//该方法为缩放的动画
{
sa = new ScaleAnimation(1, 2, 1, 2,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
// ScaleAnimation sa=new ScaleAnimation(1, 2, 1, 2,iv_2.getWidth()/2,iv_2.getHeight()/2);
sa.setDuration(2000);
sa.setFillAfter(true);
iv_2.startAnimation(sa);
}
public void rotate(View v)//该方法为旋转的动画
{
ra = new RotateAnimation(0, 360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
ra.setDuration(2000);
ra.setFillAfter(true);
iv_2.startAnimation(ra);
}
public void alpha(View v)//该方法为透明度改变的动画
{
aa = new AlphaAnimation(0, 1);
aa.setDuration(2000);
aa.setFillAfter(true);
iv_2.startAnimation(aa);
}
public void all(View v)//该方法为所有的动画同时运行
{
AnimationSet set=new AnimationSet(false);
set.addAnimation(ta_2);
set.addAnimation(aa);
set.addAnimation(sa);
set.addAnimation(ra);
iv_1.startAnimation(set);
}
}
首先看看平移动画:
* new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 2, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 2);
* TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)
arg1:表示动画开始时再X轴方向上的平移类型,有三种类型:
ABSOLUTE,绝对的,表示相对于屏幕
RELATIVE_TO_PARENT:相对于父布局
RELATIVE_TO_SELF:相对于自己
arg2:表示相对与对应平移类型的布局的X轴方向上的位移的起始位置
- arg3:表示动画结束时再X轴方向上的平移类型,有三种类型和之气那的相同。
- arg4:表示相对与对应平移类型的布局的X轴方向上的位移的结束位置
- arg5:表示动画开始时再Y轴方向上的平移类型,有三种类型:
- arg6:表示相对与对应平移类型的布局的Y轴方向上的位移的起始位置
- arg7:表示动画结束时再Y轴方向上的平移类型,有三种类型和之气那的相同。
arg8:表示相对与对应平移类型的布局的Y轴方向上的位移的结束位置
*new ScaleAnimation(1, 2, 1, 2,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f); *ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
缩放动画,同样8个参数,我们来仔细解读这些参数的意义:
- arg1:在动画开始时,在X轴方向上控件缩放的比例。(即横向拉伸或压缩)
- arg2:在动画结束时,在X轴方向上控件缩放的比例。
- arg3:在动画开始时,在Y轴方向上控件缩放的比例。(即纵向拉伸或压缩)
- arg4:在动画结束时,在Y轴方向上控件缩放的比例。
- arg5:在X轴方向上的相对于哪一个布局的基点进行缩放,也是和平移的三种类型相同,相对于父布局,相对于屏幕,相对于自己。
- arg6:如0.5f,就是X轴方向上对应的布局类型的0.5倍布局宽度的位置,也就是中点的位置。
- arg7:在Y轴方向上的相对于哪一个布局的基点进行缩放,也是和平移的三种类型相同,相对于父布局,相对于屏幕,相对于自己。
- arg8:如0.5f,就是Y轴方向上对应的布局类型的0.5倍布局宽度的位置,也就是中点的位置。
如果最后4个参数对应的布局类型为同一个布局,且对应的缩放基点都是0.5f,就表示缩放的基点为该布局的几何中心点。
* new RotateAnimation(0, 360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f); * RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
旋转动画:6个参数,其中后面4个参数和之前的解释相同,就是相对于布局类型。我这里就直接是前面2个参数的意义。
- arg1:动画开始时,控件起始旋转位置的角度。这里的角度通常是从X轴以顺时针方向为正。
arg2:动画结束时,控件的停止位置的角度。
* new AlphaAnimation(0, 1); * AlphaAnimation(float fromAlpha, float toAlpha)
透明度动画,2个参数。
- 透明度的参数在0~1之间。0表示完全透明,1表示不透明。
- arg1:动画开始时的透明度。
- arg2:动画结束时的透明度。
也可以将之前的这些动画,合并到一起,同时展示:
`public void fly(View v)
{
AnimationSet set=new AnimationSet(false);//创建一个动画集合,false表示这些动画使用的各自的校对器
set.addAnimation(ta_2);//将上面的动画对象添加到集合中
set.addAnimation(aa);
set.addAnimation(sa);
set.addAnimation(ra);
iv_1.startAnimation(set);//开启动画
}`
同时这些动画也可以通过布局文件来实现,在res文件夹下创建一个anim的文件夹,里面就可以创建对应动画的xml文件。放上两个动画的XML文件,另外2个动画类似,就不再贴出代码了。
<?xml version="1.0" encoding="utf-8"?>
<scale android:fromXScale="1.0"
android:toXScale="2.0"
android:fromYScale="1.0"
android:toYScale="2.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"
xmlns:android="http://schemas.android.com/apk/res/android">
</scale>
这是缩放的动画的XML文件↑
<?xml version="1.0" encoding="utf-8"?>
<translate android:fromXDelta="50%"
android:fromYDelta="50%"
android:toXDelta="50"
android:toYDelta="50"
android:duration="2000"
android:fillAfter="true"
xmlns:android="http://schemas.android.com/apk/res/android">
</translate>