Android View动画整理

View 动画相关内容可参考官网 动画资源

此前也有写 View 动画相关的内容,但都只是记录代码,没有特别分析。以此篇作为汇总、整理、分析。

Android View 动画有4中,分别是

  • 平移动画 TranslateAnimation
  • 缩放动画 ScaleAnimation
  • 旋转动画 RotateAnimation
  • 透明度动画 AlphaAnimation

View 动画可以单独使用,也可以一起使用,一起使用就叫复合动画。

实现 View 动画有 2 种方式,java 方式和 xml 方式。

Demo 图说明,动画作用在图片上。图片显示在左上角,图片右侧和下方的线是为了方便看出 View 动画前后的位置、大小对比,无实际作用。
在这里插入图片描述

平移动画 TranslateAnimation

对 View 做水平或者竖直方向上的移动。

java 方式

import android.view.animation.TranslateAnimation;

TranslateAnimation translateAnimation = new TranslateAnimation(0,imageView.getWidth(),0,0);
translateAnimation.setDuration(3000);//动画时长
translateAnimation.setFillAfter(true);//true :view停留在动画结束的地方。false :动画结束后 view 返回原位
imageView.startAnimation(translateAnimation);

xml 方式

用 AS 可以很方便地创建 anim 目录和动画文件。
在这里插入图片描述

在 res/anim/view_anim_translate.xml 创建文件,写入

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <!--
    android:fromXDelta
    Float or percentage. 移动起始点的x坐标. 表示形式有三种:
    1 相对于自己的左边界的距离,单位像素值。(例如 "5")
    2 相对于自己的左边界的距离与自身宽度的百分比。(例如  "5%")
    3 相对于父View的左边界的距离与父View宽度的百分比。(例如 "5%p")

    android:toXDelta
    Float or percentage. 移动结束点的x坐标. 表现形式同上

    android:fromYDelta
    Float or percentage. 移动起始点的y坐标. 表示形式有三种:
    1 相对于自己的上边界的距离,单位像素值。(例如 "5")
    2 相对于自己的上边界的距离与自身高度的百分比。(例如  "5%")
    3 相对于父View的上边界的距离与父View高度的百分比。(例如 "5%p")

    android:toYDelta
    Float or percentage. 移动结束点的y坐标. 表现形式同上
    -->

    <translate
        android:duration="3000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="800"
        android:toYDelta="0"/>
</set>

然后通过 AnimationUtils 实现,

Animation animTran = AnimationUtils.loadAnimation(ViewAnimationActivity.this, R.anim.view_anim_translate);
animTran.setFillAfter(true);
imageView.startAnimation(animTran);

实现效果:View 向右平移自身宽度的距离。
在这里插入图片描述

缩放动画 ScaleAnimation

对 View 进行缩放操作。

java 方式

放大为 1.5 倍用 1.5f ,缩小为 0.5 倍用 0.5f ,很好理解。

import android.view.animation.AccelerateInterpolator;
import android.view.animation.ScaleAnimation;

ScaleAnimation scaleAnimation = new ScaleAnimation(1 ,1.5f ,1 ,1.5f);// X轴 Y轴都放大 1.5 倍
scaleAnimation.setDuration(3000);
scaleAnimation.setFillAfter(true);
scaleAnimation.setInterpolator(new AccelerateInterpolator());// 设置动画插值器,用来控制动画速度,这是加速插值器,动画速度会越来越快
imageView.startAnimation(scaleAnimation);

方法 public ScaleAnimation(float fromX, float toX, float fromY, float toY) {} 默认缩放总中心是 (0,0) ,即 View 的左上角。
方法 public ScaleAnimation(float fromX, float toX, float fromY, float toY,float pivotX, float pivotY) {} 最后两个参数指定缩放中心点。

缩放中心点不同,缩放效果是不同的。
如,
效果1 ,new ScaleAnimation(1 ,0.5f ,1 , 0.5f);
在这里插入图片描述

效果2,new ScaleAnimation(1 ,0.5f ,1 ,0.5f, (float) 200, (float) 100);
在这里插入图片描述
效果3,new ScaleAnimation(1 ,0.5f ,1 ,0.5f, (float) imageView.getWidth(), (float) imageView.getHeight());
在这里插入图片描述

xml 方式

创建 res/anim/view_anim_translate.xml 文件,

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <!--
        android:fromXScale
        Float. 水平方向缩放比例的初始值,1.0是没有变化。

        android:toXScale
        Float. 水平方向缩放比例的结束值,1.0是没有变化。

        android:fromYScale
        Float. 竖直方向缩放比例的初始值,1.0是没有变化。

        android:toYScale
        Float. 竖直方向缩放比例的结束值,1.0是没有变化。

        android:pivotX
        Float. 缩放中心点的x坐标

        android:pivotY
        Float. 缩放中心点的y坐标
    -->

    <scale
        android:duration="3000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.5"
        android:toYScale="1.5" />
</set>

然后通过 AnimationUtils 实现,

Animation animScale = AnimationUtils.loadAnimation(ViewAnimationActivity.this, R.anim.view_anim_scale);
animScale.setFillAfter(true);
imageView.startAnimation(animScale);

实现效果:View 在竖直和水平方向上都放大 1.5 倍。
在这里插入图片描述

旋转动画 RotateAnimation

对 View 进行旋转。

默认以 View 的左上角为中心点旋转,也可以指定旋转中心的坐标。旋转中心的坐标不同,旋转效果也是不一样的。

java 方式

import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.ScaleAnimation;

RotateAnimation rotateAnimation = new RotateAnimation(0,180, imageView.getWidth(), imageView.getHeight());
rotateAnimation.setFillAfter(true);
rotateAnimation.setDuration(3000);
rotateAnimation.setRepeatCount(1);//重复1次
rotateAnimation.setInterpolator(new AccelerateDecelerateInterpolator());// 设置动画插值起,用来控制动画速度,这是加速减速插值器,动画速度先快后慢
imageView.startAnimation(rotateAnimation);

xml 方式

创建 res/anim/view_anim_rotate.xml 文件,

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <!--
    android:fromDegrees
    Float. 旋转初始的角度。
    android:toDegrees
    Float. 旋转结束的角度。
    android:pivotX
    Float or percentage. 旋转中心点x坐标,表示形式有三种:
    1 相对于自己的左边界的距离,单位像素值。(例如 "5")
    2 相对于自己的左边界的距离与自身宽度的百分比。(例如 "5%")
    3 相对于父View的左边界的距离与父View宽度的百分比。(例如 "5%p")
    android:pivotY
    Float or percentage. 旋转中心点y坐标,表示形式有三种:
    1 相对于自己的上边界的距离,单位像素值。(例如 "5")
    2 相对于自己的上边界的距离与自身宽度的百分比。(例如 "5%")
    3 相对于父View的上边界的距离与父View高度的百分比。(例如 "5%p")
    -->

    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="100%"
        android:pivotY="100%"
        android:toDegrees="+180"
        android:repeatCount="1" />
</set>

然后通过 AnimationUtils 实现,

Animation animRotate = AnimationUtils.loadAnimation(ViewAnimationActivity.this, R.anim.view_anim_rotate);
animRotate.setFillAfter(false);
imageView.startAnimation(animRotate);

实现效果:绕着 View 的右下角旋转 180° ,重复1次。
在这里插入图片描述

透明度动画 AlphaAnimation

对 View 进行透明度操作。

java 方式

import android.view.animation.AlphaAnimation;

AlphaAnimation alphaAnim = new AlphaAnimation(1f, 0);
alphaAnim.setDuration(2000);
alphaAnim.setFillAfter(true);
imageView.startAnimation(alphaAnim);

xml 方式

创建 res/anim/view_anim_alpha.xml 文件,

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--
        android:fromAlpha
        Float. 设置透明度的初始值,其中0.0是透明,1.0是不透明的。

        android:toAlpha
        Float. 设置透明度的结束值,其中0.0是透明,1.0是不透明的。
    -->

    <alpha
        android:duration="2000"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>

然后通过 AnimationUtils 实现,

Animation alphaAnimation = AnimationUtils.loadAnimation(ViewAnimationActivity.this, R.anim.view_anim_alpha);
alphaAnimation.setFillAfter(true);
imageView.startAnimation(alphaAnimation);

实现效果:View 变为不透明。
在这里插入图片描述

复合动画

复合动画就是把 View 动画结合使用。也是通过 java 方式和 xml 方式实现。

平移+透明度

import android.view.animation.AnimationSet;

AnimationSet set1 = new AnimationSet(true);
TranslateAnimation tAnimation1 = new TranslateAnimation(0,imageView.getWidth(),0,0);
AlphaAnimation aAnim1 = new AlphaAnimation(1f, 0.2f);

set1.addAnimation(tAnimation1);
set1.addAnimation(aAnim1);
set1.setDuration(2500);
set1.setFillAfter(true);
imageView.startAnimation(set1);

实现效果:View 向右平移自身宽度的距离,透明度逐渐变为 0.2f 。
在这里插入图片描述

平移+缩放

AnimationSet set2 = new AnimationSet(true);
TranslateAnimation tAnimation2 = new TranslateAnimation(0,(float) imageView.getWidth()/4,0,(float) imageView.getHeight()/8);

ScaleAnimation sAnimation2 = new ScaleAnimation(1 ,1.5f ,1 ,1.5f);

set2.addAnimation(tAnimation2);
set2.addAnimation(sAnimation2);
set2.setDuration(2500);
set2.setFillAfter(true);
imageView.startAnimation(set2);

实现效果:View 向右平移自身宽度 1/4 的距离,向下平移自身高度 1/8 的距离,放大 1.5 倍 。
在这里插入图片描述

平移+旋转

AnimationSet set3 = new AnimationSet(true);
TranslateAnimation tAnimation3 = new TranslateAnimation(0,imageView.getWidth(),0,imageView.getHeight());
RotateAnimation rAnimation3 = new RotateAnimation(0,360, imageView.getWidth(), imageView.getHeight());

set3.addAnimation(tAnimation3);
set3.addAnimation(rAnimation3);
set3.setDuration(2500);
set3.setFillAfter(true);
imageView.startAnimation(set3);

实现效果:View 向右平移自身宽度的距离,向下平移自身高度的距离,绕着右下角旋转 360°
在这里插入图片描述

平移+旋转+透明度

java 方式

AnimationSet set4 = new AnimationSet(false);
RotateAnimation rAnimation4 = new RotateAnimation(0,720, (float) imageView.getWidth()/2, (float) imageView.getHeight()/2);
rAnimation4.setInterpolator(new AccelerateDecelerateInterpolator());
rAnimation4.setDuration(3500);

AlphaAnimation aAnim4 = new AlphaAnimation(1f, 0.5f);
aAnim4.setInterpolator(new AccelerateInterpolator());
aAnim4.setDuration(3000);

ScaleAnimation sAnimation4 = new ScaleAnimation(1 ,0.5f ,1 ,0.5f, (float) imageView.getWidth()/2, (float) imageView.getHeight()/2);
sAnimation4.setInterpolator(new LinearInterpolator());
sAnimation4.setDuration(2500);

set4.addAnimation(rAnimation4);
set4.addAnimation(aAnim4);
set4.addAnimation(sAnimation4);
set4.setFillAfter(true);
set4.setStartOffset(500);
mageView.startAnimation(set4);

xml 方式

创建 res/anim/view_anim_set4.xml 文件,

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">

    <rotate
        android:duration="3500"
        android:fromDegrees="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="720" />

    <alpha
        android:duration="3000"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="0.5" />

    <scale
        android:duration="2500"
        android:fromXScale="1"
        android:fromYScale="1"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.5"
        android:toYScale="0.5" />
</set>

然后通过 AnimationUtils 实现,

Animation anim4 = AnimationUtils.loadAnimation(ViewAnimationActivity.this, R.anim.view_anim_set4);
anim4.setFillAfter(true);
imageView.startAnimation(anim4);

实现效果:以 View 的中心旋转 720° ,缩小为 0.5 倍 ,透明度逐渐变为 0.5f 。
在这里插入图片描述

监听动画过程

使用 Animation.setAnimationListener(AnimationListener listener) 方法即可监听动画的开始、结束、重复等过程。

Animation anim4 = AnimationUtils.loadAnimation(ViewAnimationActivity.this, R.anim.view_anim_set4);
                anim4.setFillAfter(true);
                anim4.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {
                        
                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {

                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });
                imageView.startAnimation(anim4);

对点击事件的影响

View 动画对点击事件无影响。

即 View 的大小、位置变化后,点击 View 的原始位置,点击事件还是有的。

如果动画使 View 超出了原始位置,超出的部分,是无法响应点击事件的。

插值器

插值器用来控制动画的执行速度。

通过 Animation.setInterpolator(Interpolator i) 方法可以设置动画的插值器,如

ScaleAnimation scaleAnimation = new ScaleAnimation(1 ,1.5f ,1 ,1.5f);
scaleAnimation.setDuration(3000);
scaleAnimation.setFillAfter(true);
scaleAnimation.setInterpolator(new AccelerateInterpolator());// 设置动画插值器
imageView.startAnimation(scaleAnimation);

也可以直接在动画 xml 文件中指定 android:interpolator

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <scale
        android:duration="3000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.5"
        android:toYScale="1.5" />
</set>

系统预设的插值器有:

插值器说明
AccelerateDecelerateInterpolator开始和结束速度慢,中间加速
AccelerateInterpolator开始慢,逐渐加速
AnticipateInterpolator先反方向执行动画再正方向执行
AnticipateOvershootInterpolatorAnticipateInterpolator 结合 OvershootInterpolator ,先反方向执行动画再正方向执行,到动画终点后继续前进一段距离然后回到动画终点
BounceInterpolator自由落体,到终点后回弹几下再回到终点,类似乒乓球落地效果
CycleInterpolator正弦曲线,先正方向执行动画再反方向执行动画
DecelerateInterpolator开始快,结束慢
LinearInterpolator线性、匀速
OvershootInterpolator动画终点后继续前进一段距离然后回到动画终点
PathInterpolator通过它的构造函数实现贝塞尔曲线
LinearOutSlowInInterpolatorandroidx里的,速度曲线用的贝塞尔曲线,开始速度快,逐渐减速,类似 DecelerateInterpolator 但速度更快
FastOutLinearInInterpolatorandroidx里的,,速度曲线用的贝塞尔曲线,逐渐加速,类似 AccelerateInterpolator 但速度更快
FastOutSlowInInterpolatorandroidx里的,速度曲线用的贝塞尔曲线,先加速再减速,类似 AccelerateDecelerateInterpolator 但速度更快

这些插值器基本满足了日常需求。

效果对比:
在这里插入图片描述
除了 CycleInterpolator ,绿色线是所有动画的终点。

效果对比2:
在这里插入图片描述

自定义插值器

自定义插值器,

继承 BaseInterpolator ,重写 getInterpolation(float input) 方法,

相关继承关系为 BaseInterpolator >> Interpolator >> TimeInterpolator ,

package android.animation;

/**
 * A time interpolator defines the rate of change of an animation. This allows animations
 * to have non-linear motion, such as acceleration and deceleration.
 */
public interface TimeInterpolator {

    /**
     * Maps a value representing the elapsed fraction of an animation to a value that represents
     * the interpolated fraction. This interpolated value is then multiplied by the change in
     * value of an animation to derive the animated value at the current elapsed animation time.
     *
     * @param input A value between 0 and 1.0 indicating our current point
     *        in the animation where 0 represents the start and 1.0 represents
     *        the end
     * @return The interpolation value. This value can be more than 1.0 for
     *         interpolators which overshoot their targets, or less than 0 for
     *         interpolators that undershoot their targets.
     */
    float getInterpolation(float input);
}

input 取值是从 0.0 到 1.0 ,分别表示动画的开始和结束。

看系统插值器的实现,都涉及到数学公式~~

本例的效果和 LinearInterpolator 是一样的,因为抄的 LinearInterpolator 的实现。 😄

import android.view.animation.BaseInterpolator;

public class MyInterpolator extends BaseInterpolator {

    @Override
    public float getInterpolation(float input) {
        return input;
    }
}

测试 return input/2return input*1.1f 的结果如下,
在这里插入图片描述
在这里插入图片描述
虽然最终效果是不适宜的,但说明自定义插值器有效果。
在这里插入图片描述

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值