Android自定义控件入门到精通--补间动画

最新推荐文章于 2022-04-28 12:33:32 发布
最新推荐文章于 2022-04-28 12:33:32 发布
阅读量400 收藏 1
点赞数
分类专栏： Android自定义控件入门到精通 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jhone_csdn/article/details/118111476
版权

《Android自定义控件入门到精通》文章索引 ☞ https://blog.csdn.net/Jhone_csdn/article/details/118146683

《Android自定义控件入门到精通》所有源码 ☞ https://gitee.com/zengjiangwen/Code

文章目录

补间动画

补间动画也称TweenAnimation/ViewAnimation，补间动画为View的两种状态间的过度动画，但只是视觉上的改变，并没有真正改变View本身的属性。

补间动画有以下几种

  • TranslateAnimation(平移动画)
  • RotateAnimation(旋转动画)
  • ScaleAnimation(缩放动画)
  • AlphaAnimation(透明度动画)
  • AnimationSet(组合动画)

使用方法一：xml

步骤一：编写动画xml

translate（平移动画）

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:fillAfter="true"
    android:toXDelta="100"
    android:toYDelta="0" />

rotate（旋转动画）

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:fillAfter="true"
    android:fromDegrees="0"
    android:toDegrees="60"
    android:pivotX="50%"
    android:pivotY="50%"
    />

scale（缩放动画）

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:fillAfter="true"
    android:fromXScale="1"
    android:fromYScale="1"
    android:toXScale="2"
    android:toYScale="2"
    android:pivotX="50%"
    android:pivotY="50%"
    />

alpha（透明度动画）

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:fillAfter="true"
    android:fromAlpha="1"
    android:toAlpha="0"
    />

set（组合动画）

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fillAfter="true">
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toXDelta="200"
        android:toYDelta="0" />
    <scale
        android:fromXScale="0"
        android:fromYScale="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1"
        android:toYScale="1" />
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="90" />
    <alpha
        android:fromAlpha="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toAlpha="1" />
</set>

步骤二：Activity

 @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final View testView=findViewById(R.id.testView);
        Button playBtn=findViewById(R.id.playBtn);
        Button stopBtn=findViewById(R.id.stopBtn);
        final Animation animation = AnimationUtils.loadAnimation(this, R.anim.traslate);
        playBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                testView.startAnimation(animation);
            }
        });
        stopBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                testView.clearAnimation();
            }
        });
    }

或者这样调用

final Animation animation = AnimationUtils.loadAnimation(this, R.anim.traslate);
testView.setAnimation(animation);
playBtn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        animation.start();
    }
});
stopBtn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        animation.cancel();
    }
});

属性及含义

属性名称含义
duration动画开始到结束的时间
fromXDelta动画起始的x轴位置（相对于View自己的坐标系，View自己左上角为(0,0)）
toXDelta动画结束的x轴位置
fromYDelta动画起始的y轴位置
toYDelta动画结束的y轴位置
repeatMode动画的重复模式，需要配合repeatCount才有效果，reverse：往返重复，restart：每次结束后从开始位置开始重复
repeatCount重复次数，具体数字（无限重复为infinite）
interpolator动画插值器
fillAfter是否保持动画结束时的状态
pivotX原点位置（动画参考点，只对rotate和scale动画起作用）
pivotY原点位置（动画参考点，只对rotate和scale动画起作用）
fromDegrees旋转的开始角度
toDegrees旋转的结束角度
fromXScale/fromYScale缩放的开始大小（倍速关系，例：为2时表示开始大小为2倍大小）
toXScale/toYScale缩放的结束大小
fromAlpha透明度改变前的值([0~1],为0表示全透明，看不见)
toAlpha透明度改变后的值

比较简单，这里有几个属性的用法需要注意下：fromXDelta、toXDelta、fromYDelta、toYDelta、pivotX、pivoY

这些可以填数值(100)，百分比(100%)，百分比P(100%p)，我们来演示下，他们有什么不同。

fromXDelta、toXDelta、fromYDelta、toYDelta

我们拿fromYDelta举例：

数值

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromYDelta="100"
    android:toYDelta="0" />

在这里插入图片描述

动画从相对于TextView布局位置100px距离开始做动画

（白色TextView表示初始的布局位置，红色区域为TextView的父布局大小，蓝色为演示动画）

百分比

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromYDelta="100%"
    android:toYDelta="0" />

在这里插入图片描述

动画从相对于TextView布局位置100%距离开始做动画（也就是TextView的高度距离）

百分比P（P=Parent）

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromYDelta="100%p"
    android:toYDelta="0" />

在这里插入图片描述

动画从相对于TextView父布局位置100%距离开始做动画（也就是TextView父布局的高度距离）

pivotX、pivoY（原点位置）（数值、百分比、百分比P）

数值

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromDegrees="0"
    android:toDegrees="90"
    android:pivotY="30"
    android:pivotX="30"
    />

在这里插入图片描述

围绕(30,30)这个原点旋转

在这里插入图片描述

百分比

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromDegrees="0"
    android:toDegrees="90"
    android:pivotY="50%"
    android:pivotX="50%"
    />

在这里插入图片描述

50%为View宽高的一半，动画围绕View中心点旋转

百分比P

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromDegrees="0"
    android:toDegrees="90"
    android:pivotY="50%p"
    android:pivotX="50%p"
    />

在这里插入图片描述

50%p为Parent宽高的一半，动画围绕Parent中心点旋转

实现方法二：java代码

和帧动画一样，除了可以使用xml定义使用动画，也可以用java代码实现，并且java代码实现更灵活强大。

比如下面我要平移View，使View的中心点和Parent的中心点重合，xml的方式是无法实现的

在这里插入图片描述

（图片只截了一半，知道中心位置在父View的中心就行）

有人会有疑问了，不会吧，我这样定义动画应该就可以啊：

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXDelta="50%p"
    android:toYDelta="50%p" />

那我们看看结果，现实总是出乎预料

在这里插入图片描述

  android:pivotX="50%"
  android:pivotY="50%"

这两个定义原点的属性并没有起作用，注意了，这两个是rotate和scale动画的属性，对translate是不起作用的，对于translate来说，它的原点就是View的左上角，且不能修改

那我们通过java代码的方式，就能算出结束时候的原点坐标，实现这个效果

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

    final View testView = findViewById(R.id.testView);
    Button playBtn = findViewById(R.id.playBtn);
    playBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            int width = testView.getWidth();
            int height = testView.getHeight();

            int parentWidth = ((ViewGroup) testView.getParent()).getWidth();
            int parentHeight = ((ViewGroup) testView.getParent()).getHeight();

            int toXValue=(parentWidth-width)/2;
            int toYValue=(parentHeight-height)/2;

            final TranslateAnimation animation = new TranslateAnimation(Animation.ABSOLUTE,0,Animation.ABSOLUTE,toXValue,Animation.ABSOLUTE,0,Animation.ABSOLUTE,toYValue);
            animation.setDuration(2000);
            animation.setFillAfter(true);

            testView.startAnimation(animation);

        }
    });
}

在这里插入图片描述

总之，java代码实现根xml差不多，不同之处就是它可以根据需求计算位置，对应的类为：

  • TranslateAnimation
  • RotateAnimation
  • ScaleAnimation
  • AlphaAnimation
  • AnimationSet

我们讲解下TranslateAnimation，其它的就会用了

TranslateAnimation的构造函数

public TranslateAnimation(Context context, AttributeSet attrs)
public TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
        int fromYType, float fromYValue, int toYType, float toYValue)

第一种构造方法就不多讲了，不多用，我们看看第二种：

public TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) {
    mFromXValue = fromXDelta;
    mToXValue = toXDelta;
    mFromYValue = fromYDelta;
    mToYValue = toYDelta;

    mFromXType = ABSOLUTE;
    mToXType = ABSOLUTE;
    mFromYType = ABSOLUTE;
    mToYType = ABSOLUTE;
}

  TranslateAnimation translateAnimation=new TranslateAnimation(0,300,0,300);

这种方式跟我们xml使用数值的效果是一样的：

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="300"
    android:toYDelta="300" />

第三种构造方法：

public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
        int fromYType, float fromYValue, int toYType, float toYValue) {

    mFromXValue = fromXValue;
    mToXValue = toXValue;
    mFromYValue = fromYValue;
    mToYValue = toYValue;

    mFromXType = fromXType;
    mToXType = toXType;
    mFromYType = fromYType;
    mToYType = toYType;
}

细心的朋友应该发现了，第二种构造方法其实跟第三种构造方法是一样的，只不过它的mFromXType 、mToXType 、mFromYType 、mToYType 都写定了ABSOLUTE(默认)

type有三种：

  • ABSOLUTE（绝对，相对布局位置，相当于xml中的数值）
  • RELATIVE_TO_SELF（相对自己，相当于xml中的百分比）
  • RELATIVE_TO_PARENT（相对父控件，相当于xml中的百分比P）

ABSOLUTE

new TranslateAnimation(Animation.ABSOLUTE,0,Animation.ABSOLUTE,300,Animation.ABSOLUTE,0,Animation.ABSOLUTE,300);

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="300"
    android:toYDelta="300" />

这两种写法意思是一样的

RELATIVE_TO_SELF

new TranslateAnimation(Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0.5f,
                       		Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0.5f);

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="50%"
    android:toYDelta="50%" />

这两种写法意思是一样的，注意0.5f是倍数的意思

RELATIVE_TO_PARENT

new TranslateAnimation(Animation.RELATIVE_TO_PARENT,0,Animation.RELATIVE_TO_PARENT,0.5f,
							Animation.RELATIVE_TO_PARENT,0,Animation.RELATIVE_TO_PARENT,0.5f);

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="50%p"
    android:toYDelta="50%p" />

这两种写法意思是一样的，0.5f是倍数，相对于父View的倍数

我们看到第三种构造函数参数是fromXValue而非fromXDelta这样的，他们之间有什么转化关系呢？

//TranslateAnimation.java
@Override
public void initialize(int width, int height, int parentWidth, int parentHeight) {
    super.initialize(width, height, parentWidth, parentHeight);
    mFromXDelta = resolveSize(mFromXType, mFromXValue, width, parentWidth);
    mToXDelta = resolveSize(mToXType, mToXValue, width, parentWidth);
    mFromYDelta = resolveSize(mFromYType, mFromYValue, height, parentHeight);
    mToYDelta = resolveSize(mToYType, mToYValue, height, parentHeight);
}

mFromXValue通过resolveSize()转化成mFromXDelta

//Animation.java
protected float resolveSize(int type, float value, int size, int parentSize) {
    switch (type) {
        case ABSOLUTE:
            return value;
        case RELATIVE_TO_SELF:
            return size * value;
        case RELATIVE_TO_PARENT:
            return parentSize * value;
        default:
            return value;
    }
}

补间动画是一种假动画，它是一种视觉效果，实际并没有改变View的实际位置、大小、透明度，比如我们给View设置点击事件，然后通过补间动画对它进行平移，看看点击事件是在开始位置还是结束位置能触发

在这里插入图片描述

可以看到，我们点击动画结束后的位置，View并没有响应点击事件，反而在动画开始的位置点击，才响应点击事件。

补间动画并不能真正改变View的属性，这是补间动画的不足，而属性动画的出现，就弥补了这个不足。

一鱼浅游
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Android 架构师研发技术进阶之路：不同阶段需要掌握的那些技术及软技能
m0_64603776的博客
12-15 257
移动研发火热不停，越来越多人开始学习android开发。但很多人感觉入门容易成长很难，对未来比较迷茫，不知道自己技能该怎么提升，到达下一阶段需要补充哪些内容。市面上也多是谈论知识图谱，缺少体系和成长节奏感，特此编写一份android研发进阶之路，希望能对大家有所帮助。 这篇文章里，我们只谈技术，不谈软技能。 在这里我把攻城狮分成初级、中级、高级和资深四个阶段，分别对研发设计能力、工具使用、系统原理和架构等作出要求。 初级 我对初级研发攻城狮的定义是掌握基础的android知识，能够独立完成一个功能。这个
android 面试题
zengguangchun的博客
09-29 9523
1.常用的存储方式有哪些？ （五种，说出哪五种，五种存储方式什么情况下用。）注意sharepreferes对象支持读取不支持写入，写入引用Editor。 SQLite： SQLite是一个轻量级的数据库，支持基本SQL语法，是常被采用的一种数据存储方式。Android为此数据库提供了一个名为SQLiteDatabase的类，封装了一些操作数据库的API。 SharedPreference：
android自定义补间动画
04-01
该资源包含了一个自定义的补间动画，有详细的注释，喜欢的下载。
《疯狂Android讲义》 -- Android 动画系列之自定义补间动画(三维动画)
HaiBing
11-16 642
前言         Android提供了Animation作为补间动画抽象基类，并且为该抽象基类提供了AlphaAnimation、RotateAnimation、TranslateAnimation、ScaleAnimation四个实现类，这四个实现类只是补间动画的四种基本形式：透明度改变、旋转、位移、缩放。在实际项目中可能还需要一些更复杂的动画，比如让图片在“三维”空间内进行旋转动画等
Android 动画系列之自定义补间动画
Airsaid
06-05 3065
在上一篇中写到了Android提供了Animation类作为补间动画的抽象基类，并提供了四个子类：ScaleAnimation 、TranslateAnimation、AlphaAnimation、RotateAnimation分别实现了四种基本动画形式：缩放改变、位置改变、透明度改变和旋转改变。 但是我们在实际项目开发中，也有可能遇到更复杂的动画形式。比如说：三维旋转等。那么这个时候Android自己提供的就不能满
初学Android,图形图像之自定义补间动画(三十八)
lee576的专栏
09-03 3824
Android提供Animation作为补间动画抽象基类，而且为该抽象基类提供了AlphaAnimation,RotateAnimation,ScaleAnimation,TranslateAnimation四个类但是在实际项目中，这些很可能不够用，可能需要一些更复杂的动画，比如说立体空间的旋转动画基于特殊的要求，我们就需要继承Animation，重写applyTransformation(flo
搜集整理的一些博客导航
刺青的博客
10-26 5006
简介:第一次在CSDN上发表博客,将自己关注或者看过的一些博客整理了一下,其中包含了鸿神和郭神的全部博客,包括两位大神微信公众号推荐的博客,另外还有一些安卓开发社区的博客,后续每天都会更新这个导航,希望这个博客导航能够给小伙伴们带来一些帮助… Android重要机制 快速了解Android重要机制 ActionBar Android ActionBar完全解析，使用官方推荐的最佳导
IT行业都有哪些职位，初学者如何选择才能够快速进入这个行业？
热门推荐
IT修真院：初学者转行到互联网的聚集地
05-14 2万+
【本人性格不好，被惹到了必然句句带脏字，所以评论中如果有不开眼的，请慎重。 另外，这篇回答从头到尾都是我自己的个人偏见，绝对不客观，也绝对不会为本答案负责。 所以，有自己正常思维的请不要再看下去了。】 互联网行业的薪资水准相对较高，刚入行一个月，半年，或者一年超过其他行业薪资很正常。 那么，互联网行业究竟有哪些职位呢，又分别适合哪些传统行业转型？ 1.产品 2.UI 3.CSS...
出身最奇葩的程序员：360行，深入分析
m0_61408726的博客
09-08 1759
没有办法从产出知道Jelena Jensen的技术水平如何，但是，据了解，Jelena Jensen不仅精通PHP、MySQL等后端技术，而且个人网站的前端部分，也全部由自己一个人完成，这意味着，HTML、CSS、JavaScript等前端技术，她也都掌握了。 人家不仅会，而且还会的很多，还挺强！ 一个外行零基础入门都能做到这么好，“专业”的你还要靠这行技术吃饭，你又能做到什么程度呢？一起来看看吧。 （写给咱们Android的，非专业就撤了吧，下面不用看了） 初级 我对初级研发攻城狮的定义是掌握基础的 a
自定义补间动画演示Demo
12-26
属于Android图形图像之自定义补间动画，希望可以帮助到您。
android弹球动画property属性动画（自定义动画拼接）
09-01
是否因为两个补间动画不连贯而烦恼。其实这时可以使用属性动画进行两组动画的拼接，使动画看起来更流畅。这个例子就是使用属性动画开发的一个弹球动画效果，参考性很强。
Android中的动画，自定义补间动画
OyangYujun的专栏
08-25 573
1.  自定义补间动画           三维动画                 三维变化说明和实例        实例：以动画的形式控制控件的动作。参考：http://blog.csdn.net/imdxt1986/article/details/6952943 Android的Animation之LayoutAnimation使用
Android图形图像之自定义补间动画
一个大金宝的博客
12-26 733
前言     Activity之间的页面跳转，很多时候为了美观，都会在页面跳转的过程中加上动画，这样不会给用户一种生硬的感觉。那么怎么实现呢？ 我们可以通过自定义补间动画来实现这个效果。前面用总结了补间动画，有需要可以看一下。实现自定义补间动画并不难，我们直接继承animation，然后重写里面的方法即可实现。 简介     我们继承并重写的两个方法分别是： initialize(int
Android动画的使用——补间动画
m0_70082703的博客
04-28 116
2、代码调用 package com.wust.myanimation; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.ViewAnimationUtils; import android.view.animation.Animation; import android.view.animation.Animati
Android动画效果总结（一）
清风徐来~~ 我，依然在~
10-23 870
Android动画效果总结（一）100%p的意思是：当前控件的左上角+父控件/布局宽度的100% 50% 的意思是：当前控件的左上角+当前控件的50% 50 的意思是：当前控件的左上角+50px平移translate：android:fromYDelta=”100%p”：起始位置y坐标为“当前控件的左上角+父控件/布局宽度的100%”toYDelta：结束位置y坐标旋转rota
android几种动画分析
kan1kan5的专栏
03-05 875
2010-03-24 16:22:36|  分类： andoird|举报|字号 订阅 动画类型 Android的animation由四种类型组成 XML中  alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动画效
Android 让Activity部分透明、并作出流畅的进场动画
RikkaTheWorld
07-24 1243
让一个界面部分透明现在已经比较常见的了，比如网易云下面界面： “歌单详情”这个View大概占屏幕高的3/4，界面除了这个view其他部分则变成了半透明状态。 怎么实现这个View呢？我自己主要研究了三套做法，并用实际开发项目的情况做了测试，作出下面的小结： 把这个界面做成一个PopWindow 优势：完全能够满足任意动画要求，其实算是最好解决Activity半透明方案了。 劣势：PopWind...
Android自定义控件入门：原理与实现详解
4. **兼容性**：考虑到Android市场的多样性，自定义控件需要在多个版本的系统上运行稳定，需进行适配。 接下来，学习自定义控件通常涉及以下几个步骤： 1. **理解View的工作原理**：掌握View的基本概念，包括生命...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一鱼浅游

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值