Animation动画效果简单汇总

来源：互联网发布：许继集团怎么样知乎编辑：程序博客网时间：2024/06/11 00:05

————————————案例结构很复杂一步步来————————————

1、activity_main.xml（首先看启动界面布局文件，里面有2个button）

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <Button        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:onClick="toTestVA"        android:text="Test View Animation" />    <Button        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:onClick="toTestDA"        android:text="Test Drawable Animation" /></LinearLayout>

2、MainActivity.java(看加载布局文件的主入口代码，代码做的就是启动2个activity)

package com.atguigu.l10_animation;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.view.View;public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}/* * 测试View Annimation */public void toTestVA(View v) {startActivity(new Intent(this, VAActivity.class));}/* * 测试Drawable Annimation */public void toTestDA(View v) {startActivity(new Intent(this, DAActivity.class));}}

3、首先看startActivity(new Intent(this, VAActivity.class));启动的界面布局文件如下

activity_animation_va.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content" >        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:onClick="startCodeScale"            android:text="Code Scale" />        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:onClick="startXmlScale"            android:text="Xml Scale" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content" >        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:onClick="startCodeRotate"            android:text="Code Rotate" />        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:onClick="startXmlRotate"            android:text="Xml Rotate" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content" >        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:onClick="startCodeAlpha"            android:text="Code Alpha" />        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:onClick="startXmlAlpha"            android:text="Xml Alpha" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content" >        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:onClick="startCodeTranslate"            android:text="Code Translation" />        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:onClick="startXmlTranslate"            android:text="Xml Translation" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content" >        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:onClick="startCodeAnimationSet"            android:text="Code AnimationSet"             android:textSize="15sp"/>        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:onClick="startXmlAnimationSet"            android:text="Xml AnimationSet"             android:textSize="15sp"/>    </LinearLayout>        <Button            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:onClick="testAnimationListener"            android:text="Test Animation Listener"/>    <ImageView        android:id="@+id/iv_animation"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/atguigu"         android:layout_gravity="center_horizontal"/>    <TextView        android:id="@+id/tv_animation_msg"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="显示动画描述信息"         android:textSize="18dp"/></LinearLayout>

4、然后看VAActivity.java（就是操作activity_animation_va.xml视图的代码）

VAActivity.java（代码里有5种简单的动画效果，每种动画效果都有代码和.xml文件2种形式）

package com.atguigu.l10_animation;import android.app.Activity;import android.os.Bundle;import android.util.Log;import android.view.View;import android.view.animation.AlphaAnimation;import android.view.animation.Animation;import android.view.animation.AnimationSet;import android.view.animation.AnimationUtils;import android.view.animation.RotateAnimation;import android.view.animation.ScaleAnimation;import android.view.animation.TranslateAnimation;import android.widget.ImageView;import android.widget.TextView;public class VAActivity extends Activity {//定义图片视图资源private ImageView iv_animation;//显示动画描述信息private TextView tv_animation_msg;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_animation_va);//获取图片iv_animation = (ImageView) findViewById(R.id.iv_animation);//获取描述信息的对象tv_animation_msg = (TextView) findViewById(R.id.tv_animation_msg);}/** * 1.1 编码实现: 缩放动画 ScaleAnimation *  fromX : 开始时X轴上的缩放比例 toX : 结束时X轴上的缩放比例  *  fromY :开始时Y轴上的缩放比例 toY :结束时Y轴上的缩放比例 *  * pivotXType : X轴坐标的类型(计算x轴上的偏移量的方式) pivotXVlaue : 中心点相对视图左顶点在x轴上的偏移量 * pivotYType : Y轴坐标的类型(计算x轴上的偏移量的方式) pivotYValue : 中心点相对视图左顶点在y轴上的偏移量 */public void startCodeScale(View v) {//ScaleAnimation animation = new ScaleAnimation(fromX, toX, fromY, toY, pivotXType, pivotXValue, pivotYType, pivotYValue)ScaleAnimation animation = new ScaleAnimation(0.0f, 1.0f, 0.5f, 1.0f,Animation.ABSOLUTE, 10.0f, Animation.ABSOLUTE, 20.0f);// 延迟时间, 单位msanimation.setStartOffset(1000);// 持续的时间, 单位msanimation.setDuration(5000);// 固定在原来大小animation.setFillBefore(true);// 开启动画iv_animation.startAnimation(animation);}/** * 1.2 xml实现: 缩放动画 <scale> */public void startXmlScale(View v) {// 加载动画配置文件Animation animation = AnimationUtils.loadAnimation(this,R.anim.scale_test);// 启动动画iv_animation.startAnimation(animation);}/** * 2.1 编码实现: 旋转动画 RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue)fromDegrees : 开始时的角度toDegrees : 结束时的角度pivotXType : X轴坐标的类型pivotXVlaue : X轴坐标的值pivotYType :  Y轴坐标的类型pivotYValue : Y轴坐标的值 */public void startCodeRotate(View v) {//逆时针旋转180度RotateAnimation animation = new RotateAnimation(90f, -90f,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);//顺时针旋转360度(以对角线重点为中心)//animation = new RotateAnimation(0f, 360f, Animation.RELATIVE_TO_SELF,//0.5f, Animation.RELATIVE_TO_SELF, 0.5f);animation.setDuration(9000);// 设置无限重复动画animation.setRepeatCount(Animation.INFINITE);//启动动画iv_animation.startAnimation(animation);}/** * 2.2 xml实现: 旋转动画 <rotate>？？？？？？？？？？？？？？？？ */public void startXmlRotate(View v) {Animation animation = AnimationUtils.loadAnimation(this,R.anim.rotate_test);iv_animation.startAnimation(animation);}/** * 3.1 编码实现: 透明度动画 AlphaAnimationnew AlphaAnimation(fromAlpha, toAlpha) */public void startCodeAlpha(View v) {AlphaAnimation animation = new AlphaAnimation(0.0f, 1.0f);animation.setDuration(2000);iv_animation.startAnimation(animation);}/** * 3.2 xml实现: 透明度动画 <alpha> */public void startXmlAlpha(View v) {Animation animation = AnimationUtils.loadAnimation(this,R.anim.alpha_test);iv_animation.startAnimation(animation);}/** * 4.1 编码实现: 平衡动画 TranslateAnimationnew TranslateAnimation(fromXType, fromXValue, toXType, toXValue, fromYType, fromYValue, toYType, toYValue)fromXType : 坐标类型fromXValue : 开始时X轴的坐标toXType :坐标类型toXValue : 结束时X轴的坐标fromYType :坐标类型fromYValue : 开始时Y轴的坐标toYType :坐标类型toYValue : 结束时Y轴的坐标 */public void startCodeTranslate(View v) {TranslateAnimation animation = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,1.0f, Animation.RELATIVE_TO_SELF, 0.0f,Animation.RELATIVE_TO_SELF, 1.0f);animation.setDuration(2000);iv_animation.startAnimation(animation);}/** * 4.2 xml实现: 平衡动画 <translate> */public void startXmlTranslate(View v) {Animation animation = AnimationUtils.loadAnimation(this,R.anim.translate_test);iv_animation.startAnimation(animation);}/** * 5.1 编码实现: 复合动画 AnimationSet */public void startCodeAnimationSet(View v) {//参数为false、没有任何动画效果AnimationSet animationSet = new AnimationSet(false);// 透明度动画AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);alphaAnimation.setDuration(2000);animationSet.addAnimation(alphaAnimation);// 旋转动画RotateAnimation rotateAnimation = new RotateAnimation(0.0f, 360f,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);rotateAnimation.setDuration(1000);rotateAnimation.setStartOffset(2000);// 延迟2sanimationSet.addAnimation(rotateAnimation);// 启动动画iv_animation.startAnimation(animationSet);}/** * 5.2 xml实现: 复合动画 <set> */public void startXmlAnimationSet(View v) {Animation animation = AnimationUtils.loadAnimation(this,R.anim.set_test);iv_animation.startAnimation(animation);}/** * 6. 测试动画监听 */public void testAnimationListener(View v) {AlphaAnimation animation = new AlphaAnimation(0.0f, 1.0f);animation.setDuration(2000);animation.setRepeatCount(2);//设置动画监听animation.setAnimationListener(new Animation.AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {Log.e("TAG", "动画开始");}@Overridepublic void onAnimationRepeat(Animation animation) {Log.e("TAG", "动画重复");}@Overridepublic void onAnimationEnd(Animation animation) {Log.e("TAG", "动画结束");}});iv_animation.startAnimation(animation);}}

5、针对上面的代码，下面是依次的动画的布局文件

5-1、缩放动画布局文件如下

scale_test.xml

<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android"    android:fromXScale="0.0"    android:toXScale="1.5"    android:fromYScale="0.0"    android:toYScale="1.0"    android:startOffset="1000"    android:duration="3000"    android:pivotX="100%"    android:pivotY="100%"    android:fillAfter="true"/><!-- Animation.ABSOLUTE : 数值(默认以px为单位)Animation.RELATIVE_TO_SELF : 百分数,如:50% (以当前视图的宽度或高度其为基数来计算)Animation.RELATIVE_TO_PARENT : 百分数+p,如:50%p (以父视图的宽度或高度其为基数来计算) -->

5-2、旋转动画布局方式如下

rotate_test.xml

<?xml version="1.0" encoding="utf-8"?><rotate xmlns:android="http://schemas.android.com/apk/res/android"    android:fromDegrees="90"    android:toDegrees="-90"     android:duration="5000"></rotate><!-- Xml旋转动画: 以左顶点为坐标, 从正90度到负90度, 持续5s默认中心点左顶点开始 -->

5-3、透明动画布局文件如下

alpha_test.xml

<?xml version="1.0" encoding="utf-8"?><alpha xmlns:android="http://schemas.android.com/apk/res/android"    android:fromAlpha="1.0"    android:toAlpha="0.0"    android:duration="1000"></alpha><!-- Xml透明度动画: 从完全不透明到完全透明, 持续1s -->

5-4、平移动画布局文件如下

translate_test.xml

<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"    android:fromXDelta="100%"     android:toXDelta="-100%"    android:duration="4000"></translate><!-- xml移动动画: 从屏幕的右边逐渐回到原来的位置, 持续2s -->

5-5、复合动画布局如下

set_test.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <alpha android:fromAlpha="0"         android:toAlpha="1"        android:duration="2000"/>   <rotate android:fromDegrees="0"       android:toDegrees="360"       android:duration="2000"       android:startOffset="2000"       android:pivotX="50%"       android:pivotY="50%"/></set><!-- Xml复合动画: 透明度从透明到不透明, 持续2s, 接着进行旋转360度的动画, 持续2s -->

6、接下来看MainActivity.java启动的另外一个activity

startActivity(new Intent(this, DAActivity.class));

先看布局文件

activity_animation_da.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <ImageView        android:id="@+id/iv_da_mm"        android:layout_width="80dp"        android:layout_height="80dp"        android:layout_marginTop="160dp"        android:background=<span style="color:#ff6666;">"@drawable/anim_da</span>"/>    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignParentLeft="true"        android:layout_alignParentRight="true" >        <Button            android:id="@+id/btn_da_start"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="启动动画" />        <Button            android:id="@+id/btn_da_stop"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="结束动画" />    </LinearLayout></RelativeLayout>

接下来是

<span style="color:#ff6666;">anim_da</span>

<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android"     android:oneshot="false">    <!-- oneshot: 是否只显示一次 -->   <item android:drawable="@drawable/nv1" android:duration="500"></item>   <item android:drawable="@drawable/nv2" android:duration="500"></item>   <item android:drawable="@drawable/nv3" android:duration="500"></item>   <item android:drawable="@drawable/nv4" android:duration="500"></item></animation-list>

DAActivity.java

package com.atguigu.l10_animation;import android.app.Activity;import android.graphics.drawable.AnimationDrawable;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.ImageView;/* * 测试: Drawable Animation */public class DAActivity extends Activity implements OnClickListener {private ImageView iv_da_mm;private Button btn_da_start;private Button btn_da_stop;private AnimationDrawable animationDrawable;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_animation_da);iv_da_mm = (ImageView) findViewById(R.id.iv_da_mm);btn_da_start = (Button) findViewById(R.id.btn_da_start);btn_da_stop = (Button) findViewById(R.id.btn_da_stop);animationDrawable = (AnimationDrawable) iv_da_mm.getBackground();btn_da_start.setOnClickListener(this);btn_da_stop.setOnClickListener(this);}@Overridepublic void onClick(View v) {if (v == btn_da_start) {//启动图片动画animationDrawable.start();} else if (v == btn_da_stop) {//停止图片动画animationDrawable.stop();}}}

0 0