本文详细介绍Android中四种动画属性(alpha、scale、translate、rotate)的应用，并通过XML布局方式实现多种动画效果，包括界面跳转动画、Dialog动画及ListView项显示动画。
Android中的动画属性主要分为四种，分别是alpha、scale、translate、rotate。我们现在来详细了解一下各个类型的意思，然后根据项目的需求要定义自己的动画。
alpha 透明度渐变的动画效果
scale 尺寸收缩渐变的动画效果
translate 画面转换位置的动画效果
rotate 画面转移旋转动画效果
加载动画我们可以通过两种方式，一种是xml布局的方式，另一种就是纯的java代码方式，都是可以用AnimatorSet将四种动画组合使用，因人而异。
XML实现动画效果可以适用于很广的范围，比如：Activity之间动画效果_从左到右推出和相反的推出和其他效果，Fragment直接的效果，各种炫酷弹框切换的动画效果......
https://blog.youkuaiyun.com/shenggaofei/article/details/103333527
动画5 弹框动画效果：
动画7效果图：
安卓动画效果之属性动画系列以XML形式展现：
一.Activity界面跳转的动画（Fragment切换动画也是可以直接使用XML来实现）
相关动画实现链接 一个不错的学习小项目 https://github.com/kaku2015/ColorfulNews 代码中实现各种动画效果
1.移动动画跳转界面效果
首先在res/anim下创建xml的布局 声明两个动画效果
1.动画1 从右到左进入，从右到左退出
anim_back_in.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:fromXDelta="100%p"
android:fromYDelta="0"
android:toXDelta="0"
android:toYDelta="0" >
</translate>
anim_back_out.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:fromXDelta="0"
android:toXDelta="-100%p"
android:fromYDelta="0"
android:toYDelta="0" >
</translate>启动、关闭动画：
case R.id.btn_translate_show://开始
Animation topAnim01 = AnimationUtils.loadAnimation(
// AnimationTestActivity.this, R.anim.top_enter);
AnimationTestActivity.this, R.anim.anim_back_in);
ivTranslateLogo.startAnimation(topAnim01);
ivTranslateLogo.setVisibility(View.VISIBLE);
break;
case R.id.btn_translate_hide://关闭
Animation bottomAnim01 = AnimationUtils.loadAnimation(
// AnimationTestActivity.this, R.anim.top_enter_out);
AnimationTestActivity.this, R.anim.anim_back_out);
ivTranslateLogo.startAnimation(bottomAnim01);
ivTranslateLogo.setVisibility(View.INVISIBLE);
break;2.动画2 从左侧进入，从左侧退出
anim_in.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:fromXDelta="-100%p"
android:fromYDelta="0"
android:toXDelta="0"
android:toYDelta="0" >
</translate>
anim_out.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:fromXDelta="0"
android:toXDelta="100%p" >
</translate>
3.动画3 右侧进入，右侧退出带有交互透明效果（你从哪里就从哪里滚回去动画）
jump_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1100"
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:repeatMode="reverse"
>
</alpha>
<translate
android:duration="1100"
android:fromXDelta="100%p"
android:fromYDelta="0%p"
android:repeatMode="reverse"
android:toXDelta="0%p"
android:toYDelta="0%p"
></translate>
</set>
jump_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1100"
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:repeatMode="reverse"
>
</alpha>
<translate
android:duration="1100"
android:fromXDelta="0%p"
android:fromYDelta="0%p"
android:repeatMode="reverse"
android:toXDelta="100%p"
android:toYDelta="0%p"
></translate>
</set>
4.动画4 淡出动画效果
fade.xml
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="@android:integer/config_longAnimTime" />
hold.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromXDelta="0" android:toXDelta="0"
android:duration="@android:integer/config_longAnimTime" /> <?xml version="1.0" encoding="utf-8"?>
<!--渐渐消失-->
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromAlpha="1.0" android:toAlpha="0"
android:duration="@android:integer/config_longAnimTime" />JAVA执行代码(主函数中代码)
Intent intent = new Intent(LoginActivity.this, MainActivity.class);
startActivity(intent);
overridePendingTransition(R.anim.anim_back_in, R.anim.anim_back_out);
finish();动画5.组合效果实现渐变、旋转、的、缩放
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fillAfter="true">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"/>
<scale
android:fromXScale="0"
android:toXScale="1.0"
android:fromYScale="0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"/>
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"/>
</set>动画6.平移、缩放、旋转、渐变透明组合效果：
<?xml version="1.0" encoding="utf-8"?>
<set
android:fillAfter="true"
android:duration="3000"
android:shareInterpolator="@android:anim/accelerate_decelerate_interpolator"
xmlns:android="http://schemas.android.com/apk/res/android">
<!--透明度从无到有-->
<alpha android:fromAlpha="0"
android:toAlpha="1"/>
<!--旋转两圈-->
<rotate
android:pivotY="50%"
android:pivotX="50%"
android:fromDegrees="0"
android:toDegrees="720"/>
<!--放大几倍-->
<scale android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="0.1"
android:fromYScale="0.1"
android:toXScale="1"
android:toYScale="1"/>
<!--平移至中间位置-->
<translate
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="35%p"
android:toYDelta="42.5%p"/>
</set>
二.Dialog中的xml动画使用：
1.style中声明：（下面时一个Dialog弹框）
<!-- 设置dialog弹出，退出动画 -->
<style name="dialogWindowAnim" parent="android:Animation" mce_bogus="1">
<item name="android:windowEnterAnimation">@anim/dialog_enter_anim</item>
<item name="android:windowExitAnimation">@anim/dialog_exit_anim</item>
</style>2.使用动画场景：
import android.app.Dialog;
import android.content.Context;
import android.view.Gravity;
import android.view.Window;
import android.view.WindowManager;
import com.dsy.plusmenu.R;
public class MySgfDialog extends Dialog {
private Window window = null;
public MySgfDialog(Context context)
{
super(context);
}
//这个构造函数可以设置dialog的属性
public MySgfDialog(Context context, int themeResId) {
super(context, themeResId);
}
public void showDialog(int layoutResID, int x, int y){
setContentView(layoutResID);
windowDeploy(x, y);
//设置触摸对话框意外的地方取消对话框
setCanceledOnTouchOutside(true);
show();
}
//设置窗口显示
public void windowDeploy(int x, int y){
window = getWindow(); //得到对话框
window.setGravity(Gravity.BOTTOM|Gravity.CENTER);
window.setWindowAnimations(R.style.dialogWindowAnim2); //设置窗口弹出动画
//window.setBackgroundDrawableResource(R.color.vifrification); //设置对话框背景为透明
WindowManager.LayoutParams wl = window.getAttributes();
//根据x，y坐标设置窗口需要显示的位置
wl.x = x; //x小于0左移，大于0右移
wl.y = y; //y小于0上移，大于0下移
wl.width=window.getWindowManager().getDefaultDisplay().getWidth();//设置dialog的款
// wl.width= AppApplication.getApplication().getWallpaperDesiredMinimumWidth();
wl.height=350;//设置dialog的高
// wl.alpha = 0.6f; //设置透明度
// wl.gravity = Gravity.BOTTOM; //设置重力
window.setAttributes(wl);
}
}
MySgfDialog myDialog=new MySgfDialog(TankuangActivity.this,R.style.NoDialogTitle);
myDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
myDialog.showDialog(R.layout.item_alertdialog_tankuang,0,0); <color name="vifrification">#00000000</color> <!-- 透明 -->
<style parent="@style/Animation.AppCompat.Dialog" name="NoDialogTitle">
<item name="android:windowFrame">@null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowContentOverlay">@null</item>
//设置dialog的背景颜色
<item name="android:background">#ffffff</item>
</style>
动画1：
dialog_enter_anim2.xml 右侧进入
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--<scale-->
<!--android:interpolator="@android:anim/accelerate_interpolator"-->
<!--android:fromXScale="1.0"-->
<!--android:toXScale="1.0"-->
<!--android:fromYScale="0.0"-->
<!--android:toYScale="1.0"-->
<!--android:pivotX="0%"-->
<!--android:pivotY="100%"-->
<!--android:fillAfter="false"-->
<!--android:duration="400"/>-->
<translate
android:fromXDelta="800"
android:toXDelta="0"
android:duration="400"/>
</set>dialog_exit_anim2.xml 左侧退出
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--<scale-->
<!--android:interpolator="@android:anim/accelerate_interpolator"-->
<!--android:fromXScale="1.0"-->
<!--android:toXScale="1.0"-->
<!--android:fromYScale="0.0"-->
<!--android:toYScale="1.0"-->
<!--android:pivotX="0%"-->
<!--android:pivotY="100%"-->
<!--android:fillAfter="false"-->
<!--android:duration="400"/>-->
<translate
android:fromXDelta="0"
android:toXDelta="800"
android:duration="400"/>
</set>动画2：
dialog_enter_anim.xml 从底部向上展开
<?xml version="1.0" encoding="utf-8"?>
<!-- 弹出时动画 -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:interpolator="@android:anim/accelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:pivotX="0%"
android:pivotY="100%"
android:fillAfter="false"
android:duration="400"/>
</set>dialog_exit_anim.xml 从顶部向下缩小退出
<?xml version="1.0" encoding="utf-8"?>
<!-- 退出时动画效果 -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:interpolator="@android:anim/accelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="1.0"
android:fromYScale="1.0"
android:toYScale="0.0"
android:pivotX="0%"
android:pivotY="100%"
android:fillAfter="false"
android:duration="400"/>
</set>动画3 从底部弹出，然后原路退出动画
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
android:interpolator="@android:anim/decelerate_interpolator">
<!--减速度加速器-->
<translate
android:duration="250"
android:fromYDelta="100%"
android:toYDelta="0"/>
</set>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
android:interpolator="@android:anim/accelerate_interpolator">
<!--加速度插值器-->
<translate
android:duration="250"
android:fromYDelta="0"
android:startOffset="100"
android:toYDelta="100%"/>
</set>
动画4 渐变动画
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="10000"/>
</set><?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="2000"/>
</set>动画5 图一PopupWindow弹框动画效果：
pop_show_anim.xml：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:fillEnabled="true" >
<scale
android:duration="200"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:pivotX="50%"
android:pivotY="0%"
android:toXScale="1.0"
android:toYScale="1.0" >
</scale>
<alpha
android:duration="180"
android:fromAlpha="0.0"
android:toAlpha="1.0" />
</set>pop_hide_anim.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillEnabled="true"
android:fillAfter="true">
<scale
android:duration="200"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:pivotX="50%"
android:pivotY="0%"
android:toXScale="1.0"
android:toYScale="0.0" >
</scale>
<alpha
android:duration="180"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
</set>执行代码：
/**
* 初始化popupwindow
*/
private void initPop(final TextView textView) {
mlistView = new ListView(this);
popDataAdapter = new ArrayAdapter<>(this, R.layout.popup_text_item, popData);
mlistView.setAdapter(popDataAdapter);
mlistView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
textView.setText(popData.get(position));
//选完之后关闭pop
popupWindow.dismiss();
isShowR = false;
ivArrowR.setImageResource(R.mipmap.arrow_down);
}
});
popupWindow = new PopupWindow(mlistView,rlStartTime.getWidth(), ActionBar.LayoutParams.WRAP_CONTENT, true);
popupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
@Override
public void onDismiss() {
popupWindow.dismiss();
isShowL = false;
isShowR = false;
ivArrowL.setImageResource(R.mipmap.arrow_down);
ivArrowR.setImageResource(R.mipmap.arrow_down);
}
});
popupWindow.setBackgroundDrawable(ContextCompat.getDrawable(this, R.drawable.shape_black));
popupWindow.setAnimationStyle(R.style.popmenu_animation); //动画
popupWindow.setFocusable(true);
popupWindow.setOutsideTouchable(true); //点击pop外消失
}style设置动画：
<style name="popmenu_animation" parent="android:Animation">
<item name="android:windowEnterAnimation">@anim/pop_show_show</item>
<item name="android:windowExitAnimation">@anim/pop_show_hide</item>
</style>动画6.透明渐变动画，从无到有渐变：
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fillAfter="false"
android:fillBefore="true"
android:fillEnabled="true"
android:fromAlpha="0.0"
android:repeatCount="0"
android:repeatMode="restart"
android:startOffset="0"
android:toAlpha="1.0">
</alpha>动画7.如图二所示
1.执行代码：
Animation topAnim = AnimationUtils.loadAnimation(
AnimationTestActivity.this, R.anim.top_enter);
Animation bottomAnim = AnimationUtils.loadAnimation(
AnimationTestActivity.this, R.anim.bottom_enter);
tvTop.startAnimation(topAnim);
tvBottom.setAnimation(bottomAnim);
tvTop.setVisibility(View.VISIBLE);
tvBottom.setVisibility(View.VISIBLE);top_enter.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<!--顶部弹出动画-->
<translate
android:duration="250"
android:toYDelta="0%"
android:fillAfter="true"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromYDelta="-100%" />
</set>bottom_enter.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<!--底部弹出动画-->
<translate
android:duration="250"
android:toYDelta="0%"
android:fillAfter="true"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromYDelta="100%" />
</set>
三.布局动画--LayoutAnimation:（Android ListView item项 显示动画）
layout_item_anim_set_in.xml
1.通过Java代码来定义LayoutAnimation实现动画：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:interpolator="@android:anim/accelerate_interpolator"
android:shareInterpolator="true">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"/>
<translate
android:fromXDelta="500"
android:toXDelta="0"/>
</set>在代码中执行：
private void setLayoutAnimation() {
Animation animation = AnimationUtils.loadAnimation(this, R.anim.layout_item_anim_set_in);
LayoutAnimationController controller = new LayoutAnimationController(animation);
controller.setDelay(0.5f);
controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
mListView.setLayoutAnimation(controller);
}2.使用xml代码来定义LayoutAnimation效果：
layout_anim_qc.xml
<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation
xmlns:android="http://schemas.android.com/apk/res/android"
android:animation="@anim/layout_item_anim_set_in"
android:animationOrder="normal"
android:delay="0.5">
</layoutAnimation>布局中设置：
<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#ccc"
android:dividerHeight="1dp"
android:layoutAnimation="@anim/layout_anim_qc"
android:listSelector="?android:attr/selectableItemBackground"/>3.说明：
setDelay()方法以及android:delay属性表示子View动画显示的延迟时间比例。比如动画执行时间是300ms，延迟比例是0.5，那么延迟时间就是150ms，在Listview中，第一个item在延迟150ms开始动画后，第二个在300ms后开始动画，第三个在450ms后开始，以此类推。
setOder()方法以及android:animationOrder表示动画执行的顺序类型，共有三种：normal表示子View按顺序显示，reverse表示子View按逆序显示，random表示子View随机先后显示。
android:animation="@anim/layout_item_anim_set_in"表示所引用的xml动画。
五.一个不错的带有弹性的动画效果：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:interpolator="@android:anim/bounce_interpolator">
<translate
android:fromYDelta="-50%p"
android:toYDelta="0%"/>
<scale
android:fromXScale="0.0"
android:fromYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.0"
android:toYScale="1.0"/>
<alpha
android:fromAlpha="0.5"
android:toAlpha="1"/>
</set>
扫一扫
176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
