美文网首页
动画之补间动画

动画之补间动画

作者: _Rice_ | 来源:发表于2018-09-18 15:51 被阅读0次

特性:

  • 渐变动画支持四种类型:平移(Translate)、旋转(Rotate)、缩放(Scale)、不透明度

  • 只是显示的位置变动,View的实际位置未改变,表现为View移动到其他地方,点击事件仍在原处才能响应。

  • c组合使用步骤较复杂。

  • View Animation 也是指此动画。

结束的视图样式:平移、缩放、旋转 & 透明度样式
即补间动画的动画效果就是:平移、缩放、旋转 & 透明度动画

实现方式有两种分别是:xml实现、代码实现

xml实现,常用属性值

放在res/anim目录下

以下参数是4种动画效果的公共属性,即都有的属性:

android:duration="3000" // 动画持续时间(ms),必须设置,动画才有效果
android:startOffset ="1000" // 动画延迟开始时间(ms)
android:fillBefore = “true” // 动画播放完后,视图是否会停留在动画开始的状态,默认为true
android:fillAfter = “false” // 动画播放完后,视图是否会停留在动画结束的状态,优先于fillBefore值,默认为false
android:fillEnabled= “true” // 是否应用fillBefore值,对fillAfter值无影响,默认为true
android:repeatMode= “restart” // 选择重复播放动画模式,restart代表正序重放,reverse代表倒序回放,默认为restart|
android:repeatCount = “0” // 重放次数(所以动画的播放次数=重放次数+1),为infinite时无限重复
android:interpolator = @[package:]anim/interpolator_resource

以下参数是透明度动画特有的属性

android:fromAlpha="1.0" // 动画开始时视图的透明度(取值范围: -1 ~ 1)
android:toAlpha="0.0"// 动画结束时视图的透明度(取值范围: -1 ~ 1)

以下参数是平移动画特有的属性

android:fromXDelta="0" // 视图在水平方向x 移动的起始值
android:toXDelta="500" // 视图在水平方向x 移动的结束值
android:fromYDelta="0" // 视图在竖直方向y 移动的起始值
android:toYDelta="500" // 视图在竖直方向y 移动的结束值-

以下参数是缩放动画特有的属性

android:fromXScale="0.0" // 动画在水平方向X的起始缩放倍数, 0.0表示收缩到没有;1.0表示正常无伸缩, 值小于1.0表示收缩;值大于1.0表示放大
android:toXScale="2" //动画在水平方向X的结束缩放倍数
android:fromYScale="0.0" //动画开始前在竖直方向Y的起始缩放倍数
android:toYScale="2" //动画在竖直方向Y的结束缩放倍数
android:pivotX="50%" // 缩放轴点的x坐标,轴点 = 视图缩放的中心点
android:pivotY="50%" // 缩放轴点的y坐标,轴点 = 视图缩放的中心点

以下参数是旋转动画特有的属性

android:fromDegrees="0" // 动画开始时 视图的旋转角度(正数 = 顺时针,负数 = 逆时针)
android:toDegrees="270" // 动画结束时 视图的旋转角度(正数 = 顺时针,负数 = 逆时针)
android:pivotX="50%" // 旋转轴点的x坐标
android:pivotY="0" // 旋转轴点的y坐标

注意:pivotX pivotY,可取值为数字,百分比,或者百分比p

1、 设置为数字时(如50),轴点为View的左上角的原点在x方向和y方向加上50px的点。在Java代码里面设置这个参数的对应参数是Animation.ABSOLUTE。
2、设置为百分比时(如50%),轴点为View的左上角的原点在x方向加上自身宽度50%和y方向自身高度50%的点。在Java代码里面设置这个参数的对应参数是Animation.RELATIVE_TO_SELF。
3、设置为百分比p时(如50%p),轴点为View的左上角的原点在x方向加上父控件宽度50%和y方向父控件高度50%的点。在Java代码里面设置这个参数的对应参数是Animation.RELATIVE_TO_PARENT

例子1

res/anim/scale.xml

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXScale="0.0"
    android:toXScale="2"
    android:fromYScale="0.0"
    android:toYScale="2"
    android:pivotX="50%"
    android:pivotY="50%"/>

调用

    Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);
    mBtn.setAnimation(animation);

例子2--集合

res/anim/set.xml

<?xml version="1.0" encoding="utf-8"?><!--
    // 特别注意:
    // 1. 在组合动画里scale缩放动画设置的repeatCount(重复播放)和fillBefore(播放完后,视图是否会停留在动画开始的状态)是无效的。
    // 2. 所以如果需要重复播放或者回到原位的话需要在set标签里设置
    // 3. 但是由于此处rotate旋转动画里已设置repeatCount为infinite,所以动画不会结束,也就看不到重播和回复原位
-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fillAfter="true"
    android:fillBefore="true"
    android:fillEnabled="true"
    android:repeatCount="0"
    android:repeatMode="restart"
    android:shareInterpolator="true"
    android:startOffset="1000">
    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"
        android:repeatMode="restart"
        android:toDegrees="360"/>
    <translate
        android:duration="10000"
        android:fromXDelta="-50%p"
        android:fromYDelta="0"
        android:startOffset="1000"
        android:toXDelta="50%p"
        android:toYDelta="0"/>
    <alpha
        android:duration="3000"
        android:fromAlpha="1.0"
        android:startOffset="7000"
        android:toAlpha="0.0"/>
    <scale
        android:duration="1000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="4000"
        android:toXScale="0.5"
        android:toYScale="0.5"/>
</set>

调用

    Animation animation = AnimationUtils.loadAnimation(this, R.anim.set);
    mBtn.setAnimation(animation);

监听

监听动画开始、结束、重复。

animation.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {

                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                }

代码实现:

功能动画和对应的API

平移:TranslateAnimation
放缩:ScaleAnimation
旋转:RotateAnimation
透明:AlphaAnimation
集合:AnimationSet

例子
@OnClick({R.id.translate, R.id.scale, R.id.rotate, R.id.alpha, R.id.set})
    public void onClick(View view) {
        Animation animation;
        switch (view.getId()) {
            case R.id.translate:
                //xml实现
                animation = AnimationUtils.loadAnimation(this, R.anim.translate);
                //代码实现
                animation = new TranslateAnimation(0, 500, 0, 500);
                animation.setDuration(2000);
                // 步骤3:播放动画
                mBtn.setAnimation(animation);
                break;
            case R.id.scale:
                animation = AnimationUtils.loadAnimation(this, R.anim.scale);
                animation = new ScaleAnimation(0, 2, 0, 2, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                animation.setDuration(2000);
                mBtn.setAnimation(animation);
                break;
            case R.id.rotate:
                animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
                animation = new RotateAnimation(0, 235, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                animation.setDuration(2000);
                mBtn.setAnimation(animation);
                break;
            case R.id.alpha:
                animation = AnimationUtils.loadAnimation(this, R.anim.alpha);
                animation = new AlphaAnimation(1, 0);
                animation.setDuration(2000);
                mBtn.setAnimation(animation);
                break;
            case R.id.set:
                animation = AnimationUtils.loadAnimation(this, R.anim.set);
//              mBtn.startAnimation(setAnimation);
                // 组合动画设置
                AnimationSet setAnimation = new AnimationSet(true);
                // 步骤1:创建组合动画对象(设置为true)
                // 步骤2:设置组合动画的属性
                // 特别说明以下情况
                // 因为在下面的旋转动画设置了无限循环(RepeatCount = INFINITE)
                // 所以动画不会结束,而是无限循环
                // 所以组合动画的下面两行设置是无效的
                setAnimation.setRepeatMode(Animation.RESTART);
                setAnimation.setRepeatCount(1);// 设置了循环一次,但无效
                // 步骤3:逐个创建子动画(方式同单个动画创建方式,此处不作过多描述)
                // 子动画1:旋转动画
                Animation rotate = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                rotate.setDuration(1000);
                rotate.setRepeatMode(Animation.RESTART);
                rotate.setRepeatCount(Animation.INFINITE);
                // 子动画2:平移动画
                Animation translate = new TranslateAnimation(TranslateAnimation.RELATIVE_TO_PARENT, -0.5f,
                        TranslateAnimation.RELATIVE_TO_PARENT, 0.5f,
                        TranslateAnimation.RELATIVE_TO_SELF, 0
                        , TranslateAnimation.RELATIVE_TO_SELF, 0);
                translate.setDuration(10000);

                // 子动画3:透明度动画
                Animation alpha = new AlphaAnimation(1, 0);
                alpha.setDuration(3000);
                alpha.setStartOffset(7000);

                // 子动画4:缩放动画
                Animation scale1 = new ScaleAnimation(1, 0.5f, 1, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                scale1.setDuration(1000);
                scale1.setStartOffset(4000);

                // 步骤4:将创建的子动画添加到组合动画里
                setAnimation.addAnimation(alpha);
                setAnimation.addAnimation(rotate);
                setAnimation.addAnimation(translate);
                setAnimation.addAnimation(scale1);

                // 步骤5:播放动画
                mBtn.setAnimation(setAnimation);
                break;
        }
    }

相关文章

  • Android 基础动画之帧动画详解

    在上一篇 Android 基础动画之补间动画详解 主要介绍了补间动画的基本属性以及补间动画在Android起始设计...

  • Android回顾--(十六) 动画简析

    动画: 补间动画(Tween动画) 帧动画(Frame动画) 属性动画(Property动画) 补间动画 特点: ...

  • 动画合集之补间动画

    前面学了帧动画:动画合集之补间动画 和帧动画不同(帧动画是通过连续播放图片来模拟动画效果),补间动画只需要开发者提...

  • 动画之补间动画

    特性: 渐变动画支持四种类型:平移(Translate)、旋转(Rotate)、缩放(Scale)、不透明度 只是...

  • javaScript补间动画库

    补间动画库 补间动画介绍 补间动画指的是做FLASH、VIDEO动画时,在两个关键帧中间需要做“补间动画”,才能实...

  • Android动画

    Android动画分类: 视图动画:补间动画、逐帧动画 属性动画 视图动画 补间动画 可以在xml中定义动画,然后...

  • Android动画之视图动画

    补间动画 可以使用补间动画系统执行补间动画。补间动画计算动画相关的信息包括开始点、结束点、大小、旋转角度以及其他与...

  • Android 资源简介(五) AnimationDrawabl

    AnimationDrawable 代表动画资源。Android 既支持逐帧动画,也支持补间动画。 定义补间动画的...

  • Android 动画锦集

    Android 动画可分为逐帧动画、补间动画、属性动画。使用传统的逐帧动画、补间动画可以实现 Android 基本...

  • Android UI 绘制面试题

    1.1 Android 补间动画和属性动画的区别? 特性补间动画属性动画view 动画支持支持非view动画不支持...

网友评论

      本文标题:动画之补间动画

      本文链接:https://www.haomeiwen.com/subject/phxpnftx.html