還記得以前在某云的時候,有次需求是一個積分簽到,要求點擊簽到按鈕然后有一個動畫效果,比如+30積分然后慢慢往上移動在消失。那會不會做就想著改下需求,直接去掉了動畫效果,而今時隔很久又遇到同樣的問題,比較蛋疼的是我清楚記得當時做過這個功能,但是自己沒有做出來,當然現在做還是不會。自己當年省寫的代碼含淚也要補上。這次吸取教訓,實現這個效果。
大致思路:動畫部分,由一個垂直的平移和一個透明度變化的兩個動畫組成。然后通過AnimationSet將兩個動畫添加到集合,然后開始播放動畫。
更新UI部分,用的是Handler發送消息更新UI
下面看代碼:
import android/57003.html">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);
接收四個參數,我們點擊去看他的源碼
/** * 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
為了顯示效果這里可以多次點擊,實際項目中是點擊簽到一般是只能點擊一次。這個需要注意一下修改。
新聞熱點
疑難解答