简单的补间动画代码

来源：互联网发布：逆袭网络剧第5集编辑：程序博客网时间：2024/05/22 03:01

补间动画（Tween Animation）

补间动画与逐帧动画在本质上是不同的，逐帧动画通过连续播放图片来模拟动画的效果，而补间动画则是通过在两个关键帧之间补充渐变的动画效果来实现的。补间动画的优点是可以节省空间。目前Android应用框架支持的补间动画效果有以下5种。具体实现在android.view.animation类库中。

AlphaAnimation：透明度（alpha）渐变效果，对应<alpha/>标签。

TranslateAnimation：位移渐变，需要指定移动点的开始和结束坐标，对应<translate/>标签。

ScaleAnimation：缩放渐变，可以指定缩放的参考点，对应<scale/>标签。

RotateAnimation：旋转渐变，可以指定旋转的参考点，对应<rotate/>标签。

AnimationSet：组合渐变，支持组合多种渐变效果，对应<set/>标签。

补间动画的效果同样可以使用XML语言来定义，这些动画模板文件通常会被放在Android项目的res/anim/目录下。

下面是具体实现源码：

MainActivity.java封装实现的方法：

[java]view plaincopy

package com.example.lesson19_tween;
import com.example.lesson19_tween.R;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
publicclass MainActivityextends Activity {
private ImageView imageView;
@Override
protectedvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = (ImageView) findViewById(R.id.imageView1);
}
@Override
publicboolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
returntrue;
}
// 透明动画
publicvoid alphaImpl(View v) {
Animation animation = AnimationUtils.loadAnimation(this,
R.anim.alpha_demo);
imageView.startAnimation(animation);
}
// 旋转动画
publicvoid rotateImpl(View v) {
Animation animation = AnimationUtils.loadAnimation(this,
R.anim.rotate_demo);
imageView.startAnimation(animation);
}
// 缩放动画
publicvoid scaleImpl(View v) {
Animation animation = AnimationUtils.loadAnimation(this,
R.anim.scale_demo);
imageView.startAnimation(animation);
}
// 移动效果
publicvoid translateImpl(View v) {
// XML文件
Animation animation = AnimationUtils.loadAnimation(this,
R.anim.translate_demo);
animation.setRepeatCount(Animation.INFINITE);//循环显示
imageView.startAnimation(animation);
/*
* 第一种 imageView.setAnimation(animation); animation.start();
*/
// 第二种
// Java代码
/*
* TranslateAnimation translateAnimation = new TranslateAnimation(0,
* 200, 0, 0); translateAnimation.setDuration(2000);
* imageView.startAnimation(translateAnimation);
*/
}
// 综合实现set_demo.xml中的动画
publicvoid setAll(View v) {
Animation animation = AnimationUtils.loadAnimation(this,
R.anim.set_demo);
imageView.startAnimation(animation);
}
}

alpha_demo.xml

[html]view plaincopy

<alphaxmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromAlpha="1.0"
android:toAlpha="0.1"
android:duration="2000"/>
<!--
fromAlpha :起始透明度
toAlpha:结束透明度
1.0表示完全不透明
0.0表示完全透明
-->

rotate_demo.xml

[html]view plaincopy

<rotatexmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromDegrees="0"
android:toDegrees="360"
android:duration="1000"
android:repeatCount="1"
android:repeatMode="reverse"/>
<!--
fromDegrees:表示旋转的起始角度
toDegrees:表示旋转的结束角度
repeatCount:旋转的次数默认值是0 代表旋转1次如果值是repeatCount=4 旋转5次，值为-1或者infinite时，表示补间动画永不停止
repeatMode 设置重复的模式。默认是restart。当repeatCount的值大于0或者为infinite时才有效。
repeatCount=-1 或者infinite 循环了
还可以设成reverse，表示偶数次显示动画时会做与动画文件定义的方向相反的方向动行。
-->

scale_demo.xml

[html]view plaincopy

<scalexmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromXScale="0.2"
android:toXScale="1.5"
android:fromYScale="0.2"
android:toYScale="1.5"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"/>
<!--
fromXScale:表示沿着x轴缩放的起始比例
toXScale:表示沿着x轴缩放的结束比例
fromYScale:表示沿着y轴缩放的起始比例
toYScale:表示沿着y轴缩放的结束比例
图片中心点：
android:pivotX="50%"
android:pivotY="50%"
-->

translate_demo.xml

[html]view plaincopy

<translatexmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXDelta="0"
android:toXDelta="320"
android:fromYDelta="0"
android:toYDelta="0"
android:duration="2000"/>
<!--
android:interpolator 动画的渲染器
1、accelerate_interpolator(动画加速器) 使动画在开始的时候最慢,然后逐渐加速
2、decelerate_interpolator(动画减速器)使动画在开始的时候最快,然后逐渐减速
3、accelerate_decelerate_interpolator（动画加速减速器）
中间位置分层: 使动画在开始的时候最慢,然后逐渐加速
使动画在开始的时候最快,然后逐渐减速结束的位置最慢
fromXDelta 动画起始位置的横坐标
toXDelta 动画起结束位置的横坐标
fromYDelta 动画起始位置的纵坐标
toYDelta 动画结束位置的纵坐标
duration 动画的持续时间
-->

set_demo.xml

[html]view plaincopy

<setxmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator"
android:shareInterpolator="true">
<scale
android:duration="2000"
android:fromXScale="0.2"
android:fromYScale="0.2"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.5"
android:toYScale="1.5"/>
<rotate
android:duration="1000"
android:fromDegrees="0"
android:repeatCount="1"
android:repeatMode="reverse"
android:toDegrees="360"/>
<translate
android:duration="2000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="320"
android:toYDelta="0"/>
<alpha
android:duration="2000"
android:fromAlpha="1.0"
android:toAlpha="0.1"/>
</set>

布局文件：

[html]view plaincopy

<RelativeLayoutxmlns: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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="23dp"
android:layout_marginTop="15dp"
android:onClick="translateImpl"
android:text="@string/text_translate"/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/button1"
android:layout_marginLeft="21dp"
android:onClick="rotateImpl"
android:layout_toRightOf="@+id/imageView1"
android:text="@string/text_rotate"/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/button1"
android:layout_below="@+id/button1"
android:layout_marginTop="32dp"
android:onClick="scaleImpl"
android:text="@string/text_scale"/>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/button3"
android:layout_alignBottom="@+id/button3"
android:layout_alignLeft="@+id/button2"
android:onClick="alphaImpl"
android:text="@string/text_alpha"/>
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/button3"
android:layout_centerHorizontal="true"
android:onClick="setAll"
android:text="@string/text_set"/>
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/button5"
android:layout_marginTop="48dp"
android:layout_toRightOf="@+id/button3"
android:src="@drawable/ic_launcher"/>
</RelativeLayout>

阅读全文

2 0