还记得以前在某云的时候,有次需求是一个积分签到,要求点击签到按钮然后有一个动画效果,比如+30积分然后慢慢往上移动在消失。那会不会做就想着改下需求,直接去掉了动画效果,而今时隔很久又遇到同样的问题,比较蛋疼的是我清楚记得当时做过这个功能,但是自己没有做出来,当然现在做还是不会。自己当年省写的代码含泪也要补上。这次吸取教训,实现这个效果。
大致思路:动画部分,由一个垂直的平移和一个透明度变化的两个动画组成。然后通过AnimationSet将两个动画添加到集合,然后开始播放动画。
更新UI部分,用的是Handler发送消息更新UI
下面看代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.AnimationSet;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private ImageView mSignIn;
private ImageView redDot;
private TextView signSuccess;
private AnimationSet set;
private String isSign;
private TextView textView;
private Handler mHandler = new Handler() {
private int i= 100 ;
public void handleMessage(android.os.Message msg) {
switch (msg.what) {
case 1 : // 签到
i = i+ 100 ;
mSignIn.setImageResource(R.drawable.icon_signed); //已签到
redDot.setVisibility(View.GONE); //圆点隐藏
// start平移和渐变动画
signSuccess.startAnimation(set);
signSuccess.setVisibility(View.GONE);
textView.setText( "当前积分:" +i);
// mSignIn.setClickable(false);
break ;
default :
break ;
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mSignIn = (ImageView) findViewById(R.id.iv_sign); //签到
redDot = (ImageView) findViewById(R.id.iv_redpoint); //显示未签到的红圆点
textView = (TextView) findViewById(R.id.tv_score); //积分
//签到添加积分动画文本
signSuccess = (TextView) findViewById(R.id.iv_sign_success);
// 获取签到成功图片的位置
int left = signSuccess.getLeft();
int top = signSuccess.getTop();
// 创建平移和渐变的动画集合
// 定义一个平移动画对象
TranslateAnimation translate = new TranslateAnimation(left, left, top, top - 100 );
translate.setDuration( 2000 );
//translate.setRepeatCount(1);
// 渐变动画
AlphaAnimation alpha = new AlphaAnimation( 1 , 0 );
alpha.setDuration( 2000 );
alpha.setFillAfter( true );
// 创建动画集合,将平移动画和渐变动画添加到集合中,一起start
set = new AnimationSet( false );
set.addAnimation(translate);
set.addAnimation(alpha);
}
/**
* 签到
* @param v
*/
public void signIn(View v) {
// if (!TextUtils.isEmpty(isSign)) {
// if ("0".equals(isSign)) {// 0代表未签到
signSuccess.setVisibility(View.VISIBLE);
// mHandler.sendEmptyMessage(1);
Message message = new Message();
message.what = 1 ;
mHandler.sendMessage(message);
// }
// }
}
}
|
其中
TranslateAnimation translate = new TranslateAnimation(left, left, top, top - 100);
接收四个参数,我们点击去看他的源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
/**
* Constructor to use when building a TranslateAnimation from code
*
* @param fromXDelta Change in X coordinate to apply at the start of the
* animation
* @param toXDelta Change in X coordinate to apply at the end of the
* animation
* @param fromYDelta Change in Y coordinate to apply at the start of the
* animation
* @param toYDelta Change in Y coordinate to apply at the end of the
* animation
*/
public TranslateAnimation( float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) {
mFromXValue = fromXDelta;
mToXValue = toXDelta;
mFromYValue = fromYDelta;
mToYValue = toYDelta;
}
|
看到了TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta),从参数字面意思都能理解,在结合我们传递进去的参数,就是水平没有变化,垂直位移。
AlphaAnimation alpha = new AlphaAnimation(1, 0);
是透明度变化1代表不透明,0代表完全透明,取值float
为了显示效果这里可以多次点击,实际项目中是点击签到一般是只能点击一次。这个需要注意一下修改。
原文链接:https://blog.csdn.net/qq_34471736/article/details/70326777