android 仿qq录音动画,Android实现QQ点赞效果动画 Android动画

版权声明：本文为代码部落原创文章，转载请注明出处。

前言

点赞是现在社交app中比较常用的功能，一个小小的点赞按钮如果能加上一些有趣动画，一来告诉用户你已经点了赞(这是对一些手残党极大的福音)，二来人机之间的交互显得更加活泼。总之这对用户的体验来说是有不少的提高。

举例及分析

我们先来看一下腾讯部分产品的点赞效果：

我们来分析一下这个动画的组成再研究一下如何实现。

>1. 向上移动一小段距离。

>2. 由非透明变成透明。

最终效果：

在Android动画中，总共有两种类型的动画View Animation(视图动画)和Property Animator(属性动画)。其中，

View Animation包括Tween Animation(补间动画)和Frame Animation(逐帧动画)

Property Animator包括ValueAnimator和ObjectAnimation；

我们将分别使用这两种动画进行实现。

使用View Animation(视图动画)实现

Android的animation由四种类型组成：alpha、scale、translate、rotate。官方文档：

点击查看

根据上面的分析，我们要使用到alpha和translate。

alpha标签——调节透明度

alpha是调节透明度动画，可以实现动态调控件的透明度，有下面几个属性：

android:fromAlpha 动画开始的透明度，从0.0 –1.0 ，0.0表示全透明，1.0表示完全不透明

android:toAlpha 动画结束时的透明度，也是从0.0 –1.0 ，0.0表示全透明，1.0表示完全不透明

以AS为例，首先新建一个工程，然后在res文件夹下，新建一个anim文件夹，再新建一个dianzan.xml文件，结构如图所示：

里面放入我们的alpha动画代码：

这个点赞的alpha动画也比较简单，透明度从非透明变成透明即可。

android:fromAlpha="1.0"

android:toAlpha="0">

1

2

3

4

android:fromAlpha="1.0"

android:toAlpha="0">

使用的方式也很简单，两个步骤：

通过scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scaleanim);从XML文件中获取动画

调用控件的startAnimation方法将动画传进去即可。

Animation animation = AnimationUtils.loadAnimation(mContext, R.anim.dianzan);

dianzanView.startAnimation(animation);

1

2

Animationanimation=AnimationUtils.loadAnimation(mContext,R.anim.dianzan);

dianzanView.startAnimation(animation);

我们来看一下加上这个动画后有什么效果。布局比较简单这里就不列出，文章后面会有完整代码下载。

嗯，效果有了。我们再加上平移动画看看。

translate标签 —— 平移

顾名思义，使用这个标签可以沿X轴和Y轴移动。translate有下面几个属性：

android:fromXDelta 起始点X轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p，具体意义已在scale标签中讲述，这里就不再重讲

android:fromYDelta 起始点Y轴从标，可以是数值、百分数、百分数p 三种样式；

android:toXDelta 结束点X轴坐标

android:toYDelta 结束点Y轴坐标

对于我们要实现的这个点赞动画，比较简单，在Y轴上往上移动一小段距离即可。因为Android定义的X轴是从左往右，y轴是从上往下，所以我们终点的y轴数值应该是一个负数。代码如下：

android:duration="1000"

android:fromXDelta="0"

android:fromYDelta="0"

android:toXDelta="0"

android:toYDelta="-25" />

1

2

3

4

5

6

android:duration="1000"

android:fromXDelta="0"

android:fromYDelta="0"

android:toXDelta="0"

android:toYDelta="-25"/>

效果如图：

基本也能达到效果。那么问题来了，如何将这两个动画整合起来？Android给我们提供了一个标签用于定义一系列动画的集合。这个标签就是set。

set标签——定义动作合集

set标签自已是没有属性的，他的属性都是从Animation继承而来，但当它们用于Set标签时，就会对Set标签下的所有子控件都产生作用。

属性有：(从Animation类继承的属性)

android:duration 动画持续时间，以毫秒为单位

android:fillAfter 如果设置为true，控件动画结束时，将保持动画最后时的状态

android:fillBefore 如果设置为true,控件动画结束时，还原到开始动画前的状态

android:fillEnabled 与android:fillBefore 效果相同，都是在动画结束时，将控件还原到初始化状态

android:repeatCount 重复次数

android:repeatMode 重复类型，有reverse和restart两个值，reverse表示倒序回放，restart表示重新放一遍，必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型，即回放时的动作。

将前面两个动画整合起来，代码如下：

android:duration="1000"

android:fillBefore="true">

android:fromXDelta="0"

android:fromYDelta="0"

android:toXDelta="0"

android:toYDelta="-40"/>

android:fromAlpha="1.0"

android:toAlpha="0">

1

2

3

4

5

6

7

8

9

10

11

12

13

14

android:duration="1000"

android:fillBefore="true">

android:fromXDelta="0"

android:fromYDelta="0"

android:toXDelta="0"

android:toYDelta="-40"/>

android:fromAlpha="1.0"

android:toAlpha="0">

效果如图：

离我们最终效果越来越近了。不过细心的朋友应该发现了，实际的效果是+1是在点击了之后突然出现，之后再逐渐变成透明。所以我们还应该为动画设置一个监听，在动画开始时将+1图表设置可见，动画结束时再gone掉。Android为Animation提供了一个监听器AnimationListener，它有下面几个方法：

//动画结束时调用，记住如果设置重复次数为无限时，这个方法是不会被调用的

void onAnimationStart(Animation var1);

//动画开始时调用

void onAnimationEnd(Animation var1);

//动画重复时调用

void onAnimationRepeat(Animation var1);

1

2

3

4

5

6

//动画结束时调用，记住如果设置重复次数为无限时，这个方法是不会被调用的

voidonAnimationStart(Animationvar1);

//动画开始时调用

voidonAnimationEnd(Animationvar1);

//动画重复时调用

voidonAnimationRepeat(Animationvar1);

因此我们这样做就行了：

Animation animation = AnimationUtils.loadAnimation(mContext, R.anim.dianzan);

dianzanView.startAnimation(animation);

notifyDataSetChanged();

animation.setAnimationListener(new Animation.AnimationListener() {

@Override

public void onAnimationStart(Animation animation) {

dianzanView.setVisibility(View.VISIBLE);

}

@Override

public void onAnimationEnd(Animation animation) {

dianzanView.setVisibility(View.GONE);

}

@Override

public void onAnimationRepeat(Animation animation) {

}

});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

Animationanimation=AnimationUtils.loadAnimation(mContext,R.anim.dianzan);

dianzanView.startAnimation(animation);

notifyDataSetChanged();

animation.setAnimationListener(newAnimation.AnimationListener(){

@Override

publicvoidonAnimationStart(Animationanimation){

dianzanView.setVisibility(View.VISIBLE);

}

@Override

publicvoidonAnimationEnd(Animationanimation){

dianzanView.setVisibility(View.GONE);

}

@Override

publicvoidonAnimationRepeat(Animationanimation){

}

});

这样一来效果就达到要求了。

使用Property Animation(属性动画)实现

Property Animator包括ValueAnimator和ObjectAnimation；

为什么要引入Property Animator(属性动画)？

Property Animator能实现补间动画无法实现的功能

View Animation仅能对指定的控件做动画，而Property Animator是通过改变控件某一属性值来做动画的。

因为本文并不是要介绍属性动画如何使用，因此基本用法这里就略过，有兴趣的朋友可以去查阅相关资料。

下面介绍一下ValueAnimator的简单使用。总共有两步：

要使用ValueAnimaiton，总共有两步：

第一步：创建ValueAnimator实例。

//创建一个值为[0,300]的动画，动画时常为1S

ValueAnimator animator = ValueAnimator.ofInt(0,300);

animator.setDuration(1000);

animator.start();

1

2

3

4

//创建一个值为[0,300]的动画，动画时常为1S

ValueAnimatoranimator=ValueAnimator.ofInt(0,300);

animator.setDuration(1000);

animator.start();

第二步：添加监听。

ValueAnimator animator = ValueAnimator.ofInt(0,300);

animator.setDuration(1000);

animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

int curValue = (int)animation.getAnimatedValue();

Log.d("myanimator", "curValue:" + curValue);

}

});

animator.start();

1

2

3

4

5

6

7

8

9

10

ValueAnimatoranimator=ValueAnimator.ofInt(0,300);

animator.setDuration(1000);

animator.addUpdateListener(newValueAnimator.AnimatorUpdateListener(){

@Override

publicvoidonAnimationUpdate(ValueAnimatoranimation){

intcurValue=(int)animation.getAnimatedValue();

Log.d("myanimator","curValue:"+curValue);

}

});

animator.start();

动画开始后，这个监听会返回animation.getAnimatedValue()的当前值，通过log打印如下：

可以发现这个值会从0开始打印到300。所以按照前面视图动画的逻辑，我们可以很容易就写出代码：

ValueAnimator animator = ValueAnimator.ofFloat(0, 1);

animator.setDuration(1000);

animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator valueAnimator) {

float curValue = (float) animator.getAnimatedValue();

if (curValue == 0) {

dianzanView.setVisibility(View.VISIBLE);

}

if (curValue == 1) {

dianzanView.setVisibility(View.GONE);

}

dianzanView.setTranslationY(curValue * -25);

dianzanView.setAlpha(1 - curValue);

}

});

animator.start();

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

ValueAnimatoranimator=ValueAnimator.ofFloat(0,1);

animator.setDuration(1000);

animator.addUpdateListener(newValueAnimator.AnimatorUpdateListener(){

@Override

publicvoidonAnimationUpdate(ValueAnimatorvalueAnimator){

floatcurValue=(float)animator.getAnimatedValue();

if(curValue==0){

dianzanView.setVisibility(View.VISIBLE);

}

if(curValue==1){

dianzanView.setVisibility(View.GONE);

}

dianzanView.setTranslationY(curValue *-25);

dianzanView.setAlpha(1-curValue);

}

});

animator.start();

我们定义了一个从0变化到1的浮点数来反应我们这个动画的执行过程。在变化过程中，我们将控件用setTranslationY()方法向上平移一段距离，同时通过setAlpha()设置控件的透明度。因为透明度从0是代表全透明，1代表非透明。因此要1减去当前的值。最终也能达到我们要的效果：

总结及源码下载

本篇介绍了一个简单动画的实现。千里之行始于足下，之后会逐步实现一些复杂，高级的动画，与各位一起学习，进步。

下载地址：

文件名称：Android实现QQ点赞效果动画 Android动画

文件大小：214.6KB解压密码：www.daimabuluo.com

更新日期：2018-9-18作者信息：

如果有你对该代码或者软件资源有特殊定制需求，可以在网站底部找到站长的联系方式进行咨询