前言 上一篇简单说了Android中的补间动画、帧动画、属性动画,今天具体结合demo来看一下补间动画和帧动画(可以算补间动画的一种),它们都可以在代码或xml中实现。下面先来看补间动画。
补间动画
AlphaAnimation
首先写好布局 activity_alpha_animation.xml
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.ming.mydemo.ui.AlphaAnimationActivity"> <Button android:id="@+id/btnCodeStart" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="开始(代码)" android:textAllCaps="false" android:layout_alignParentTop="true" android:layout_alignParentStart="true" /> <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" app:srcCompat="@mipmap/logo" /> <Button android:id="@+id/btnXmlStart" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAllCaps="false" android:layout_alignParentEnd="true" android:layout_alignParentTop="true" android:text="开始(Xml)" /> <Button android:id="@+id/btnClear" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:textAllCaps="false" android:layout_centerHorizontal="true" android:text="Clear" /></RelativeLayout>对应的AlphaAnimationActivity.java 代码写动画并启动
//AnimationSet可以存放一组动画,addAnimation添加, // 参数true表示其中的动画是否使用AnimationSet的Interpolator(插值器) //Interpolator(插值器):插值器定义动画的变化率。 这允许基本动画效果(alpha,scale,translate, // rotate)加速,减速,重复等。 animationSet = new AnimationSet(false); //参数是透明度从1f到0.1f alphaAnimation = new AlphaAnimation(1f, 0.1f); //设置动画时间 alphaAnimation.setDuration(2000); //设置动画的播放次数,这里 INFINITE = -1表示一直循环,可以直接设置几次(1次、2次) alphaAnimation.setRepeatCount(Animation.INFINITE); //设置动画循环模式Animation.REVERSE表示倒序1-0.1-1-0.1 ... // Animation.RESTART表示重新1-0.1,1-0.1 ... alphaAnimation.setRepeatMode(Animation.REVERSE); //设置插值器,其中变化率快速开始然后减速。 alphaAnimation.setInterpolator(new DecelerateInterpolator()); //将动画设置到imageView imageView.setAnimation(alphaAnimation); //将动画添加到animationSet animationSet.addAnimation(alphaAnimation); //启动动画 imageView.startAnimation(animationSet);xml写动画
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <alpha android:duration="2000" android:fromAlpha="1.0" android:toAlpha="0.1" android:repeatMode="reverse" android:repeatCount="infinite" android:interpolator="@android:anim/decelerate_interpolator" /></set>对应的加载和启动方法:
animation = AnimationUtils.loadAnimation(AlphaAnimationActivity.this, R.anim.alpha_img); imageView.setAnimation(animation); imageView.startAnimation(animation);效果图:
下面快速看另外几种补间动画
RotateAnimation
大同小异,重点看 new RotateAnimation(0.0f,100.f)的参数,可以结合官网API设置看下效果
animationSet = new AnimationSet(false); rotateAnimation = new RotateAnimation(0.0f,100.f); rotateAnimation.setDuration(2000); rotateAnimation.setRepeatMode(Animation.REVERSE); rotateAnimation.setRepeatCount(Animation.INFINITE); rotateAnimation.setInterpolator(new DecelerateInterpolator()); animationSet.addAnimation(rotateAnimation); imageView.startAnimation(animationSet);xml:
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <rotate android:duration="2000" android:fromDegrees="50.0" android:toDegrees="100.0" android:repeatMode="reverse" android:repeatCount="infinite" android:interpolator="@android:anim/decelerate_interpolator" /></set>效果图:
ScaleAnimation 代码实现:
animationSet = new AnimationSet(false); scaleAnimation = new ScaleAnimation(0.0f,2.0f,0.0f,2.0f); scaleAnimation.setDuration(2000); scaleAnimation.setRepeatMode(Animation.REVERSE); scaleAnimation.setRepeatCount(Animation.INFINITE); scaleAnimation.setInterpolator(new DecelerateInterpolator()); animationSet.addAnimation(scaleAnimation); imageView.startAnimation(animationSet);xml:
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <scale android:duration="2000" android:fromXScale="0.0" android:toXScale="2.0" android:fromYScale="0.0" android:toYScale="2.0" android:repeatMode="reverse" android:repeatCount="infinite" android:interpolator="@android:anim/decelerate_interpolator" /></set>效果图:
TranslateAnimation 代码实现:
animationSet = new AnimationSet(false); translateAnimation = new TranslateAnimation(0.0f,200.0f,0.0f,200.0f); translateAnimation.setDuration(1000); translateAnimation.setRepeatMode(Animation.REVERSE); translateAnimation.setRepeatCount(Animation.INFINITE); translateAnimation.setInterpolator(new DecelerateInterpolator()); animationSet.addAnimation(translateAnimation); imageView.startAnimation(animationSet);xml:
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <translate android:duration="1000" android:fromXDelta="0.0" android:toXDelta="200.0" android:fromYDelta="0.0" android:toYDelta="200.0" android:repeatMode="reverse" android:repeatCount="infinite" android:interpolator="@android:anim/decelerate_interpolator" /></set>效果图:
以上的套路都是差不多类似,很好理解。那么如果把以上动画组合起来,又是什么效果呢?
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <alpha android:duration="2000" android:fromAlpha="1.0" android:toAlpha="0.1" android:repeatMode="reverse" android:repeatCount="infinite" android:interpolator="@android:anim/decelerate_interpolator" /> <rotate android:duration="2000" android:fromDegrees="50.0" android:toDegrees="100.0" android:repeatMode="reverse" android:repeatCount="infinite" android:interpolator="@android:anim/decelerate_interpolator" /> <scale android:duration="2000" android:fromXScale="0.0" android:toXScale="2.0" android:fromYScale="0.0" android:toYScale="2.0" android:repeatMode="reverse" android:repeatCount="infinite" android:interpolator="@android:anim/decelerate_interpolator" /> <translate android:duration="1000" android:fromXDelta="0.0" android:toXDelta="200.0" android:fromYDelta="0.0" android:toYDelta="200.0" android:repeatMode="reverse" android:repeatCount="infinite" android:interpolator="@android:anim/decelerate_interpolator" /></set>显示效果:
下面来看下帧动画: AnimationDrawable
结合APP中常用的loading,看下效果
<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <!-- duration为每张逐帧播放间隔,oneshot 为false 代表循环播放,设置为true 即播放一次即停止。 --> <item android:duration="100" android:drawable="@mipmap/loading_1"></item> <item android:duration="100" android:drawable="@mipmap/loading_2"></item> <item android:duration="100" android:drawable="@mipmap/loading_3"></item> <item android:duration="100" android:drawable="@mipmap/loading_4"></item> <item android:duration="100" android:drawable="@mipmap/loading_5"></item> <item android:duration="100" android:drawable="@mipmap/loading_6"></item> <item android:duration="100" android:drawable="@mipmap/loading_7"></item> <item android:duration="100" android:drawable="@mipmap/loading_8"></item> <item android:duration="100" android:drawable="@mipmap/loading_9"></item></animation-list>imageView.setBackgroundResource(R.drawable.loading); AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getBackground(); animationDrawable.start();效果:
项目开发中,常用到的底部弹出一个布局、activity的进入和退出、下拉刷新、图片渐变等等,补间动画基本可以满足我们的需求。也可以看一下市场上的APP,来思考怎么用代码去实现,同时结合自己项目,自由发挥吧!
demo代码
新闻热点
疑难解答