转载请注明出处:http://blog.csdn.net/xiaohao0724/article/details/54614024
通过上篇的学习相信大家对帧动画有了一定的了解,接下来我们来学习补间动画,效果图如下:
看完动感美女相信大家都不淡定了吧 哇哈哈哈...
补间动画(TweenAnimation)分为五种:
一、移位动画(TranslateAnimation)
二、缩放动画(ScaleAnimation)
三、旋转动画(RotateAnimation)
四、透明度变化动画(AlphaAnimation)
五、组合动画(AnimationSet)
每种动画都有两种实现方式:
1、代码实现
2、在res/anim下面以XML文件实现
今天我就带大家来学习五种动画分别都已两种方式实现。
这五种动画都继承了Animation,首先我们写一个工具类来设置动画的属性
AnimationProperty.java
public class AnimationProperty {
public static <T extends Animation> T setAnimProperty(T animation){
// 设置动画播放的时间
animation.setDuration(3000);
// 设置动画重复播放的次数
animation.setRepeatCount(2);
// 设置动画重复播放的模式
//往返:TranslateAnimation.REVERSE ; 从头重复:TranslateAnimation.RESTART
animation.setRepeatMode(TranslateAnimation.REVERSE);
/**
* LinearInterpolator(匀速)
* AccelerateInterpolator(先慢后快)
* AccelerateDecelerateInterpolator(先慢中快后慢)
* DecelerateInterpolator(先快后慢)
* CycleInterpolator(循环播放,速度为正弦曲线)
* AnticipateInterpolator(先回撤,再匀速向前)
* OvershootInterpolator(超过,拉回)
* BounceInterpolator(回弹)
*/
// 控制动画先慢后快
animation.setInterpolator(new AccelerateInterpolator());
// 设置动画结束后效果保留
// translateAnimation.setFillAfter(true);
return animation;
}
}
然后是activity_main.xml布局
<LinearLayout 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"
android:orientation="vertical"
android:padding="10dp"
tools:context=".MainActivity" >
<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="trans"
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="alpha"
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/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:src="@drawable/mv" />
</LinearLayout>
然后一一实现五种动画
一、移位动画(TranslateAnimation)
代码实现移位动画
/**
* 平移动画
*/
public void trans(View view) {
/**
*
* float fromXDelta 动画开始的点离当前View X坐标上的差值
* float toXDelta 动画结束的点离当前View X坐标上的差值
* float fromYDelta 动画开始的点离当前View Y坐标上的差值
* float toYDelta 动画开始的点离当前View Y坐标上的差值
*
*/
//X轴上移动100px,Y轴上移动300px
// TranslateAnimation translateAnimation=new TranslateAnimation(0, 100, 0, 300);
// fromXType:相对于哪个控件横向移动;fromXValue 从哪个位置开始横向移动
// toXType:移动到相对于哪个控件的位置 ;toXValue 移动到的横向最终位置
// TranslateAnimation(int fromXType, float fromXValue,
// int toXType, float toXValue,
// int fromYType, float fromYValue,
// int toYType, float toYValue);
// TranslateAnimation.RELATIVE_TO_SELF相对自身控件。数值为0-1.0 百分比
// TranslateAnimation.RELATIVE_TO_PARENT相对父布局。 数值为0-1.0 百分比
TranslateAnimation translateAnimation = new TranslateAnimation(
//X轴移动,从0移动到相对父控件高度的0.5倍
TranslateAnimation.RELATIVE_TO_SELF, 0,
TranslateAnimation.RELATIVE_TO_PARENT, 0.5f,
//Y轴移动,从0移动到相对自身的高度
TranslateAnimation.RELATIVE_TO_SELF, 0,
TranslateAnimation.RELATIVE_TO_SELF, 1.0f);
//通过代码设置平移动画效果
imageView.startAnimation(AnimationProperty.setAnimProperty(translateAnimation));
//通过XML设置平移动画效果
Animation loadAnimation = AnimationUtils.loadAnimation(this, R.anim.translate_anim);
imageView.startAnimation(AnimationProperty.setAnimProperty(loadAnimation));
}
XML 实现移位动画res/anim/translate_anim
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000"
android:fromXDelta="0"
android:fromYDelta="0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:toXDelta="100"
android:toYDelta="300"/>
<!--
translate 位置转移动画效果
整型值:
fromXDelta 属性为动画起始时 X坐标上的位置
toXDelta 属性为动画结束时 X坐标上的位置
fromYDelta 属性为动画起始时 Y坐标上的位置
toYDelta 属性为动画结束时 Y坐标上的位置
注意:
没有指定fromXType toXType fromYType toYType 时候,
默认是以自己为相对参照物
长整型值:
duration 属性为动画持续时间
说明: 时间以毫秒为单位
android:interpolator 动画的渲染器
1、accelerate_interpolator(动画加速器) 使动画在开始的时候 最慢,然后逐渐加速
2、decelerate_interpolator(动画减速器)使动画在开始的时候 最快,然后逐渐减速
3、accelerate_decelerate_interpolator(动画加速减速器)
中间位置分层: 使动画在开始的时候 最慢,然后逐渐加速
使动画在开始的时候 最快,然后逐渐减速 结束的位置最慢
-->
二、缩放动画(ScaleAnimation)
代码实现缩放动画
/**
* 缩放动画
*/
public void scale(View view) {
// 把图片的宽从0.5倍放大到2.0倍,高从0.5倍放大到2.0倍
// ScaleAnimation scaleAnimation = new ScaleAnimation(0.5f, 2.0f, 0.5f, 2.0f);
ScaleAnimation scaleAnimation = new ScaleAnimation(0.5f, 2.0f, 0.5f, 2.0f,
//以相对自身控件宽的0.5被处缩放
ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
//以相对自身控件高的0.5被处缩放
ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
//通过代码设置缩放动画效果
imageView.startAnimation(AnimationProperty.setAnimProperty(scaleAnimation));
//通过XML设置缩放动画效果
Animation loadAnimation = AnimationUtils.loadAnimation(this, R.anim.scale_anim);
imageView.startAnimation(AnimationProperty.setAnimProperty(loadAnimation));
}
XML实现缩放动画res/anim/scale_anim
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000"
android:fromXScale="0.5"
android:fromYScale="0.5"
android:interpolator="@android:anim/accelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="2.0"
android:toYScale="2.0" />
<!--
fromXScale:表示沿着x轴缩放的起始比例
toXScale:表示沿着x轴缩放的结束比例
fromYScale:表示沿着y轴缩放的起始比例
toYScale:表示沿着y轴缩放的结束比例
pivotX:缩放中心点的横向坐标(50%为控件的中心点)
pivotY:缩放中心点的纵向坐标(50%为控件的中心点)
-->
三、旋转动画(RotateAnimation)
代码实现旋转动画
/**
* 旋转动画
*/
public void rotate(View view) {
// 将图片从0°旋转到360°
// RotateAnimation rotateAnimation = new RotateAnimation(0, 360);
RotateAnimation rotateAnimation = new RotateAnimation(0, 360,
//相对自身控件宽的0.5倍
RotateAnimation.RELATIVE_TO_SELF, 0.5f,
//自身控件高的0.5倍旋转
RotateAnimation.RELATIVE_TO_SELF, 0.5f);
//通过代码设置旋转动画效果
imageView.startAnimation(AnimationProperty.setAnimProperty(rotateAnimation));
//通过XML设置旋转动画效果
Animation loadAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate_anim);
imageView.startAnimation(AnimationProperty.setAnimProperty(loadAnimation));
}
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromDegrees="0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="1"
android:repeatMode="reverse"
android:toDegrees="360" />
<!--
rotate 旋转动画效果
pivotX:旋转中心点的横向坐标(50%为控件的中心点)
pivotY:旋转中心点的纵向坐标(50%为控件的中心点)
fromDegrees:表示旋转的起始角度
toDegrees:表示旋转的结束角度
repeatCount:旋转的次数 默认值是0 代表旋转1次 如果值是repeatCount=4 旋转5次,值为-1或者infinite时,表示补间动画永不停止
repeatMode 设置重复的模式。默认是restart从头重复动画。当repeatCount的值大于0或者为infinite时才有效。
还可以设成reverse,显示动画往返执行。
-->
四、透明度变化动画(AlphaAnimation)
代码实现透明度变化动画
/**
* 透明度变化动画
*/
public void alpha(View view) {
// 创建透明度的动画对象
// fromAlpha 初始透明度 0:完全透明 1.0f完全不透明
AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1.0f);
//通过代码设置透明动画效果
imageView.startAnimation(AnimationProperty.setAnimProperty(alphaAnimation));
//通过XML设置透明动画效果
Animation loadAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha_anim);
imageView.startAnimation(AnimationProperty.setAnimProperty(loadAnimation));
}
XML实现透明度变化 动画res/anim/alpha_anim
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fromAlpha="0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:toAlpha="1.0" />
<!--
fromAlpha :起始透明度
toAlpha:结束透明度
1.0表示完全不透明
0.0表示完全透明
-->
五、组合动画(AnimationSet)
代码实现组合动画
/**
*
* 组合动画合集
*/
public void set(View view) {
// 创建动画集合
AnimationSet animationSet = new AnimationSet(false);//true表示按照动画的顺序一个一个的播放动画
animationSet.addAnimation(new TranslateAnimation(0, 10, 0, 30));
animationSet.addAnimation( new ScaleAnimation(0.5f, 1.5f, 0.5f, 1.5f));
animationSet.addAnimation(new RotateAnimation(0, 360,
RotateAnimation.RELATIVE_TO_SELF, 0.5f,
RotateAnimation.RELATIVE_TO_SELF, 0.5f));
animationSet.addAnimation(new AlphaAnimation(0, 1.0f));
//代码设置播放动画集合
imageView.startAnimation(AnimationProperty.setAnimProperty(animationSet));
//通过XML设置动画集合效果
Animation loadAnimation = AnimationUtils.loadAnimation(this, R.anim.set_anim);
imageView.startAnimation(AnimationProperty.setAnimProperty(loadAnimation));
}
XML实现组合动画res/anim/set_anim
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false" >
<translate
android:duration="3000"
android:fromXDelta="0"
android:fromYDelta="0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:toXDelta="10"
android:toYDelta="30" />
<scale
android:duration="3000"
android:fromXScale="0.5"
android:fromYScale="0.5"
android:interpolator="@android:anim/accelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.5"
android:toYScale="1.5" />
<rotate
android:duration="1000"
android:fromDegrees="0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="1"
android:repeatMode="reverse"
android:toDegrees="360" />
<alpha
android:duration="2000"
android:fromAlpha="0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:toAlpha="1.0" />
</set>
点击下载源码