在Android中主要有两种类型的动画,View Animation(视图动画)和Proerty Animation(属性动画)。其中,View Animation包括Tween Animation(补间动画)和Frame Animation(逐帧动画)。Proerty Animation包括Value Animation 和Object Animation 。
Android的视图动画由五钟类型组成:alpha,scale,translate,rotate,set。
标签
标签 | 含义 |
---|---|
alpha | 渐变透明度 |
scale | 渐变尺寸伸缩 |
translate | 位置变换移动 |
rotate | 旋转变换动画 |
set | 动画集 |
通用的标签属性
标签属性 | 含义 |
---|---|
fillAfter | 动画结束时是否保持动画结束时的状态 |
fillBefore | 动画结束时是否还原到初始状态 默认ture |
fillEnabled | 同fillBefore |
repeatCount | 动画重复次数 |
repeatMode | 动画重复的类型 restart:重放 reverse:倒放 |
interpolator | 设置插值器 |
duration | 动画运行的时间(以毫秒为单位) |
startOffset | 动画运行前的延迟(以毫秒为单位) |
zAdjustment | 允许在动画播放期间,调整播放内容在Z轴方向的顺序。 ①normal(0):正在播放的动画内容保持当前的Z轴顺序, ②top(1):在动画播放期间,强制把当前播放的内容放到其他内容的上面; ③bottom(-1):在动画播放期间,强制把当前播放的内容放到其他内容之下 |
background | 动画背后的特殊背景颜色 |
detachWallpaper | 窗口动画的特殊选项:如果此窗口位于墙纸之上,则不要使用它设置墙纸动画。 |
showWallpaper | 窗口动画的特殊选项:运行此动画时显示后面的墙纸。 |
hasRoundedCorners | 窗口动画的特殊选项:窗口是否应具有圆角 |
Alpha的标签属性
标签属性 | 含义 |
---|---|
fromAlpha | 开始的透明度 |
toAlpha | 结束的透明度 |
示例:
<?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="3000"
android:fillBefore="false"
>
</alpha>
Scale的标签属性
标签属性 | 含义 |
---|---|
fromXScale | 动画开始,控件在X轴上相对自身的缩放比例 |
toXScale | 动画结束,控件在X轴上相对自身的缩放比例 |
fromYScale | 动画开始,控件在Y轴上相对自身的缩放比例 |
toYScale | 动画结束,控件在Y轴上相对自身的缩放比例 |
pivotX | 缩放起始点,X坐标 可取50,50%,50%p 表示x=50,控件的一半,父控件的一半的数值 |
pivotY | 缩放起始点,Y坐标 可取50,50%,50%p 表示y=50,控件的一半,父控件的一半的数值 |
示例
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="0.0"
android:toXScale="2.0"
android:fromYScale="0.0"
android:toYScale="2.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="700"
android:fillAfter="true"
android:fillBefore="false"
android:fillEnabled="false"
android:repeatCount="2"
android:repeatMode="reverse"
/>
Translate的标签属性
标签属性 | 含义 |
---|---|
fromXDelta | 起始点X的坐标 可取50,50%,50%p |
toXDelta | 终点X的坐标 可取50,50%,50%p |
fromYDelta | 起始点Y的坐标 可取50,50%,50%p |
toYDelta | 终点Y的坐标 可取50,50%,50%p |
示例:
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="0"
android:fromYDelta="0"
android:toYDelta="500"
android:duration="3000"
android:fillAfter="true"
>
</translate>
Rotate标签属性
标签属性 | 含义 |
---|---|
fromDegrees | 动画开始旋转的角度 |
toDegrees | 动画结束旋转的角度 |
pivotX | 旋转中心点X的位置 可取50,50%,50%p 表示X=50,控件的一半,父控件的一半的数值 |
pivotY | 旋转中心点Y的位置 可取50,50%,50%p 表示Y=50,控件的一半,父控件的一半的数值 |
示例
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="-720"
android:pivotX="50%"
android:pivotY="50%"
android:duration="3000"
android:fillAfter="true"
>
</rotate>
Set标签属性
标签属性 | 含义 |
---|---|
shareInterpolator | 共享插值器 |
fillBefore | 同上 |
fillAfter | 同上 |
duration | 同上 |
startOffset | 同上 |
repeatMode | 同上 |
示例
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000"
android:fillAfter="true">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"/>
<scale
android:fromXScale="0.0"
android:toXScale="2.0"
android:fromYScale="0.0"
android:toYScale="2.0"
android:pivotY="50%"
android:pivotX="50%"
/>
<rotate
android:fromDegrees="0"
android:toDegrees="720"
android:pivotX="50%"
android:pivotY="50%"
/>
</set>
alpha:
AlphaAnimation alphaAnimation = new AlphaAnimation(1.0F,0.1F);
alphaAnimation.setDuration(3000);
alphaAnimation.setFillBefore(true);
findViewById(R.id.tv).startAnimation(alphaAnimation);
scale:
ScaleAnimation scaleAnimation = new ScaleAnimation(0.0F,1.4F,0.0F,1.4F,
Animation.RELATIVE_TO_PARENT,0.5F, Animation.RELATIVE_TO_PARENT,0.5F);
scaleAnimation.setDuration(700);
findViewById(R.id.tv).startAnimation(scaleAnimation);
translate:
TranslateAnimation translateAnimation = new TranslateAnimation(Animation.ABSOLUTE,0,Animation.ABSOLUTE,-80,Animation.ABSOLUTE,0,Animation.ABSOLUTE,-80);
translateAnimation.setDuration(2000);
translateAnimation.setFillBefore(true);
findViewById(R.id.tv).startAnimation(translateAnimation);
rotate:
RotateAnimation rotateAnimation = new RotateAnimation(0,-650,Animation.RELATIVE_TO_SELF,0.5F,Animation.RELATIVE_TO_SELF,0.5F);
rotateAnimation.setDuration(2000);
rotateAnimation.setFillBefore(true);
findViewById(R.id.tv).startAnimation(rotateAnimation);
set:
RotateAnimation rotateAnimation = new RotateAnimation(0,-650,Animation.RELATIVE_TO_SELF,0.5F,Animation.RELATIVE_TO_SELF,0.5F);
TranslateAnimation translateAnimation = new TranslateAnimation(Animation.ABSOLUTE,0,Animation.ABSOLUTE,-80,Animation.ABSOLUTE,0,Animation.ABSOLUTE,-80);
AnimationSet animationSet = new AnimationSet(true);
animationSet.addAnimation(rotateAnimation);
animationSet.addAnimation(translateAnimation);
animationSet.setDuration(3000);
animationSet.setFillAfter(true);
findViewById(R.id.tv).startAnimation(animationSet);
从上面的例子来看,基本上View Animation动画都可以根据里面的构造方法进行简单的创建,实际使用上并不难理解。
xml:
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="@drawable/image01" android:duration="500"/>
<item android:drawable="@drawable/image02" android:duration="500"/>
<item android:drawable="@drawable/image03" android:duration="500"/>
</animation-list>
java:
imageView_2 = findViewById(R.id.image_2);
AnimationDrawable animationDrawable1 = new AnimationDrawable();
animationDrawable1.addFrame(getResources().getDrawable(R.drawable.iron_1 ),200);
animationDrawable1.addFrame(getResources().getDrawable(R.drawable.iron_2 ),200);
//...
animationDrawable1.setOneShot(true);
imageView_2.setImageDrawable(animationDrawable1);
animationDrawable1.start();
运行:
Button button = (Button) findViewById(R.id.bt_001);
button.setBackgroundResource(R.drawable.frame_animation);//把Drawable设置为button的背景
//拿到这个我们定义的Drawable,实际也就是AnimationDrawable
AnimationDrawable animationDrawable = (AnimationDrawable) button.getBackground();
animationDrawable.start();//开启动画
由上可见,逐帧动画简单来说就是一帧一帧地播放图片,总体来说比较简单。值得注意的是由于是一张张图片进行播放,所以建议图片不要太多太大。
从上面的视图动画的效果来看,我们已经能够实现动画的播放,但是有时候我们看见别人的动画播放的时候,播放的速度并不是线性的,而是有的开始快然后慢慢减速到停止。这种又是如何实现的呢?这就是这一章主角–Interpolator(插值器)
插值器的设置可以通过代码setInterpolator()设置可以通过xml中的interpolator标签属性进行设置。下面我们来看看Android都有哪些插值器供我们选择。
插值器 | xml引用 | 效果 |
---|---|---|
AccelerateDecelerateInterpolator | @android:anim/accelerate_decelerate_interpolator | 加速减速插值器 |
AccelerateInterpolator | @android:anim/accelerate_interpolator | 加速插值器 |
DecelerateInterpolator | @android:anim/decelerate_interpolator | 减速插值器 |
BounceInterpolator | @android:anim/bounce_interpolator | 弹跳插值器 |
OvershootInterpolator | @android:anim/overshoot_interpolator | 结束偏移插值器 |
AnticipateInterpolator | @android:anim/anticipate_interpolator | 初始偏移插值器 |
LinearInterpolator | @android:anim/linear_interpolator | 线性差值器 |
AnticipateOvershootInterpolator | @android:anim/anticipate_overshoot_interpolator | 初始结束都偏移插值器 |
CycleInterpolator | @android:anim/cycle_interpolator | 循环插值器 |