动画

作者: 资本家大恶人 | 来源:发表于2020-05-07 21:38 被阅读0次

android动画补间动画(Tween Animation)

一. 作用对象

作用对象：视图控件View。
不可作用于属性或者其它对象。

二. 原理
1.通过: 开始的视图样式 & 结束的视图样式、中间动画变化过程由系统补全来确定一个动画。

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

缺点：
当平移动画执行完停在最后的位置，结果焦点还在原来的位置(控件的属性没有真的被改变)

优点：
制作方法简单方便。只需要为动画的第一个关键帧和最后一个关键帧创建内容，两个关键帧之间帧的内容由Flash自动生成，不需要人为处理。
相对于逐帧动画来说，补间动画更为连贯自然。
相对于逐帧动画来说，补间动画的文件更小，占用内存少。

四. 分类
平移（Translate）
旋转（Rotate）
缩放（Scale）
透明渐变（Alpha）
组合动画(AnimationSet)
五. 使用方式

1.通过xml形式

res/anim目录下
(1) 平移：translate_animation.xml

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

    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100%"
        android:toYDelta="100%"/>

    <!--android:fromXDelta="0"      水平方向x 移动的起始值-->
    <!--android:fromYDelta="0"      竖直方向y 移动的起始值-->
    <!--android:toXDelta="100%"     水平方向x 移动的结束值-->
    <!--android:toYDelta="100%"     竖直方向y 移动的结束值-->
</set>
(2) 旋转：rotate_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 旋转 -->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">

    <rotate
        android:pivotX="100%"
        android:pivotY="50%"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:drawable="@drawable/ic_launcher_foreground"
        android:visible="true"/>

    <!--android:pivotX="100%"       旋转中心X坐标-->
    <!--android:pivotY="50%"        旋转中心Y坐标-->
    <!--android:fromDegrees="0"     旋转起始角度位置-->
    <!--android:toDegrees="360"     旋转结束角度位置-->

    <!--android:drawable="@drawable/ic_launcher_foreground"   暂时没测试出来-->
    <!--android:visible="true"-->
</set>
(3) 缩放：scale_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 缩放-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">
    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="2.0"
        android:toYScale="2.0"
        android:pivotX="100%"
        android:pivotY="100%"/>

    <!--0.0表示收缩到没有；1.0表示正常无伸缩-->
    <!--值小于1.0表示收缩；值大于1.0表示放大-->

    <!--android:fromXScale="1.0"    动画在水平方向X的起始缩放倍数-->
    <!--android:fromYScale="1.0"    动画开始前在竖直方向Y的起始缩放倍数-->
    <!--android:toXScale="2.0"      动画在水平方向X的结束缩放倍数-->
    <!--android:toYScale="2.0"      动画在竖直方向Y的结束缩放倍数-->
    <!--android:pivotX="100%"       缩放轴点的x坐标-->
    <!--android:pivotY="100%"       缩放轴点的y坐标-->
</set>
(4) 透明渐变：alpha_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 渐变 -->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"/>

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

</set>
(5) 组合动画：group_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 组合动画 -->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"
    android:startOffset="1000"
    android:fillBefore="true"
    android:fillAfter="false"
    android:repeatMode="restart"
    android:shareInterpolator="true">

    <!-- 旋转 -->
    <rotate
        android:duration="3000"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:repeatMode="restart"
        android:repeatCount="2"/>

    <!-- 平移 -->
    <translate
        android:duration="10000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="800"
        android:toYDelta="0"
        android:repeatMode="restart"
        android:repeatCount="3"/>




    <!-- 组合动画独特的属性-->
    <!-- android:shareinterpolator = “true”-->
    <!-- 表示组合动画中的动画是否和集合共享同一个差值器 -->
    <!-- 如果集合不指定插值器，那么子动画需要单独设置 -->

    <!--// 以下参数是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 // 插值器，即影响动画的播放速度,下面会详细讲-->
</set>
Activity中调用xml
         //平移
        Animation translateAnimator = AnimationUtils.loadAnimation(this, R.anim.translate_animator);
        //伸缩
        Animation scaleAnimator = AnimationUtils.loadAnimation(this, R.anim.scale_animator);
        //旋转
        Animation rotateAnimator = AnimationUtils.loadAnimation(this, R.anim.rotate_animator);
        //渐变
        Animation alphaAnimator = AnimationUtils.loadAnimation(this, R.anim.alpha_animator);
        //组合
        Animation groupAnimator = AnimationUtils.loadAnimation(this, R.anim.group_animator);

        textView.startAnimation(groupAnimator);

通过java代码形式

        //参数类型 构造函数按照(值的类型， 值)这样的形式，如下：百分比
        int type = Animation.RELATIVE_TO_SELF; //百分比

        //平移
        TranslateAnimation ranslateAnimator = new TranslateAnimation(0, 500, 0, 0);
//        TranslateAnimation ranslateAnimator = new TranslateAnimation(type,0, type, 1, type,0, type, 1);
        ranslateAnimator.setDuration(3000);

        //伸缩
        ScaleAnimation scaleAnimation = new ScaleAnimation(1, 2, 1, 2, type, 0.5f, type, 0.5f);
        scaleAnimation.setDuration(3000);

        //旋转
        RotateAnimation rotateAnimation = new RotateAnimation(0, 360, type, 0.5f, type, 0.5f);
        rotateAnimation.setDuration(3000);

        //渐变
        AlphaAnimation alphaAnimation = new AlphaAnimation(1,0);
        alphaAnimation.setDuration(3000);

        //组合动画
        AnimationSet setAnimation = new AnimationSet(true);
        setAnimation.setDuration(3000);
        setAnimation.addAnimation(rotateAnimation);
        setAnimation.addAnimation(ranslateAnimator);

        textView.startAnimation(setAnimation);

总结：
xml优点：动画描述的可读性更好
代码优点：动画效果可动态创建

六. 设置监听

监听器 Animation.AnimationListener。

public void setListener(Animation animation){
        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                //开始
                Toast.makeText(mContext, "开始", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                //结束
                Toast.makeText(mContext, "结束", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                //动画重复执行的时候回调
                Toast.makeText(mContext, "重复执行", Toast.LENGTH_SHORT).show();
            }
        });

    }

七. 应用场景

标准视图动画
视图组（ViewGroup）中子元素的出场效果
Activity、Fragment切换视图动画

android动画逐帧动画(Frame Animation)

原理：按序播放一组预先定义好的图片。
将动画拆分为帧的形式，且定义每一帧 = 每一张图片

自己玩小技巧：
找到自己需要的gif动画
用 gif分解软件将 gif 分解成一张张图片即可

优缺点
缺点：效果单一，逐帧播放需要很多图片，占用内存空间较大，容易引发OOM
优点：制作简单

使用方式

通过xml方式

res/drawable/animation_list.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">

    <item android:drawable="@drawable/icon_redwallet_open1"
        android:duration="100"/>
    <item android:drawable="@drawable/icon_redwallet_open2"
        android:duration="100"/>
    <item android:drawable="@drawable/icon_redwallet_open3"
        android:duration="100"/>
    <item android:drawable="@drawable/icon_redwallet_open4"
        android:duration="100"/>
    <item android:drawable="@drawable/icon_redwallet_open5"
        android:duration="100"/>
    <item android:drawable="@drawable/icon_redwallet_open6"
        android:duration="100"/>
    <item android:drawable="@drawable/icon_redwallet_open7"
        android:duration="100"/>
    <item android:drawable="@drawable/icon_redwallet_open8"
        android:duration="100"/>
</animation-list>
Activity中调用:

  iv.setImageResource(R.drawable.animation_list);
  animationDrawable = (AnimationDrawable) iv.getDrawable();
  animationDrawable.start(); //开始动画
  animationDrawable.stop(); //结束动画
2. java代码方式
  animationDrawable = new AnimationDrawable();
        for (int i = 1; i <= 8; i++) {
            //第一个参数为ID名，第二个为资源属性是ID或者是Drawable，第三个为包名
            int id = getResources().getIdentifier("icon_redwallet_open" + i, "drawable", getPackageName());
            Drawable drawable = getResources().getDrawable(id);
            animationDrawable.addFrame(drawable, 100);
            animationDrawable.setOneShot(false); //false循环   true只播放一次
            iv.setImageDrawable(animationDrawable);
        }
  animationDrawable.start(); //开始动画
  animationDrawable.stop(); //结束动画

五. 应用场景
较为复杂的个性化动画效果。

android动画属性动画(property Animation)*

image

一. 属性动画出现的原因

传统动画局限性：

作用对象局限：View
没有改变View的属性，只是改变视觉效果
动画效果单一，可扩展性有较大局限性

为了解决补间动画的缺陷，在 Android 3.0（API 11）开始，系统提供了一种全新的动画模式：属性动画（Property Animation）

二. 作用对象

任意java对象和属性

三. 原理

在一定时间间隔内，通过不断对值进行改变，并不断将该值赋给对象的属性，从而实现该对象在该属性上的动画效果。

可是任意对象，任意属性

四. 分类

ValueAnimator
ObjectAnimator
ViewPropertyAnimator(动画简写)
AnimatorSet(组合动画)

五. 使用方式

1. ValueAnimator

(1) xml方式
res/animator/value_animator.xml

<?xml version="1.0" encoding="utf-8"?>
<animator xmlns:android="http://schemas.android.com/apk/res/android"
    android:valueFrom="0"
    android:valueTo="500"
    android:duration="3000"
    android:valueType="intType"
    android:repeatCount="3">
</animator>

Activity中调用

public void setXmlValueAnimator() {
        anim = (ValueAnimator)AnimatorInflater.loadAnimator(this, R.animator.value_animator);
        setListener(anim);
    }

    /**
     * 设置监听
     * @param anim
     */
    public void setListener(ValueAnimator anim){
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //获取改变后的值
                int value = (Integer) animation.getAnimatedValue();
                //设置值
                tv.setText(value + "");
                tv.setWidth(value);
                //刷新
                tv.requestLayout();
            }
        });
        anim.start();
    }

注意：android:valueType=" "类型，要和需要赋值的类型一致。
例如：android:valueType="intType" 类型为int类型，tv.setWidth()需要的也是int类型，假如不一致可能会出错。

(2) 通过java代码方式

public void setValueAnimator(){
        // ofInt() 作用有两个
        // 1\. 创建动画实例
        // 2\. 将传入的多个Int参数进行平滑过渡:此处传入0和1,表示将值从0平滑过渡到1
        // 如果传入了3个Int参数 a,b,c ,则是先从a平滑过渡到b,再从b平滑过渡到C，以此类推
        anim = ValueAnimator.ofInt(0, 500);
        anim.setDuration(5000); //时间
        setListener(anim); //动画监听 参考上面xml中的setListener()方法
    }

ObjectAnimator

(1) 通过xml方式

res/animator/object_animator.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:valueFrom="100"
    android:valueTo="500"
    android:duration="3000"
    android:valueType="intType"
    android:repeatCount="3"
    android:propertyName="width">
</objectAnimator>

Activity中调用

  ObjectAnimator anim = (ObjectAnimator)AnimatorInflater.loadAnimator(this,   R.animator.object_animator);
  anim.setTarget(textView);
  anim.start();

说明：
android:propertyName="width" 属性说明
被作用的对象，必须要有setWidth()这个属性才可以；
假如初始化中没有赋值，那被作用的对象必须要有getWidth()这个方法。

(2) java代码方式

ObjectAnimator anim = ObjectAnimator.ofInt(textView, "width", 0, 500);
        anim.setRepeatCount(100);
        anim.setDuration(3000);
        anim.start();

自动赋值过程：
被作用的对象：textView
被作用的属性：width
执行的时候根据值的变化，自动设置textView.setWidth(变化的值)。
注意：假如初始化中没有赋值，那被作用的对象必须要有getWidth()这个方法。***

ViewPropertyAnimator(动画简写)

用法如下：链式调用设置属性，详细的参数代表什么意思这里就不写了。

 textView.animate()  //获取ViewPropertyAnimator对象
            .setDuration(3000)
            .x(0)
            .y(500);

特点：
1、专门针对View对象动画而操作的类。
2、提供了更简洁的链式调用设置多个属性动画，这些动画可以同时进行的。
3、拥有更好的性能，多个属性动画是一次同时变化，只执行一次UI刷新（也就是只调用一次invalidate,而n个ObjectAnimator就会进行n次属性变化，就有n次invalidate）。
4、每个属性提供两种类型方法设置。
5、该类只能通过View的animate()获取其实例对象的引用

AnimatorSet(组合动画)

1.通过xml方式

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

    <!--android:ordering=""-->
    <!--表示Set集合内的动画按顺序进行-->
    <!--ordering的属性值:sequentially & together-->
    <!--sequentially:表示set中的动画，按照先后顺序逐步进行(a 完成之后进行b)-->
    <!--together:表示set中的动画，在同一时间同时进行,为默认值-->

    <objectAnimator
        android:propertyName="TranslationX"
        android:duration="3000"
        android:valueType="floatType"
        android:valueFrom="100"
        android:valueTo="1000" />

    <objectAnimator
        android:propertyName="width"
        android:duration="3000"
        android:valueType="intType"
        android:valueFrom="0"
        android:valueTo="500"/>
</set>

Activity中调用

        AnimatorSet animatorSet = (AnimatorSet)AnimatorInflater.loadAnimator(this, R.animator.set_animator);
        animatorSet.setTarget(textView);
        animatorSet.start();

(2) java代码方式

        //1.设置动画
        ObjectAnimator translation = ObjectAnimator.ofFloat(textView, "translationX", 0,500);//平移动画
        ObjectAnimator rotate = ObjectAnimator.ofFloat(textView, "rotation", 0f, 360f); // 旋转动画
        //2\. 创建组合动画的对象
        AnimatorSet animSet = new AnimatorSet();
        //3\. 按顺序组合动画
        animSet.play(translation).after(rotate).after(translation);
        animSet.setDuration(5000);
        //4.播放动画
        animSet.start();

监听

**1\. 视图动画监听**
Animation.addListener(AnimationListener)

**2\. 属性动画监听**
Animator.addListener(AnimatorListenerAdapter)

**3\. 属性动画监听值的变化**
Animator.addUpdateListener(ValueAnimator.AnimatorUpdateListener)

动画

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读