Android补间动画(Tween Animation)的使用总结

最新推荐文章于 2023-04-30 07:45:00 发布
最新推荐文章于 2023-04-30 07:45:00 发布
阅读量536 收藏
点赞数
分类专栏： Android应用开发基础篇
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010661782/article/details/51754957
版权

前言：

1>

补间动画有四种：平移/缩放/透明度/旋转，这四点将会通过代码示例一来进行说明；

2>

关于补间动画的实质，并不是控件的移动，只是控件的重绘，控件实质是没有进行移动的，这点则通过代码二来进行说明；


代码示例：

1>代码示例一主要是讲解4种补间动画的用法，其代码示例如下：

MainActivity:

package com.example.administrator.testtweenanimation;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    private ImageView imageView;
    private TranslateAnimation translateAnimation;
    private ScaleAnimation scaleAnimation;
    private AlphaAnimation alphaAnimation;
    private RotateAnimation rotateAnimation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        /***
         * 获取ImageView控件
         * **/
        imageView = (ImageView) findViewById(R.id.iv);
    }

    /***
     * 平移补间动画的效果演示
     * **/
    public void translate(View view){
        /***
         * 10: 表示动画的X坐标的起始位置为：imageView的X坐标 + 10
         * 100: 表示动画的X坐标的结束位置为：imageView的X坐标 + 100
         * 20: 表示动画的Y坐标的起始位置为：imageView的Y坐标 + 20
         * 200: 表示动画的Y坐标的结束位置为：imageView的Y坐标 + 200
         * ***/
        translateAnimation = new TranslateAnimation(10,100,20,200);

        /***
         * Animation.RELATIVE_TO_SELF:
         * 0: 表示动画的X坐标的起始位置为：X坐标值 + (-1)*imageView控件自身的宽
         * 1: 表示动画的X坐标的结束位置为：X坐标值 + 1*imageView控件自身的宽
         * 0.5f: 表示动画的Y坐标的起始位置为：Y坐标值 + (-0.5)*imageView控件自身的高
         * 1.5f: 表示动画的Y坐标的结束位置为：Y坐标值 + 1.5*imageView控件自身的高
         *
         * Animation.RELATIVE_TO_PARENT:
         * 0: 表示动画的X坐标的起始位置为：X坐标值 + (-1)*imageView的父控件的宽
         * 1: 表示动画的X坐标的结束位置为：X坐标值 + 1*imageView的父控件的宽
         * 0.5f: 表示动画的Y坐标的起始位置为：Y坐标值 + (-0.5)*imageView的父控件的高
         * 1.5f: 表示动画的Y坐标的结束位置为：Y坐标值 + 1.5*imageView的父控件的高
         * **/
        /****
        TranslateAnimation ta = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF,-1, Animation.RELATIVE_TO_SELF,1,
                Animation.RELATIVE_TO_SELF,-0.5f,Animation.RELATIVE_TO_SELF,1.5f);
        ****/

        /***
         * 设置动画执行的时间
         * **/
        translateAnimation.setDuration(2000);
        /***
         * 动画重复的次数，比如：
         * 当动画重复的次数设置为1次时，
         * 则表明动画播放2次,因为其重复之前有一次播放；
         * **/
        translateAnimation.setRepeatCount(1);

        /***
         * 表示设置动画重复的模式，
         * RESTART：这是默认重复的模式，表示重新再执行一遍
         * REVERSE：这是表示重复执行的时候，这一次与上一次执行的位置刚好颠倒过来；
         * 比如：上一次是从上到下执行，那么第二次重复执行的时候，则是从下往上执行回去；
         * **/
        translateAnimation.setRepeatMode(Animation.REVERSE);

        /***
         * 开启动画
         * **/
        imageView.startAnimation(translateAnimation);

    }

    /***
     * 缩放的效果演示
     * **/
    public void scale(View view){

        /****
         * 0: 表示动画在x坐标上缩放0倍开始
         * 1: 表示动画在x坐标上缩放1倍结束
         * 0: 表示动画在y坐标上缩放0倍开始
         * 1: 表示动画在y坐标上缩放1倍结束
         *
         * 其缩放点为左上角；
         * **/
        scaleAnimation = new ScaleAnimation(0,1,0,1);
        /***
         * 0.5f: 表示动画在x坐标上缩放0倍开始
         * 1: 表示动画在x坐标上缩放1倍结束
         * 1.5f: 表示动画在y坐标上缩放0倍开始
         * 2: 表示动画在y坐标上缩放1倍结束
         * 20:表示动画X轴的缩放点为：x坐标 + 20
         * 40:表示动画Y轴的缩放点为：y坐标 + 40
         * **/
        //ScaleAnimation scaleAnimation = new ScaleAnimation(0,1,0,1,20,40);
        /***
         * 0.5f: 表示动画在x坐标上缩放0倍开始
         * 1: 表示动画在x坐标上缩放1倍结束
         * 1.5f: 表示动画在y坐标上缩放0倍开始
         * 2: 表示动画在y坐标上缩放1倍结束
         * Animation.RELATIVE_TO_SELF,0.5f:
         * 表示动画x轴的缩放点为：x坐标 + imageView自身的宽*0.5
         * Animation.RELATIVE_TO_SELF,0.5f:
         * 表示动画Y轴的缩放点为：y坐标 + imageView自身的高*0.5
         * **/
        /**
        ScaleAnimation scaleAnimation = new ScaleAnimation(0,1,0,1,
                Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
        ***/
         /***
         * 设置动画持续的时间为2s
         * ***/
        scaleAnimation.setDuration(2000);
        /***
         * 设置动画停留在结束的位置上
         * **/
        scaleAnimation.setFillAfter(true);
        /***
         * 开启动画
         * ***/
        imageView.startAnimation(scaleAnimation);
    }

    /***
     * 透明度的效果演示
     * **/
    public void alpha(View view){
        /***
         * 0: 表示从完全透明开始
         * 1: 表示从完全不透明结束
         * **/
        alphaAnimation = new AlphaAnimation(0,1);
        alphaAnimation.setDuration(2000);
        imageView.startAnimation(alphaAnimation);
    }

    /***
     * 旋转的效果演示
     * **/
    public void rotate(View view){
        /***
         * 其参数可以对比着缩放动画的参数去理解(故其他几种构造函数的参数就不予以赘述)
         * 0: 表示动画从0度的位置开始
         * 180: 表示动画从180度位置结束
         *
         * 由于这个构造函数没有指出其旋转的中心点，所以其默认的旋转中心点是左上角；
         * **/
        rotateAnimation = new RotateAnimation(0,180);
        rotateAnimation.setDuration(2000);
        imageView.startAnimation(rotateAnimation);
    }

    /***
     * 几种补间动画的综合效果演示，
     * **/
    public void sum(View view){
        /***
         * false:表示每种动画都用自己的interpolator;
         *
         * true:表示所有的动画都用用一个interpolator，
         * 这个interpolator与animationSet有关;
         * **/
        AnimationSet animationSet = new AnimationSet(false);

        translateAnimation = new TranslateAnimation(10,100,20,200);
        translateAnimation.setDuration(2000);
        translateAnimation.setRepeatCount(1);
        translateAnimation.setRepeatMode(Animation.REVERSE);
        animationSet.addAnimation(translateAnimation);

        scaleAnimation = new ScaleAnimation(0,1,0,1);
        scaleAnimation.setDuration(2000);
        scaleAnimation.setFillAfter(true);
        animationSet.addAnimation(scaleAnimation);

        alphaAnimation = new AlphaAnimation(0,1);
        alphaAnimation.setDuration(2000);
        animationSet.addAnimation(alphaAnimation);

        rotateAnimation = new RotateAnimation(0,180);
        rotateAnimation.setDuration(2000);
        animationSet.addAnimation(rotateAnimation);

        imageView.startAnimation(animationSet);
    }
}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.administrator.testtweenanimation.MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="平移"
        android:onClick="translate"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="缩放"
        android:onClick="scale"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="透明"
        android:onClick="alpha"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="旋转"
        android:onClick="rotate"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="综合效果"
        android:onClick="sum"
        />

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

</LinearLayout>

运行结果如下：



2>代码示例二主要是讲解补间动画的实质，其代码示例如下：

代码示例如下：

MainActivity_main：

package com.example.administrator.testtweenanimationtheory;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private ImageView imageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        /***
         * 获取imageView控件
         * **/
        imageView = (ImageView) findViewById(R.id.iv);
        /***
         * 设置imageView的背景
         * **/
        imageView.setBackgroundResource(R.drawable.man);

        /***
         * 对imageView设置侦听
         * **/
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"已选中",Toast.LENGTH_SHORT).show();
            }
        });
    }

    public void translate(View view){
        TranslateAnimation translateAnimation = new TranslateAnimation(0,200,0,200);
        translateAnimation.setDuration(2000);
        /***
         * 设置动画停留在结束时的位置
         * ***/
        translateAnimation.setFillAfter(true);
        imageView.startAnimation(translateAnimation);
    }
}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.administrator.testtweenanimationtheory.MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="translate"
        android:text="平移"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/iv"
        android:layout_gravity="center"
        />
</LinearLayout>

运行结果如下：


总结：

1>

补间动画有四种，每种动画都有自己独有的一个Animation类，其使用步骤可见示例一；

2>

在示例二的这个运行结果中，当我们点击动画停留之后的那个图标时，发现并没有弹出

Toast,但是点击动画开始之前的那个位置，发现居然弹出了Toast,这说明移动之后的那个

动画是重绘而来，并不是真实控件移动达到的；


源码：

1>

四种补间动画的用法示例源码

2>

补间动画的实质示例源码

drinkingcode
关注
专栏目录
Android动画之补间动画(Tween Animation)基础学习
09-01
补间动画（Tween Animation）是Android提供的一种动画机制，它通过对视图进行连续的图像变换来创建动态效果。本篇将深入探讨补间动画的基础知识，包括其原理、分类、实现方式以及效果展示。 ### 原理 补间动画的...
Android中补间动画TweenAnimation
01-20
下面将详细阐述Android中补间动画的基本概念、使用方法以及相关知识点。 **补间动画基础** 1. **定义**：补间动画，又称渐变动画，是通过改变View对象的属性（如平移、旋转、缩放、透明度）来实现动画效果。它不...
Android入门——补间动画和帧动画应用小结
最美不过，心中有梦，身旁有你！
04-07 4257
动画Animations在App中的作用有多重要勿需多言，弹出式的PopupWindow、Tab切换、Loding等等。Android 3.0前，Android只支持两种动画模式：补间动画**Tween Animation和帧动画Frame animation。
Android补间动画详解
datian1234的博客
04-30 252
帧动画是通过连续播放图片来模拟动画效果，而补间动画开发者只需指定**动画开始**，以及**动画结束**"关键帧"，而动画变化的"中间帧"则由系统计算并补齐！
Android补间动画原理分析
Crazy David
03-05 822
补间动画有4种类型，平移，旋转，透明度，缩放。补间动画不会改变View的属性,只会改变显示效果. 关于补间动画使用 这个参考:https://blog.csdn.net/carson_ho/article/details/72827747 下面以平移动画为例分析补间动画原理. 补间动画原理 简单理解就是在每一次VSYN到来时 在View的draw方法里面 根据当前时间计算动画进度 计算出一...
android补间动画例子－－Tween
haiwanghappy的专栏
08-18 863
源代码： package com.mobcubes.hai.animation; import com.mobcubes.hai.R; import android.app.Activity; import android.os.Bundle; import android
Android Animation动画详解（一）： 补间动画
weixin_34185364的博客
08-23 145
前言 你有没有被一些APP中惊艳的动画效果震撼过，有没有去思考，甚至研究过这些动画是如何实现的呢？ 啥？你没有思考，更没有研究过？ 好吧，那跟着我一起来学习下如何去实现APP中那些让我们惊羡的动画特效吧，come on！ 一、Android的动画类型 Tween Animation补间动画 Frame Animation帧动画 Layout An...
Android动画之补间动画TweenAnimation
lidongxiu0714
12-28 4395
前面分析了Animation基类，然后简单概述了动画原理。Animation动画概述 下面讲解如何使用Animation的子类，包括： translate (平移动画) — TranslateAnimation scale (缩放动画) — ScaleAnimation rotate （旋转动画） — RotateAnimation类 alph...
Android动画之Tween Animation(补间动画)
qq_46653910的博客
03-28 2828
写在前面 Tween Animation可以实现view在平面空间内的平移、旋转、缩放、改变透明度功能， alpha渐变透明度动画效果 scale渐变尺寸缩放动画效果 roate画面旋转动画效果 translate画面位置移动动画效果 set组合动画效果 ...
Android 补间动画(Tween Animation)
小牧在一直在学习,在前进的道路上大家一起学习，进步。
05-13 639
Tween Animation（补间动画）： Tween动画，通过对View的内容进行一系列的图形变换 (包括平移、缩放、旋转、改变透明度)来实现动画效果。动画效果的定义可以采用XML来做也可以采用编码来做。 动画类型 XML配置方式 Java代码实现方式 渐变透明度动画效果 <alpha/> AlphaAnimation 渐变尺寸缩放动画效果 <scale/> ScaleAnimation 画面旋转动画效果 &...
android中补间动画制作,android动画 补间动画(Tween Animation)
weixin_29355333的博客
05-25 334
释放双眼，带上耳机，听听看~！补间动画(Tween Animation).jpg一. 作用对象1. 作用对象： 视图控件View。2. 不可作用于属性或者其它对象。二. 原理1.通过: 开始的视图样式 & 结束的视图样式、中间动画变化过程由系统补全来确定一个动画。2. 只是显示的位置变动，View的实际位置未改变，表现为View移动到其他地方，点击事件仍在原处才能响应。三. 优缺点缺点：当...
Android 动画系列二之补间动画
u012514113的专栏
07-10 3136
Android 动画系列二之补间动画
Android动画之补间动画(Tween Animation)实例详解
09-02
主要介绍了Android动画之补间动画(Tween Animation)用法,结合实例形式较为详细的分析了Android补间动画的定义,原理,注意事项与相关使用技巧,需要的朋友可以参考下
基于Go语言的疫情物资信息平台服务端设计源码
09-25
该项目是一款采用Go语言编写的疫情物资信息平台服务端源码，包含57个文件，其中包括43个Go源文件、4个XML文件、2个Git忽略文件以及其他必要的配置和管理文件。该平台旨在提供疫情物资的实时信息管理和数据交换服务。
基于PHP的AquaticProduct水产品质量溯源系统设计源码
09-25
该系统是一款基于PHP开发的水产品质量溯源源码，综合运用HTML、CSS、JavaScript等技术，并涉及C和C语言，共包含616个文件。文件类型丰富，涵盖PHP、HTML、CSS、JavaScript等，旨在实现水产品的全流程质量追溯管理。
基于Java语言的Android版QQ音乐仿IOS自定义主题色设计源码
09-25
该项目是一款Java编写的Android仿IOS风格QQ音乐应用源码，包含54个文件，涵盖20个XML布局文件、12个PNG图片资源、8个Java源代码文件、3个Git忽略文件、3个Gradle构建文件、2个属性配置文件、1个项目许可证文件、1个Markdown说明文件、1个项目配置文件和1个JAR库文件，实现了自定义主题色的功能。
卸妆水市场迎来爆发式增长，预计到2024年，中国卸妆水市场规模将达到248.8亿元
09-25
卸妆水市场迎来爆发式增长，预计到2024年，中国卸妆水市场规模将达到248.8亿元 在追求美丽与健康的今天，卸妆水已从单纯的清洁工具跃升为日常护肤不可或缺的一环。随着消费者对美容护肤认知的深化，卸妆水市场正经历一场前所未有的变革。消费升级、品质追求、环保理念……这些关键词正交织成卸妆水行业发展的壮丽画卷。那么，2024年的卸妆水行业又将如何演绎这场美丽盛宴？ 市场概况 近年来，中国卸妆水市场规模持续扩大。2017年中国卸妆水市场规模达到125.6亿元，随后几年中持续增长，到2019年已达到181.2亿元。预计到2024年，中国卸妆水市场规模将达到248.8亿元，年复合增长率显著。这一增长主要得益于消费者对卸妆水产品的认知和接受度不断提高，以及彩妆市场的快速发展。卸妆水市场需求正以惊人的速度增长，成为美妆市场中的一颗璀璨明珠。尤其是年轻女性群体，以其强烈的护肤意识和购买力，成为推动市场增长的主要力量。从上半年完美日记卸妆水产品抖音平台观众年龄分布来看，25-35岁年龄段占比高达80%以上，彰显出卸妆水在年轻消费群体中的广泛影响力。此外，预计未来几年内，卸妆水市场规模将持续扩大，年复合增长
CCF大数据与计算智能大赛--复赛第二名-【多分类，embedding】.zip
最新发布
09-25
CCF大数据与计算智能大赛-面向电信行业存量用户的智能套餐个性化匹配模型联通赛-复赛第二名-【多分类，embedding】.zip项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
基于微信小程序的wechat_bgh_teacher教师端设计源码
09-25
该微信小程序教师端设计源码基于微信小程序平台开发，包含792个文件，包括167个JavaScript文件、141个CSS样式文件、140个JSON配置文件、139个WXML模板文件、90个TypeScript文件、90个PNG图片文件、20个WXS文件、4个JPG图片文件以及1个ZIP压缩文件。代码主要使用JavaScript和TypeScript语言编写，适用于教师教学管理和互动。
Android补间动画基础：Tween Animation详解
本文主要介绍了Android中的补间动画（Tween Animation）基础知识，包括动画的原理、分类、实现方式以及示例代码。 在Android开发中，动画的实现有两类：补间动画和帧动画。补间动画是通过连续改变对象的属性（如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值