Android 补间动画

2024-01-26 20:06:46

文章目录

补间动画

概述

补间动画指定义动画开始样式和结束样式，而动画变化的“中间帧”则有系统计算补齐。

补间动画分类

  • TranslateAnimation 平移渐变动画，对应translate标签
  • ScaleAnimation 缩放渐变动画，对应scale标签
  • RotateAnimation 旋转渐变动画，对应scale标签
  • AlphaAnimation 透明度动画，对应alpha标签
  • AnimationSet 组合渐变动画，对应set标签

公用属性方法说明

XML属性

android:duration：动画持续时间（ms），必须设置，动画才有效果
android:startOffset：动画延迟开始时间（ms）
android:fillBefore：动画播放完后，视图是否会停留在动画开始的状态，默认为true
android:fillAfter：动画播放完后，视图是否会停留在动画结束的状态，优先于fillBefore值，默认为false
android:fillEnabled：是否应用fillBefore值，对fillAfter值无影响，默认为true

Java属性

setStartOffset(long startOffset)：设置开始的延迟的时间(单位ms)
setFillBefore(boolean fillBefore)：设置最终是否固定在起始状态
setFillAfter(boolean fillAfter)：设置最终是否固定在最后的状态
setAnimationListener(AnimationListener listener)：设置动画监听
view.startAnimation(animation)：开始
view.clearAnimation(aniamtion)：清除

数值设置说明：

  • 设置为数字时（如50），轴点为View的左上角的原点在x方向和y方向加上50px的点。在Java代码里面设置这个参数的对应参数是Animation.ABSOLUTE。

  • 设置为百分比时（如50%），轴点为View的左上角的原点在x方向加上自身宽度50%和y方向自身高度50%的点。在Java代码里面设置这个参数的对应参数是Animation.RELATIVE_TO_SELF。

  • 设置为百分比p时（如50%p），轴点为View的左上角的原点在x方向加上父控件宽度50%和y方向父控件高度50%的点。在Java代码里面设置这个参数的对应参数是Animation.RELATIVE_TO_PARENT

平移动画 TranslateAnimation

属性说明

fromXDelta/fromYDelta：动画开始X/Y坐标
toXDelta/toYDelta：动画结束X/Y坐标

XML实现

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:duration="2000">
    <translate
               android:fromXDelta="0"
               android:fromYDelta="0"
               android:toXDelta="100%"
               android:toYDelta="100%" />
</set>

Animation animation = AnimationUtils.loadAnimation(context, R.anim.anim_translate);
logo.startAnimation(animation);

Java实现

TranslateAnimation animation = new TranslateAnimation(
    Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 1f,
    Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 1f
);
animation.setDuration(2000);
logo.startAnimation(animation);

缩放动画 ScaleAnimation

属性说明

fromXScale/fromYScale：开始缩放比例
toXScale/fromYScale：结束缩放比例
pivotX/pivotY：缩放的中心点坐标

XML实现

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:duration="2000"
     android:fillAfter="true">
    <scale
           android:fromXScale="0.5"
           android:fromYScale="0.5"
           android:pivotX="50%"
           android:pivotY="50%"
           android:toXScale="1.5"
           android:toYScale="1.5" />
</set>

Animation animation = AnimationUtils.loadAnimation(context, R.anim.anim_scale);
logo.startAnimation(animation);

Java实现

ScaleAnimation animation = new ScaleAnimation(
    0.5f, 1.5f, 0.5f, 1.5f,
    Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f
);
animation.setDuration(2000);
logo.startAnimation(animation);

旋转动画 RotateAnimation

属性说明

fromDegress/toDegress：旋转的开始/结束角度
repeatCount：旋转次数，默认为0，代表一次；设置其他值如3，则表示旋转4次；值为-1，则表示一直旋转
repeatMode：设置重复模式，默认为retart，当repeatCount大于0时，可以设置为reverse表示反方向动画

XML实现

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:duration="2000"
     android:fillAfter="true">
    <rotate
            android:fromDegrees="0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:repeatCount="3"
            android:toDegrees="360" />
</set>

Animation animation = AnimationUtils.loadAnimation(context, R.anim.anim_rotate);
logo.startAnimation(animation);

Java实现

RotateAnimation animation = new RotateAnimation(
    0, 360f,
    Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 05f
);
animation.setRepeatCount(3);
animation.setDuration(2000);
logo.startAnimation(animation);

透明动画 AlphaAnimation

属性说明

fromAlpha/toAlpha：开始/结束透明度
透明度范围：0-1

XML实现

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:duration="2000"
     android:fillAfter="true">
    <alpha
           android:fromAlpha="1.0"
           android:toAlpha="0.1" />
</set>

Animation animation = AnimationUtils.loadAnimation(context, R.anim.anim_alpha);
logo.startAnimation(animation);

Java实现

AlphaAnimation animation = new AlphaAnimation(1.0f, 0.1f);
animation.setDuration(2000);
logo.startAnimation(animation);

组合动画 AnimationSet

XML实现

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:duration="2000"
     android:fillAfter="true">
    <alpha
           android:fromAlpha="1.0"
           android:toAlpha="0.1" />
    <rotate
            android:fromDegrees="0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:repeatCount="3"
            android:toDegrees="360" />
    <scale
           android:fromXScale="0.5"
           android:fromYScale="0.5"
           android:pivotX="50%"
           android:pivotY="50%"
           android:toXScale="1.5"
           android:toYScale="1.5" />
    <translate
               android:fromXDelta="0"
               android:fromYDelta="0"
               android:toXDelta="100%"
               android:toYDelta="100%" />
</set>

logo.clearAnimation();
Animation animation = AnimationUtils.loadAnimation(context, R.anim.anim_set);
logo.setAnimation(animation);

Java实现

AnimationSet animationSet = new AnimationSet(false);
ScaleAnimation anim1 = new ScaleAnimation(
    0f, 1f, 0f, 1f,
    Animation.RELATIVE_TO_SELF, 0.5f,
    Animation.RELATIVE_TO_SELF, 0.5f);
RotateAnimation anim2 = new RotateAnimation(
    0f, 360f,
    Animation.RELATIVE_TO_SELF, 0.5f,
    Animation.RELATIVE_TO_SELF, 0.5f);
AlphaAnimation anim3 = new AlphaAnimation(0f, 1f);
animationSet.addAnimation(anim1);
animationSet.addAnimation(anim2);
animationSet.addAnimation(anim3);
animationSet.setDuration(2000);
logo.startAnimation(animationSet);

Interpolator

来控制动画的变化速度，而Android中已经为我们提供了五个可供选择的实现类

  • LinearInterpolator：动画以均匀的速度改变
  • AccelerateInterpolator：在动画开始的地方改变速度较慢，然后开始加速
  • AccelerateDecelerateInterpolator：在动画开始、结束的地方改变速度较慢，中间时加速
  • CycleInterpolator：动画循环播放特定次数，变化速度按正弦曲线改变： Math.sin(2 * mCycles * Math.PI * input)
  • DecelerateInterpolator：在动画开始的地方改变速度较快，然后开始减速
  • AnticipateInterpolator：反向，先向相反方向改变一段再加速播放
  • AnticipateOvershootInterpolator：开始的时候向后然后向前甩一定值后返回最后的值
  • BounceInterpolator： 跳跃，快到目的值时值会跳跃，如目的值100，后面的值可能依次为85，77，70，80，90，100
  • OvershottInterpolator：回弹，最后超出目的值然后缓慢改变到目的值

监听动画状态

  • **setAnimationListener(new AnimationListener())**方法，重写下面的三个方法：
  • onAnimationStart()：动画开始
  • onAnimtaionRepeat()：动画重复
  • onAnimationEnd()：动画结束

代码下载

上一篇：Java 生成带Logo和文字描述的二维码


下一篇：CSS 实现logo图像链接替换文本链接