Andriod动画效果总结以及帧动画实现

发布时间:2025-12-09 15:54:38 浏览次数:10

文章目录

  • 前言
  • 一、帧动画
    • 1.1概述
    • 1.2使用步骤(可见文末代码):
    • 1.3属性介绍
  • 二、补间动画
    • 2.1概述
    • 2.2使用步骤
    • 2.3相关属性
  • 三、属性动画
    • 3.1概述
    • 3.2使用步骤
    • 3.3相关属性
  • 四.京东小哥送快递的帧动画实现
    • 4.1 导入图片资源,将其放在drawable文件夹下面
    • 4.2创建animation_list的xml
    • 4.3修改总的布局文件
    • 4.4 通过动画对象的start(),stop()方法来开启或者是停止动画

前言

安卓比较简单和基础的动画效果有三种,分别是帧动画(Drawable Animation)、补间动画(View Animation)、属性动画(Property Animation)。下面对每种动画进行介绍,同时实现利用帧动画实现京东小哥送快递的动画。

一、帧动画

1.1概述

帧动画就是顺序播放一组预先定义好的图片,就类似于我们观看视频,就是一张一张的图片连续播放。

1.2使用步骤(可见文末代码):

  • 在res/drawable目录下定义一个XML文件,根节点为系统提供的animation-list,然后放入定义更好的图片;
  • 使用AnimationDrawable类播放第一步定义好的Drawable中的图片,形成动画效果;

1.3属性介绍

  • android:oneshot=“false”: 表示是否重复播放动画,还是只播放一次;
  • 每个item都有Drawable和duration属性,Drawable表示我们要播放的图片;duration表示这张图播放的时间;

二、补间动画

2.1概述

view动画也称为补间动画,因为我们只需要拿到一个view,设定它开始和结束的位置,中间的view会自动由系统补齐,而不需要帧动画每一幅图都是提前准备好的。

View动画是Android一开始就提供的比较原始的动画,主要支持四种效果:平移、缩放、旋转、透明度变化(渐变) 四种基本效果,我们可以再这四种基础效果的基础上,选择其中的几种进行组合。

2.2使用步骤

xml版本:

<?xml version="1.0" encoding="utf-8"?><!--interpolator:差值器,表示动画运行时的时间正常方式,fillAfter:表示动画停留在最后运动的结果--><set xmlns:android="http://schemas.android.com/apk/res/android"android:fillAfter="true"android:interpolator="@android:anim/decelerate_interpolator"><!--透明度标签:表示透明0到不透明1之间的变换--><alphaandroid:fromAlpha="0.0"android:toAlpha="1.0" ></alpha><!--旋转标签:fromDegrees:表示旋转角度的起始角度,toDegrees:结束角度。pivotX:表示旋转的X轴坐标;pivotY:表示旋转的Y轴坐标--><rotateandroid:fromDegrees="0.0"android:toDegrees="720"android:pivotX="50%"android:pivotY="50%"/><!--缩放标签:fromXScale,toXScale表示水平缩放的起始值和结束值;fromYScale,toYScale竖直方向的缩放起始值和结束值。pivotX,pivotY,表示缩放动画效果的基准点x,y轴--><scaleandroid:fromXScale="0.4"android:fromYScale="0.4"android:toXScale="1.2"android:toYScale="1.2"android:pivotX="50%"android:pivotY="50%"></scale><!--移动标签:fromXDelta,toXDelta表示x轴移动的像素点;fromYDelta,toYDelta表示Y轴移动的像素点--><translateandroid:fromXDelta="0"android:toXDelta="300"android:fromYDelta="0"android:toYDelta="300"></translate></set>

代码版本

/*代码实现动画的四个功能*/fun blendAnimation(){/** 创建一个AnimationSet,它能够同时执行多个动画效果* 构造方法的入参如果是“true”,则代表使用默认的interpolator,如果是“false”则代表使用自定义interpolator*/val mAnimationSet = AnimationSet(true)//透明度动画,从完全透明到不透明,我们的动画都是float型的,所以,在写数字的时候,要加fval alphAnima = AlphaAnimation(0.0f, 1.0f)/** 创建一个旋转动画对象* 入参列表含义如下:* 1.fromDegrees:从哪个角度开始旋转* 2.toDegrees:旋转到哪个角度结束* 3.pivotXType:旋转所围绕的圆心的x轴坐标的类型,有ABSOLUT绝对坐标、RELATIVE_TO_SELF相对于自身坐标、RELATIVE_TO_PARENT相对于父控件的坐标* 4.pivotXValue:旋转所围绕的圆心的x轴坐标,0.5f表明是以自身这个控件的一半长度为x轴* 5.pivotYType:y轴坐标的类型* 6.pivotYValue:y轴坐标*/val rotateAnim = RotateAnimation(0f, 720f, Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF, 0.5f)/** 创建一个缩放效果的动画* 入参列表含义如下:* fromX:x轴的初始值* toX:x轴缩放后的值* fromY:y轴的初始值* toY:y轴缩放后的值* pivotXType:x轴坐标的类型,有ABSOLUT绝对坐标、RELATIVE_TO_SELF相对于自身坐标、RELATIVE_TO_PARENT相对于父控件的坐标* pivotXValue:x轴的值,0.5f表明是以自身这个控件的一半长度为x轴* pivotYType:y轴坐标的类型* pivotYValue:轴的值,0.5f表明是以自身这个控件的一半长度为y轴*/var scaleAnimation = ScaleAnimation(0f,1f,0f,1f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);/** 创建一个移动动画效果* 入参的含义如下:* fromXType:移动前的x轴坐标的类型* fromXValue:移动前的x轴的坐标* toXType:移动后的x轴的坐标的类型* toXValue:移动后的x轴的坐标* fromYType:移动前的y轴的坐标的类型* fromYValue:移动前的y轴的坐标* toYType:移动后的y轴的坐标的类型* toYValue:移动后的y轴的坐标*/var translateAnimation = TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.ABSOLUTE,360f,Animation.RELATIVE_TO_SELF,0f,Animation.ABSOLUTE,360f)mAnimationSet.addAnimation(alphAnima)mAnimationSet.addAnimation(rotateAnim)mAnimationSet.addAnimation(scaleAnimation)mAnimationSet.addAnimation(translateAnimation)mAnimationSet.setDuration(2000)//动画持续时间时间mAnimationSet.setInterpolator(DecelerateInterpolator()) //添加插值器,下面会有说明mAnimationSet.setFillAfter(true)photo_id?.startAnimation(mAnimationSet)}

2.3相关属性

  • Animation属性
  • TranslateAnimation属性
  • ScaleAnimation属性
  • RotateAnimation属性
  • AlphaAnimation属性

三、属性动画

3.1概述

属性动画,属性动画只对Android 3.0(API 11)以上版本的Android系统才有效,
这种动画可以设置给任何Object,包括那些还没有渲染到屏幕上的对象。这种动画是可扩展的,可以让你自定义任何类型和属性的动画。

属性动画的运行机制是通过不断地对值进行操作来实现的,而初始值和结束值之间的动画过渡就是由ValueAnimator这个类来负责计算的。它的内部使用一种时间循环的机制来计算值与值之间的动画过渡,我们只需要将初始值和结束值提供给ValueAnimator,并且告诉它动画所需运行的时长,那么ValueAnimator就会自动帮我们完成从初始值平滑地过渡到结束值这样的效果。除此之外,ValueAnimator还负责管理动画的播放次数、播放模式、以及对动画设置监听器等。

3.2使用步骤

  • 创建 ValueAnimator 或 ObjectAnimator 对象 —— 即可以从 XML 资源文件加载该动画也可以直接调用
    ValueAnimator 或者 ObjectAnimator 的静态工厂方法创建动画。
  • 根据需要为 Animator 对象设置属性。
  • 如果需要监听 Animator
    的动画开始事件,动画结束事件、动画重复事件、动画值改变事件,并根据事件提供响应处理代码,需要为Animator 对象设置监听器。
  • 如果有多个动画需要同时播放,需要使用 AnimatorSet 组合这些动画。
  • 调用 Animator 对象的 start 启动动画。

3.3相关属性

  • android:duration :动画持续时间。默认为 300ms
  • android:interploator:动画插值方式。通过 指定。
  • android:repeatCount :动画重复次数。
  • android:repeatMode:重复行为。
  • 帧刷新率。指定多长时间播放一帧。默认为 10 ms。

四.京东小哥送快递的帧动画实现

4.1 导入图片资源,将其放在drawable文件夹下面



4.2创建animation_list的xml

<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/frame_0" android:duration="200"/><item android:drawable="@drawable/frame_1" android:duration="200"/><item android:drawable="@drawable/frame_2" android:duration="200"/></animation-list>

4.3修改总的布局文件

<?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"android:orientation="vertical"tools:context=".MainActivity"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="实现帧动画"android:textSize="20sp"android:textColor="#9C27B0"android:textStyle="bold"/><ImageViewandroid:id="@+id/imageView1"android:layout_width="match_parent"android:layout_height="296dp"></ImageView></LinearLayout>

4.4 通过动画对象的start(),stop()方法来开启或者是停止动画

package com.example.donghua;import androidx.appcompat.app.AppCompatActivity;import android.graphics.drawable.AnimationDrawable;import android.graphics.drawable.TransitionDrawable;import android.os.Bundle;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.ImageView;public class MainActivity extends AppCompatActivity {private ImageView imageView1;//图片框private AnimationDrawable AD;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);imageView1 = findViewById(R.id.imageView1);imageView1.setImageResource(R.drawable.anim_frame); //设置资源AD = (AnimationDrawable) imageView1.getDrawable();AD.setOneShot(false);}@Overrideprotected void onStart(){startAnimation();super.onStart();}private void startAnimation() {AD.start();Animation trans = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0);trans.setDuration(1000);trans.setRepeatCount(Animation.INFINITE);imageView1.startAnimation(trans);}}

4.5 效果图

作者名:罗思维
原文链接:https://editor.csdn.net/md/?articleId=121895046

需要做网站?需要网络推广?欢迎咨询客户经理 13272073477