安卓学习笔记32：实现补间动画

最新推荐文章于 2021-07-18 12:34:27 发布
最新推荐文章于 2021-07-18 12:34:27 发布
阅读量146 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aqaerw/article/details/112533297
版权

安卓学习笔记32：实现补间动画

零、学习目标

了解安卓实现动画的三种方式
掌握如何实现四种类型的补间动画

一、安卓实现动画的三种方式
1、补间动画（tween animation）

针对同一张图片进行各种变换，比如平移、旋转、缩放、深浅等等。
2、帧式动画（frame animation）

事先准备好动画所需要的每一帧图片，然后利用线程每隔一段时间切换图片，这样来实现的动画效果。
3、属性动画（property animation）

通过动画的方式改变对象的属性。
二、补间动画类型

透明度动画(alpha animation)
缩放动画(scale animation)
平移动画(translate animation)
旋转动画(rotate animation)

三、补间动画案例 - 透明度动画

透明度动画可以通过Java代码实现，也可以通过xml配置文件实现。

（一）运行效果

在这里插入图片描述
（二）实现步骤
1、创建安卓应用【AlphaAnimation】

在这里插入图片描述
在这里插入图片描述
2、将图片素材拷贝到drawable目录

在这里插入图片描述
3、主布局资源文件activity_main.xml

在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?> 

<ImageView
    android:id="@+id/ivBelle"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginBottom="20dp"
    android:layout_weight="7"
    android:src="@drawable/belle" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="horizontal">

    <Button
        android:id="@+id/btnAnimationByCode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="doAnimationByCode"
        android:text="@string/animation_by_code" />

    <Button
        android:id="@+id/btnAnimationByXML"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="doAnimationByXML"
        android:text="@string/animation_by_xml" />
</LinearLayout>

4、创建透明度动画配置文件

在res目录里创建anim目录，在anim里创建alpha_animator.xml
在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?> 

duration —— 持续时间（单位：毫秒）
fromAlpha —— 起始透明度（0~1）
toAlpha —— 终止透明度（0~1）
repeatMode —— 重复模式（restart，reverse）
repeatCount —— 重复次数（1、2、3、……、infinite）

5、字符串资源文件strings.xml

在这里插入图片描述

string name=“app_name”>补间动画 - 透明度动画
通过Java代码实现动画
通过xml配置实现动画

6、主界面类 - MainActivity

在这里插入图片描述

声明变量
在这里插入图片描述
通过资源标识符获取控件实例
在这里插入图片描述
通过Java代码实现透明度动画
在这里插入图片描述
通过XML配置实现透明度动画
在这里插入图片描述
查看主界面完整源代码




package net.hw.alpha_animation;

import android.os.Bundle;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private ImageView ivBelle; // 美女图像控件

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 利用布局资源文件设置用户界面
        setContentView(R.layout.activity_main);

        // 通过资源标识符获取控件实例
        ivBelle = findViewById(R.id.ivBelle);
    }

    /**
     * 通过Java代码实现透明度动画
     *
     * @param view
     */
    public void doAnimationByCode(View view) {
        // 创建透明度动画对象, 从不透明到透明
        Animation animation = new AlphaAnimation(1, 0);
        // 设置动画持续时间
        animation.setDuration(3000);
        // 设置动画重复模式（RESTART - 重启；REVERSE - 反向）
        animation.setRepeatMode(AlphaAnimation.REVERSE);
        // 设置动画重复次数
        animation.setRepeatCount(1);
        // 启动图像控件的透明度动画
        ivBelle.startAnimation(animation);
    }

    /**
     * 通过XML配置实现透明度动画
     *
     * @param view
     */
    public void doAnimationByXML(View view) {
        // 启动图像控件的透明度动画
        ivBelle.startAnimation(AnimationUtils.loadAnimation(this, R.anim.alpha_animator));
    }
}

7、启动应用，查看效果

在这里插入图片描述
四、补间动画案例 - 缩放动画

缩放动画可以通过Java代码实现，也可以通过xml配置文件实现。

（一）运行效果

在这里插入图片描述
（二）实现步骤
1、创建安卓应用【ScaleAnimation】

在这里插入图片描述
在这里插入图片描述
2、将图片素材拷贝到drawable目录

在这里插入图片描述
3、主布局资源文件activity_main.xml

在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?> 

<ImageView
    android:id="@+id/ivBelle"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginBottom="20dp"
    android:layout_weight="7"
    android:src="@drawable/belle" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="horizontal">

    <Button
        android:id="@+id/btnAnimationByCode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="doAnimationByCode"
        android:text="@string/animation_by_code" />

    <Button
        android:id="@+id/btnAnimationByXML"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="doAnimationByXML"
        android:text="@string/animation_by_xml" />
</LinearLayout>

4、创建缩放动画配置文件

在res目录里创建anim目录，在anim目录里创建scale_animator.xml
在这里插入图片描述
<?xml version="1.0" encoding="utf-8"?> 

fromXScale —— 起始横向比例（1表示原图大小）
fromYScale —— 起始纵向比例（1表示原图大小）
toXScale —— 终止横向比例（0表示缩小到无）
toYScale —— 终止纵向比例（0表示缩小到无）
pivotX —— 缩放中心横向比例（50% - 水平居中位置）
pivotY —— 缩放中心纵向比例（50% - 垂直居中位置）

5、字符串资源文件strings.xml

在这里插入图片描述

补间动画 - 缩放动画 通过Java代码实现动画 通过xml配置实现动画

6、主界面类 - MainActivity

在这里插入图片描述

声明变量
在这里插入图片描述
通过资源标识符获取控件实例
在这里插入图片描述
通过Java代码实现缩放动画
在这里插入图片描述
通过XML配置文件实现缩放动画
在这里插入图片描述
查看主界面类完整源代码

package net.hw.scale_animation;

import android.os.Bundle;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.ScaleAnimation;
import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

private ImageView ivBelle; // 美女图像控件

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // 利用布局资源文件设置用户界面
    setContentView(R.layout.activity_main);

    // 通过资源标识符获取控件实例
    ivBelle = findViewById(R.id.ivBelle);
}

/**
 * 通过Java代码实现缩放动画
 *
 * @param view
 */
public void doAnimationByCode(View view) {
   // 创建缩放动画对象，从原尺寸到零尺寸
    Animation animation = new ScaleAnimation(1, 0, 1, 0,
            ScaleAnimation.RELATIVE_TO_SELF, 0.5f, ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
    // 设置动画持续时间
    animation.setDuration(3000);
    // 设置动画重复模式（RESTART - 重启；REVERSE - 反向）
    animation.setRepeatMode(AlphaAnimation.REVERSE);
    // 设置动画重复次数
    animation.setRepeatCount(1);
    // 启动图像控件的缩放动画
    ivBelle.startAnimation(animation);
}

/**
 * 通过XML配置文件实现缩放动画
 *
 * @param view
 */
public void doAnimationByXML(View view) {
    // 启动图像控件的缩放动画
    ivBelle.startAnimation(AnimationUtils.loadAnimation(this, R.anim.scale_animator));
}

}

7、启动应用，查看效果

在这里插入图片描述
8、改变缩放基准点位置

将图像控件左上角作为缩放基准点
在这里插入图片描述
启动应用，查看效果
在这里插入图片描述

五、补间动画案例 - 平移动画
（一）运行效果

在这里插入图片描述
（二）实现步骤
1、创建安卓应用【TranslateAnimation】

在这里插入图片描述
在这里插入图片描述
2、将图片素材拷贝到drawable目录

在这里插入图片描述
3、主布局资源文件activity_main.xml

在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?> 

<ImageView
    android:id="@+id/ivBelle"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginBottom="20dp"
    android:layout_weight="7"
    android:src="@drawable/belle" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="horizontal">

    <Button
        android:id="@+id/btnAnimationByCode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="doAnimationByCode"
        android:text="@string/animation_by_code" />

    <Button
        android:id="@+id/btnAnimationByXML"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="doAnimationByXML"
        android:text="@string/animation_by_xml" />
</LinearLayout>

4、创建平移动画配置文件

在res目录里创建anim目录，在anim目录里创建translate_animator.xml
在这里插入图片描述
<?xml version="1.0" encoding="utf-8"?>

5、字符串资源文件strings.xml

在这里插入图片描述

补间动画 - 平移动画 通过Java代码实现动画 通过xml配置实现动画

5、主界面类 - MainActivity

在这里插入图片描述

声明变量
在这里插入图片描述
通过资源标识符获取控件实例
在这里插入图片描述
通过Java代码实现平移动画
在这里插入图片描述
通过XML动画配置文件实现平移动画
在这里插入图片描述
查看主界面完整源代码

package net.hw.translate_animation;

import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

private ImageView ivBelle; // 美女图像控件

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // 利用布局资源文件设置用户界面
    setContentView(R.layout.activity_main);

    // 通过资源标识符获取控件实例
    ivBelle = findViewById(R.id.ivBelle);
}

/**
 * 通过Java代码实现平移动画
 *
 * @param view
 */
public void doAnimationByCode(View view) {
    // 创建平移动画对象，设置平移起点与终点
    Animation animation = new TranslateAnimation(-730.0f, 730.0f, 0.0f, 0.0f);
    // 设置动画持续时间
    animation.setDuration(3000);
    // 设置动画重复模式（RESTART 重启；REVERSE 反向）
    animation.setRepeatMode(TranslateAnimation.REVERSE);
    // 设置动画重复次数
    animation.setRepeatCount(1);
    // 启动图像控件的平移动画
    ivBelle.startAnimation(animation);
}

/**
 * 通过XML配置文件实现平移动画
 *
 * @param view
 */
public void doAnimationByXML(View view) {
    // 启动图像控件的平移动画
    ivBelle.startAnimation(AnimationUtils.loadAnimation(this, R.anim.translate_animator));
}

}

6、启动应用，查看效果

在这里插入图片描述
课堂练习：完成从左上角移到右下角的平移动画

在这里插入图片描述

aqaerw
关注
【Android笔记26】Android中的动画效果之补间动画
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
08-26 411
前一篇文章学习了逐帧动画，逐帧动画是将N张图片组成动画的每一帧画面，这种动画效果有一个缺点，那就是需要事先准备好所有的动画资源图片。这篇文章要介绍Android中的第二种动画效果，补间动画，什么是补间动画呢？？？补间动画，那就是指定动画的开始帧、结束帧，对于中间的动画帧则全部让计算机自动计算，也就是计算自动补全中间的动画效果，是以简称：补间动画，当然这种我个人对补间动画的理解。补间动画效果：透明度渐变动画。旋转动画。缩放动画。平移动画。...
补间动画的实现
fuzhongbin的博客
12-07 581
补间动画（Tween Animation） 补间动画与逐帧动画在本质上是不同的，逐帧动画通过连续播放图片来模拟动画的效果，而补间动画则是通过在两个关键帧之间补充渐变的动画效果来实现的。补间动画的优点是可以节省空间。目前Android应用框架支持的补间动画效果有以下5种。具体实现在android.view.animation类库中。 AlphaAnimation：透明度（alpha）渐变
android中补间动画制作,android动画 补间动画(Tween Animation)
weixin_29355333的博客
05-25 340
释放双眼，带上耳机，听听看~！补间动画(Tween Animation).jpg一. 作用对象1. 作用对象： 视图控件View。2. 不可作用于属性或者其它对象。二. 原理1.通过: 开始的视图样式 & 结束的视图样式、中间动画变化过程由系统补全来确定一个动画。2. 只是显示的位置变动，View的实际位置未改变，表现为View移动到其他地方，点击事件仍在原处才能响应。三. 优缺点缺点：当...
安卓补间动画Tween Animation
cxmscb的博客
04-28 759
补间动画：字面意思: 前后之间的动画.主要指控件两个形态之间变化的动画形态变化有： alpha 透明度的变化 scale 缩放度的变化 translate 平移点的变化 rotate 旋转/角度的变化 set 上面这些变化的套餐 xml中构造补间动画 变化都有起始和结尾 scale: android:fromXScale 起始x轴方向的缩放程度 android:fromYScale andr
Android动画学习笔记之补间动画
01-04
本文实例为大家分享了Android补间动画展示的具体代码，供大家参考，具体内容如下 首先看看补间动画的共同属性： Duration:动画持续的时间（单位：毫秒）  fillAfter:设置为true，动画转化在动画被结束后被应用  ...
安卓开发学习笔记（15）补间动画（实例：实现淡入淡出的补间动画）
小幸运
11-27 610
开发步骤： 1.创建一个通过手势滑动查看相片的手机相册 2.创建动画资源文件 3.定义并初始化动画数组 4.指定切换的动画效果 第一步：创建像片切换器 activity_main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.andr...
补间动画的实现步骤
To be a better man
04-10 575
1.在res目录下建立文件夹anim 2.在anim文件夹下建立animation.xml动画文件 3.在animation.xml文件中描述某种动画的属性 4.在代码中利用AnimationUtils.loadAnimation方法加载动画文件 5.在代码中用View的startAnimation方法启动动画 渐变动画可以演示一个视图在透明度上的渐变效果。它的主要属性有：
安卓帧动画源代码/附带素材
05-07
安卓 帧动画不是补间动画 ! 补间动画看我其它资源 !动画 源码 大全
android 帧动画 补间动画制作,Android 动画 - 帧动画 & 补间动画
weixin_42510924的博客
05-25 191
系列文章传送门:在移动开发中，动画可以丰富页面的 UI 效果，一个动画包含以下几个元素控件： 想实现动画的 View 等时长：动画的时长起始值，结束值：动画从开始和结束的值(比如移动，就是坐标值)插值器：定义了动画变化的速率动画包含三大类型：帧动画(Frame)，补间动画(Tween)，属性动画(Property)帧动画 (Frame)顺序播放一组预先定义好的图。首先在 res/drawable/...
Android动画的使用——补间动画
我想月薪过万的博客
07-18 1028
基础知识 谈起 Android动画，我们就得讲讲他的分类：从大的方向来说主要分为两类：View动画（视图动画）和 属性动画。其中 View动画又包括 朴间动画 和 帧动画。其中，朴间动画 使用广泛，下面我们一起来看看如何实现其动画效果。 朴间动画：说白了就是涵盖了 平移、缩放、旋转 和 透明度四种变化的动画。实现方式有两种：xml文件 和 java代码 平移 效果展示 xml 方式 使用步骤： 1、res 下 创建 anim 文件夹，并创建 xxx.xml 文件...
Android动画系列——补间动画(Tween动画)
mLuoya的博客
03-18 296
动画系列——补间动画(Tween动画) 补间动画也叫渐变动画，对特定的对象做图像变换如平移、缩放、旋转、淡出/淡入等 动画类型 XML节点 使用的java类 透明 alpha AlphaAnimation 缩放 scale ScaleAnimation 移动 translate TranslateAnimation 旋转 rotate RoateAnimation ...
安卓补间动画的详解
engineer_zh的博客
03-22 444
夜深人静了，也许对大多数的程序员来说也只有在这个时候才是思维最活跃的时候吧，一杯咖啡一根烟，机械键盘放手边，程序员的标配。废话不多说，接着上篇写，下面来详细的介绍安卓的补间动画，让自己也让大家有个更加清楚地认识补间动画。    上篇已经介绍过补间动画分4中： 1 alpha：透明度的变化；                                                     
我的学习笔记~自学安卓（九）：同布局中图片补间动画被按钮覆盖问题
海蓝的博客
10-12 151
同一布局中有一个按钮和一张图片，图片做平移补间动画到按钮之上，一直被按钮覆盖 通常的解决办法是： imageview.bringToFront(); 或者图片的父布局调用 relativeLayout.bringToFront(); 但是并没有效果，最后多方查找找到了解决办法，就死在button外面再包一层布局即可，button就是这么任性。 在此记录下来 ...
Android开发中的动画(上)--补间动画与帧动画
zh773615704的博客
10-13 347
Android开发中的动画,更新到补间动画和帧动画化
android之动画实现（一）（四种基本补间动画）
gsw333的博客
02-06 3210
android动画有补间动画也有属性动画，还有布局动画等。今天就先从简单的四种基本补间动画说起。 补间动画有：平移，缩放，旋转，透明。使用方式有两种：xml和java代码。四种动画的共同属性说明：android:fillAfter 表示动画结束后是否停留在最后一帧，即停在结束位置； android:duration表示动画的持续时间； android:interpolator表示动画的运行规律
TextSwitcher实现文字上下翻牌效果
bdmh的专栏
03-16 6559
我们知道TextView是最常用来显示文字的组件，那么加入有一系列的内容，需要逐条的上下滚动播出，这样的效果就需要TextSwitcher来帮忙了。加入布局中已经存在一个TextSwitcher元素，那么使用时，需要写如下代码 tvNotice = (TextSwitcher)rootView.findViewById(R.id.tv_notice); tvNotic
Android补间动画详解：属性与实现方式
"Android补间动画的学习笔记，包括关键属性、创建方法及四种基本动画类型" 在Android开发中，动画是提升用户体验的重要手段之一。补间动画（Tween Animation）是Android提供的基础动画系统，用于实现对象在指定时间...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值