Android帧动画与补间动画与属性动画

最新推荐文章于 2022-09-04 14:33:35 发布

SageDeceiveFiend

最新推荐文章于 2022-09-04 14:33:35 发布

阅读量299

点赞数

CC 4.0 BY-SA版权

分类专栏：简单控件方法的使用与了解文章标签： Android

本文链接：https://blog.youkuaiyun.com/SageDeceiveFiend/article/details/95037154

简单控件方法的使用与了解专栏收录该内容

22 篇文章

订阅专栏

本文深入解析Android中的三种动画：帧动画、补间动画和属性动画。详细介绍每种动画的特点、应用场景及其实现方式，包括XML配置和代码实现。通过实例演示如何在应用中使用这些动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Android帧动画与补间动画与属性动画

帧动画

帧动画(Frame Animation)
1、帧动画的特性：
a. 用于生成连续的Gif效果图。
b. DrawableAnimation也是指此动画
2、帧动画的优缺点：
缺点：效果单一，逐帧播放需要很多图片，占用控件较大
优点：制作简单

补间动画

补间动画特性：

a.渐变动画支持四种类型：平移（Translate）、旋转（Rotate）、缩放（Scale）、不透明度
b. 只是显示的位置变动，View的实际位置未改变，表现为View移动到其他地方，点击事件仍在原处才能响应。
c. 组合使用步骤较复杂。
d. View Animation 也是指此动画

补间动画的优缺点：
缺点：当平移动画执行完停在最后的位置，结果焦点还在原来的位置(控件的属性没有真的被改变)
优点：相对于逐帧动画来说，补间动画更为连贯自然

属性动画

从 Android 3.0 就推出了属性动画，在以前使用的是视图动画，那么属性动画的优势在哪呢？都知道，视图动画对于一个 View 的操作仅仅只是一个表象的操作，就是说，视图动画中，仅仅只是对它视图的操作，而它真实的坐标和属性并没有发生变化，那么属性动画就是对一个 View 或者非 View 属性的操作，这一强大功能让它解决了视图动画的缺陷。和视图动画一样的是，属性动画（Animator ）也分为动画和动画集：ValueAnimator（ValueAnimator 算不上实现动画，ObjectAnimator 和TimeAnimator 继承自 ValueAnimator，一般由前者 ObjectAnimator 和 TimeAnimator 来实现动画，后面会说明 ValueAnimator）和 AnimatorSet，而 ValueAnimator 又分为 ObjectAnimator 和 TimeAnimator，一般我们都使用 ObjectAnimator。属性动画和视图动画一样，都可以使用 xml 和代码的方式实现，大家可以看一下视图动画来了解一下，其 xml 的实现方式是大同小异的。所以这里只对一些 xml 实现方式的不同之处作解释，不会像视图动画那篇做详细说明。因为属性动画和视图动画实现方式不太一样，所以我们可能先了解一下代码实现方式，这样对于 xml 理解会更家容易。代码方法 ObjectAnimator 有很多实现动画的方法，一般我们使用 ofFloat() 方法：

//图片用自己喜欢的
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/progress_loading_image_01" android:duration="50"></item>
    <item android:drawable="@drawable/progress_loading_image_02" android:duration="50"></item>
    <item android:drawable="@drawable/progress_loading_image_03" android:duration="50"></item>
    <item android:drawable="@drawable/progress_loading_image_04" android:duration="50"></item>
    <item android:drawable="@drawable/progress_loading_image_05" android:duration="50"></item>
    <item android:drawable="@drawable/progress_loading_image_06" android:duration="50"></item>
    <item android:drawable="@drawable/progress_loading_image_07" android:duration="50"></item>
    <item android:drawable="@drawable/progress_loading_image_08" android:duration="50"></item>
    </animation-list>


<?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="2000"
android:fillBefore="true"
    >


</alpha>

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

    android:fromDegrees="0.0"
    android:toDegrees="720"
    android:pivotX="200"
    android:pivotY="200"
    android:fillBefore="true"
    android:duration="2000"
    >


</rotate>

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


    android:fromYScale="1.0"
    android:fromXScale="1.0"
    android:toXScale="4.0"
    android:toYScale="3.0"
    android:pivotY="100"
    android:pivotX="100"
    android:fillBefore="true"
    android:duration="2000"
    >


</scale>

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

    android:duration="2000"
    android:fillBefore="true"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="200"
    android:toYDelta="300">


</translate>

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        android:orientation="vertical">

        <Button
            android:text="播放帧动画"
            android:id="@+id/zhen"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:text="补间动画"
            android:id="@+id/btnstartfragmen"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <ImageView
            android:background="@drawable/darawable"
            android:id="@+id/image123"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />



    </LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Main2Activity"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="透明" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="旋转" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="缩放" />

    <Button
        android:id="@+id/btn4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="平移" />

    <ImageView
        android:background="@drawable/hj"
        android:id="@+id/img456"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

package com.example.myapplication;

import android.content.Intent;
import android.graphics.drawable.AnimationDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.ListView;


public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    ImageView imageView;
    AnimationDrawable drawable;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = findViewById(R.id.image123);
        findViewById(R.id.zhen).setOnClickListener(this);
        findViewById(R.id.btnstartfragmen).setOnClickListener(this);
        drawable = (AnimationDrawable) imageView.getBackground();

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.zhen:
                boolean running = drawable.isRunning();
                if (running == true) {
                    drawable.stop();
                } else {
                    drawable.start();
                }
                break;
            case R.id.btnstartfragmen:
                Intent intent=new Intent(this,Main2Activity.class);
                startActivity(intent);

                break;

            default:
                break;
        }
    }
}

package com.example.myapplication;

import android.graphics.drawable.AnimationDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class Main2Activity extends AppCompatActivity implements View.OnClickListener {

    ImageView view;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        findViewById(R.id.btn1).setOnClickListener(this);
        findViewById(R.id.btn2).setOnClickListener(this);
        findViewById(R.id.btn3).setOnClickListener(this);
        findViewById(R.id.btn4).setOnClickListener(this);
        view=findViewById(R.id.img456);

    }

    @Override
    public void onClick(View v) {

        switch (v.getId()){

            case R.id.btn1:
                Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha);
                view.startAnimation(animation);

                break;
            case R.id.btn2:

                Animation animation1 = AnimationUtils.loadAnimation(this, R.anim.rotate);
                view.startAnimation(animation1);

                break;
            case R.id.btn3:
                Animation animation2 = AnimationUtils.loadAnimation(this, R.anim.scale);
                view.startAnimation(animation2);
                break;
            case R.id.btn4:
                Animation animation3 = AnimationUtils.loadAnimation(this, R.anim.translate);
                view.startAnimation(animation3);
                break;

        }

    }
}

在这里插入图片描述

package com.example.rikao_1;

import android.animation.Animator;
import android.animation.AnimatorInflater;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.PropertyValuesHolder;
import android.animation.ValueAnimator;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnticipateInterpolator;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class Main2Activity extends AppCompatActivity implements View.OnClickListener {

    TextView textView;
    ImageView imageView;
    int count = 1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        textView = findViewById(R.id.shuxing_text);
        findViewById(R.id.btn_2start).setOnClickListener(this);
        findViewById(R.id.btn_2startdaima).setOnClickListener(this);
        findViewById(R.id.btn_2startsuofang).setOnClickListener(this);
        findViewById(R.id.btn_2pingyi).setOnClickListener(this);
        findViewById(R.id.btn_baccolor).setOnClickListener(this);
        findViewById(R.id.btn_set_property).setOnClickListener(this);
        imageView = findViewById(R.id.shuxing_image);
        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(Main2Activity.this, "我被点击了", Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_2start:
                alphaProperty();
                break;
            case R.id.btn_2startdaima:
                alphaPropertydaima();

                break;
            case R.id.btn_2startsuofang:
                scaleProperty();

                break;
            case R.id.btn_2pingyi:
                scalePingyi();

                break;
            case R.id.btn_baccolor:
                ChangeBacColor();
                break;
            case R.id.btn_set_property:
               setProperty();
                break;
            default:
                break;

        }
    }

    private void setProperty() {
        ObjectAnimator animator=ObjectAnimator.ofArgb(textView,"backgroundColor", Color.BLUE,Color.GREEN);
        ObjectAnimator animator1 = ObjectAnimator.ofFloat(textView, "translationX", 0, 100);
        ObjectAnimator animator2 = ObjectAnimator.ofFloat(textView, "scaleX", 1.0f, 3.0f);
        ObjectAnimator animator3 = ObjectAnimator.ofFloat(textView, "rotation", 0, 720);
        ObjectAnimator animator4 = ObjectAnimator.ofFloat(textView, "alpha", 1.0f);


        //属性动画集合
        AnimatorSet animatorSet=new AnimatorSet();
        animatorSet.setDuration(8000);
        //开始执行属性动画 with 和一起执行 before 在play之前的动画 aftre在play动画之后
        animatorSet.play(animator).with(animator1).before(animator2).after(animator3).with(animator4);
        animatorSet.start();
//
//        PropertyValuesHolder propertyValuesHolder=PropertyValuesHolder.ofInt("backgroundColor",Color.YELLOW,Color.RED);
//        PropertyValuesHolder propertyValuesHolder1=PropertyValuesHolder.ofFloat("translationY",0,200);
//        PropertyValuesHolder propertyValuesHolder2=PropertyValuesHolder.ofFloat("scaleX",1,3);
//        PropertyValuesHolder propertyValuesHolder3=PropertyValuesHolder.ofFloat("rotation",0,360);
//        PropertyValuesHolder propertyValuesHolder4=PropertyValuesHolder.ofFloat("alpha",0,200);
//
//
//        ObjectAnimator objectAnimator = ObjectAnimator.ofPropertyValuesHolder(textView, propertyValuesHolder, propertyValuesHolder1, propertyValuesHolder2, propertyValuesHolder3, propertyValuesHolder4);
//
//        objectAnimator.setDuration(8000);
//        objectAnimator.setRepeatCount(3);
//        objectAnimator.start();




    }

    //通过属性动画设置背景颜色
    private void ChangeBacColor() {

        ObjectAnimator animator=ObjectAnimator.ofArgb(textView,"backgroundColor", Color.BLUE,Color.GREEN);

        animator.setDuration(5000);
        //设置执行次数
        animator.setRepeatCount(3);
        animator.start();
    }

    private void scalePingyi() {
        //获取控件相对于Y轴位移
        float translationY = textView.getTranslationY();

        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView, "translationX", translationY, translationY+100);

        objectAnimator.setDuration(5000);
        objectAnimator.start();

    }

    private void scaleProperty() {

        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView, "scaleX", 1.0f, 3.0f);

        objectAnimator.setDuration(5000);

        objectAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(textView, "scaleX", 3.0f, 1.0f);
                objectAnimator1.setDuration(5000);
                objectAnimator1.start();

            }

            @Override
            public void onAnimationEnd(Animator animation) {

            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });

        objectAnimator.start();

    }

    //旋转动画
    private void alphaPropertydaima() {
        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView, "rotation", 0, 720);
        objectAnimator.setDuration(5000);
        objectAnimator.setRepeatMode(ObjectAnimator.REVERSE);
        objectAnimator.setInterpolator(new AnticipateInterpolator());
        objectAnimator.start();

    }

    //加载xml文件 实现属性动画
    private void alphaProperty() {
        ValueAnimator animator = (ValueAnimator) AnimatorInflater.loadAnimator(Main2Activity.this, R.animator.alpha);

        //关联textview
        animator.setTarget(textView);
        //设置执行时间
        animator.setDuration(5000);
        //设置重复次数
        animator.setRepeatCount(3);
        //用来统计动画执行的次数

        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                Toast.makeText(Main2Activity.this, "开始", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                Toast.makeText(Main2Activity.this, "结束", Toast.LENGTH_SHORT).show();

            }

            @Override
            public void onAnimationCancel(Animator animation) {
                count++;
                Toast.makeText(Main2Activity.this, "重复了" + count + "次", Toast.LENGTH_SHORT).show();

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        animator.start();
    }
}

在这里插入图片描述