补间动画
Android中的补间动画即View动画有四种,分别为AlphaAnimation透明渐变动画、RotateAnimation旋转动画、ScaleAnimation缩放动画、TranslateAnimation位移动画。
使用View动画可以在代码中直接设置,也可以在xml中进行设置。
设置View动画
首先我们在布局中有一个ImageView图像,然后设置4个Button,点击的时候执行相应的动画。
AlphaAnimation透明渐变动画
在代码中设置动画,代码如下:
//1.0意味着着完全不透明 0.0意味着完全透明
AlphaAnimation aa = new AlphaAnimation(1.0f, 0.0f);
aa.setDuration(2000); //设置动画执行的时间
aa.setRepeatCount(1); //设置重复的次数
aa.setRepeatMode(Animation.REVERSE);//设置动画执行的模式
//imageView开始执行动画
imageView.startAnimation(aa);
透明渐变动画很简单,只需要设置透明度就可以了。
RotateAnimation旋转动画
旋转动画有多个构造方法,我们选取其中参数最多的构造方法:
RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
int pivotYType, float pivotYValue)
其中的各种参数的意义如下:
fromDegrees : 从哪个角度开始旋转,一般为0
toDegrees : 结束的时候角度为多少,如转一圈则为360
pivotXType : 在X轴上动画相对于谁旋转,一般是相对于父控件Animation.RELATIVE_TO_PARENT,或者相对于自己旋转Animation.RELATIVE_TO_SELF
pivotXValue : 在X轴上动画旋转的中心点
pivotYType : 在Y轴上动画相对于谁旋转,同pivotXType
pivotYValue : 在Y轴上动画旋转的中心点
示例:
RotateAnimation rotate = new RotateAnimation(0, 360, // 从0度开始旋转,到360度结束
Animation.RELATIVE_TO_SELF, 0.5f, // X轴指定相对于自己还是相对于父控件旋转,0.5f则是以自己宽度的二分之一为旋转点
Animation.RELATIVE_TO_SELF, 0.5f); // Y轴指定相对于自己还是相对于父控件旋转,0.5f则是以自己高度的二分之一为旋转点
rotate.setDuration(2000);
imageView.startAnimation(rotate);
上面的代码执行时,会发现动画是以imageView的中心点旋转360度回到原点结束的。
ScaleAnimation缩放动画
缩放动画同样有多个参数的构造方法,如下:
ScaleAnimation(float fromX, float toX, float fromY, float toY,
int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
参数代表的意义:
fromX : 动画的X轴从多大开始缩放,一般为1.0f,即动画原本大小开始缩放
toX : 动画在X轴方向上要缩放到多大,如果小于1.0f,则动画在X轴上的距离会变小,大于1.0f会放大
fromY : 动画的Y轴从多大开始缩放,其他同fromX
toY : 动画在Y轴方向上要缩放到多大,其他同toX
pivotXType : X轴指定相对于自己还是相对于父控件缩放,一般是相对于父控件Animation.RELATIVE_TO_PARENT,或者相对于自己缩放Animation.RELATIVE_TO_SELF
pivotXValue : 指定X轴方向上哪个位置为中心缩放
pivotYType : Y轴同pivotXType
pivotYValue : Y轴同pivotXValue
下面的示例为相对于自己从中心点放大:
ScaleAnimation scale = new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f, // 1.0f代表原本大小,2.0f代表放大一倍
Animation.RELATIVE_TO_SELF, 0.5f, // X轴指定相对于自己还是相对于父控件放大,第二个则是以哪个位置为X轴的旋转点,此处为中心点放大
Animation.RELATIVE_TO_SELF, 0.5f);
scale.setDuration(2000);
imageView.startAnimation(scale);
TranslateAnimation位移动画
TranslateAnimation位移动画也有多个参数,但是大多数参数都与上面几个动画雷同
TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
int fromYType, float fromYValue, int toYType, float toYValue)
参数意义:
fromXType :在X轴上动画相对于谁移动,一般是相对于父控件Animation.RELATIVE_TO_PARENT,或者相对于自己移动Animation.RELATIVE_TO_SELF
fromXValue :在X轴上的起始时的移动距离,一般为0f,即原来位置
toXType :在结束时X轴相对于谁移动,同fromXType
toXValue :在结束时动画X轴所处的距离,若相对于父控件移动,一般不超多1.0f,否则会移动到屏幕外面
fromYType :在Y轴上动画相对于谁移动,一般是相对于父控件Animation.RELATIVE_TO_PARENT,或者相对于自己移动Animation.RELATIVE_TO_SELF
fromYValue :在Y轴上的起始时的移动距离,一般为0f,即原来位置
toYType :在结束时Y轴相对于谁移动,同fromXType
toYValue :在结束时动画Y轴所处的距离,若相对于父控件移动,一般不超多1.0f,否则会移动到屏幕外面
下面是相对于父控件,往右下角45度移动的示例:
TranslateAnimation trans = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, 0f, // 起始时X轴相对于父控件移动
Animation.RELATIVE_TO_PARENT, 0.2f, // 结束时X轴也相对于父控件移动
Animation.RELATIVE_TO_PARENT, 0, // 起始时Y轴相对于父控件移动
Animation.RELATIVE_TO_PARENT, 0.2f); // 结束时Y轴相对于父控件移动
trans.setDuration(2000);
imageView.startAnimation(trans);
在xml中设置View动画
在xml中设置动画也比较简单。
首先在res资源目录下新建一个anim目录,然后创建一个xml文件,下面创建了一个TranslateAnimation位移动画的xml文件,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<translate
android:fromXDelta="0%p" // 起始位置为原来的位置,后面带P代表相对于父控件移动,即代码布局中的Animation.RELATIVE_TO_PARENT
android:toXDelta="0%p"
android:fromYDelta="0%p"
android:toYDelta="20%p"
android:fillAfter="true"
android:duration="2000"
xmlns:android="http://schemas.android.com/apk/res/android">
</translate>
在xml中设置的参数基本与在代码设置的参数无异,在设置好xml之后,就是调用这个动画了,调用的方法如下:
Animation translate = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate);
//开始动画
iv.startAnimation(translate);
只需要使用AnimationUtils这个类加载R.anim.translate动画,也就是刚才设置的xml文件的文件名
属性动画
上面的补间动画有个确定,就是不会改变运行动画的真实坐标,如使用TranslateAnimation的时候,ImageView在动画结束时停留在另一个位置,但是点击这个位置确实没有效果的,必须点击开始时的位置才起效。
而属性动画则是能够改变ImageView的真实坐标。
属性动画是使用ObjectAnimator这个类实现的,而使用这一个类就能够实现补间动画四个类的效果。
ObjectAnimator有个特点,就是我们无法使用new的方式创建出他的实例,而是使用ofFloat(Object target, String propertyName, float... values)这个静态方法获取的
ofFloat(Object target, String propertyName, float... values)
参数意义:
target :要执行动画的对象
propertyName:属性的名字,即执行动画的对象要执行哪种动画(执行动画的对象的所拥有的方法)
values :执行动画的参数,是可变参数,意思是能够传入多个值
属性动画使用的方法很简单,代码如下:
//创建属性动画
/**
* target 执行的目标
* propertyName 属性名字 The name of the property being animated.
* float... values 可变参数
*/
ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "translationX", 10, 50,20,100);
oa.setDuration(2000);
oa.start(); //开始动画
上面代码执行的时候将会对imageView进行在X轴上的位移,先移动到10,然后继续向右移动到50,在向左移动到20,最后移动到100的位置。
实现缩放效果,下面代码会将图片纵向缩放,也就是图片变扁了:
ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "alpha", 0, 0.5f, 0, 1,0,1);
oa.setDuration(2000);
oa.start();
实现旋转效果:
// 按照中心点旋转
// ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "rotation", 0, 180, 90, 360);
// 按照X轴旋转
ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "rotationX", 0, 180, 90, 360);
oa.setDuration(2000);
oa.start();
实现透明效果:
ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "alpha", 0, 0.5f, 0, 1,0,1);
oa.setDuration(2000);
oa.start();
实现动画一起执行的效果
AnimatorSet as = new AnimatorSet();
ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "translationX", 10, 50, 20, 100);
ObjectAnimator oa2 = ObjectAnimator.ofFloat(imageView, "scaleY", 0.1f, 2, 1, 2);
ObjectAnimator oa3 = ObjectAnimator.ofFloat(imageView, "alpha", 0, 0.5f, 0, 1);
ObjectAnimator oa4 = ObjectAnimator.ofFloat(imageView, "rotationY", 0, 180, 90, 360);
as.setDuration(2000);//执行动画时长
as.setTarget(iv);//iv执行动画
//往集合中添加动画
//动画逐个执行
as.playSequentially(oa, oa2, oa3, oa4);
//动画全部一起执行
//as.playTogether(oa, oa2, oa3, oa4);
as.start();
在XML中设置属性动画
在xml中使用属性动画要在res文件夹下新建一个animator文件夹,然后穿件一个xml文件,这里命名为oanimator.xml,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<animator xmlns:android="http://schemas.android.com/apk/res/android" >
<objectAnimator
android:propertyName="translationX"
android:duration="2000"
android:valueFrom="10"
android:valueTo="100"
></objectAnimator>
</animator>
在代码中调用这个它:
ObjectAnimator oa = (ObjectAnimator) AnimatorInflater.loadAnimator(this, R.animator.oanimator);
//设置执行目标
oa.setTarget(iv);
oa.start();//开始执行
如此就能使用设置的这个动画了。
帧动画
动画中还有一个帧动画,帧动画是使用一系列的图片资源实现的。
实现帧动画非常简单,首先我们设置一个ImageView显示帧动画,然后在Activity绑定它。
然后放一系列的图片资源在drawable文件夹中,在创建一个xml文件,这里命名为my_anim.xml(可随意命名)。
然后在xml中添加要加载的图片资源,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="@drawable/girl_1" android:duration="200" />
<item android:drawable="@drawable/girl_2" android:duration="200" />
<item android:drawable="@drawable/girl_3" android:duration="200" />
<item android:drawable="@drawable/girl_4" android:duration="200" />
<item android:drawable="@drawable/girl_5" android:duration="200" />
<item android:drawable="@drawable/girl_5" android:duration="200" />
<item android:drawable="@drawable/girl_5" android:duration="200" />
<item android:drawable="@drawable/girl_5" android:duration="200" />
<item android:drawable="@drawable/girl_6" android:duration="200" />
<item android:drawable="@drawable/girl_7" android:duration="200" />
<item android:drawable="@drawable/girl_8" android:duration="200" />
<item android:drawable="@drawable/girl_9" android:duration="200" />
<item android:drawable="@drawable/girl_10" android:duration="200" />
<item android:drawable="@drawable/girl_11" android:duration="200" />
</animation-list>
其中girl_1、girl_2···就是我们要加载的图片资源。
设置完之后就能在代码中直接调用:
// [1]找到iv控件 用来显示动画效果
ImageView rocketImage = (ImageView) findViewById(R.id.iv);
// [2]设置背景资源
rocketImage.setBackgroundResource(R.drawable.my_anim);
// [3]获取AnimationDrawable 类型
AnimationDrawable ad = (AnimationDrawable) rocketImage.getBackground();
// [4]开始执行动画
ad.start();
如此一来就能后执行帧动画了。
Android动画学习相关资源:
Android属性动画完全解析(上),初识属性动画的基本用法
Android属性动画完全解析(中),ValueAnimator和ObjectAnimator的高级用法
Android属性动画完全解析(下),Interpolator和ViewPropertyAnimator的用法