怎么在Android中自定義view實現(xiàn)抖音點贊效果-創(chuàng)新互聯(lián)

這篇文章給大家介紹怎么在Android中自定義view實現(xiàn)抖音點贊效果，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了昌黎免費建站歡迎大家使用！

public class Love extends RelativeLayout {
  private Context mContext;
  float[] num = {-30, -20, 0, 20, 30};//隨機心形圖片角度
  public Love(Context context) {
    super(context);
    initView(context);
  }
  public Love(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    initView(context);
  }
  public Love(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initView(context);
  }
  private void initView(Context context) {
    mContext = context;
  }
  @Override
  protected void dispatchDraw(Canvas canvas) {
    super.dispatchDraw(canvas);
    ImageView imageView = new ImageView(mContext);
    LayoutParams params = new LayoutParams(100, 100);
    params.leftMargin = getWidth() - 200;
    params.topMargin = getHeight() / 2 - 300;
    imageView.setImageDrawable(getResources().getDrawable(R.drawable.heart_red));
    imageView.setLayoutParams(params);
    addView(imageView);
    imageView.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
        Toast.makeText(mContext, "這里是點擊愛心的動畫，待展示", Toast.LENGTH_SHORT).show();
      }
    });
  }
  @Override
  public boolean onTouchEvent(MotionEvent event) {
    final ImageView imageView = new ImageView(mContext);
    LayoutParams params = new LayoutParams(300, 300);
    params.leftMargin = (int) event.getX() - 150;
    params.topMargin = (int) event.getY() - 300;
    imageView.setImageDrawable(getResources().getDrawable(R.drawable.heart_red));
    imageView.setLayoutParams(params);
    addView(imageView);
    AnimatorSet animatorSet = new AnimatorSet();
    animatorSet.play(scale(imageView, "scaleX", 2f, 0.9f, 100, 0))
        .with(scale(imageView, "scaleY", 2f, 0.9f, 100, 0))
        .with(rotation(imageView, 0, 0, num[new Random().nextInt(4)]))
        .with(alpha(imageView, 0, 1, 100, 0))
        .with(scale(imageView, "scaleX", 0.9f, 1, 50, 150))
        .with(scale(imageView, "scaleY", 0.9f, 1, 50, 150))
        .with(translationY(imageView, 0, -600, 800, 400))
        .with(alpha(imageView, 1, 0, 300, 400))
        .with(scale(imageView, "scaleX", 1, 3f, 700, 400))
        .with(scale(imageView, "scaleY", 1, 3f, 700, 400));
    animatorSet.start();
    animatorSet.addListener(new AnimatorListenerAdapter() {
      @Override
      public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        removeViewInLayout(imageView);
      }
    });
    return super.onTouchEvent(event);
  }
  public static ObjectAnimator scale(View view, String propertyName, float from, float to, long time, long delayTime) {
    ObjectAnimator translation = ObjectAnimator.ofFloat(view
        , propertyName
        , from, to);
    translation.setInterpolator(new LinearInterpolator());
    translation.setStartDelay(delayTime);
    translation.setDuration(time);
    return translation;
  }
  public static ObjectAnimator translationX(View view, float from, float to, long time, long delayTime) {
    ObjectAnimator translation = ObjectAnimator.ofFloat(view
        , "translationX"
        , from, to);
    translation.setInterpolator(new LinearInterpolator());
    translation.setStartDelay(delayTime);
    translation.setDuration(time);
    return translation;
  }
  public static ObjectAnimator translationY(View view, float from, float to, long time, long delayTime) {
    ObjectAnimator translation = ObjectAnimator.ofFloat(view
        , "translationY"
        , from, to);
    translation.setInterpolator(new LinearInterpolator());
    translation.setStartDelay(delayTime);
    translation.setDuration(time);
    return translation;
  }
  public static ObjectAnimator alpha(View view, float from, float to, long time, long delayTime) {
    ObjectAnimator translation = ObjectAnimator.ofFloat(view
        , "alpha"
        , from, to);
    translation.setInterpolator(new LinearInterpolator());
    translation.setStartDelay(delayTime);
    translation.setDuration(time);
    return translation;
  }
  public static ObjectAnimator rotation(View view, long time, long delayTime, float... values) {
    ObjectAnimator rotation = ObjectAnimator.ofFloat(view, "rotation", values);
    rotation.setDuration(time);
    rotation.setStartDelay(delayTime);
    rotation.setInterpolator(new TimeInterpolator() {
      @Override
      public float getInterpolation(float input) {
        return input;
      }
    });
    return rotation;
  }
  }

實現(xiàn)思路

在點擊時觸發(fā)將心形的圖片add到整個view中，然后在執(zhí)行動畫。主要的處理邏輯都在onTouchEvent()事件中，下面我們來詳細講解一下思路和代碼：

@Override
  public boolean onTouchEvent(MotionEvent event) {
    final ImageView imageView = new ImageView(mContext);
    LayoutParams params = new LayoutParams(300, 300);
    params.leftMargin = (int) event.getX() - 150;
    params.topMargin = (int) event.getY() - 300;
    imageView.setImageDrawable(getResources().getDrawable(R.drawable.heart_red));
    imageView.setLayoutParams(params);
    addView(imageView);
    AnimatorSet animatorSet = new AnimatorSet();
    animatorSet.play(scale(imageView, "scaleX", 2f, 0.9f, 100, 0))
        .with(scale(imageView, "scaleY", 2f, 0.9f, 100, 0))
        .with(rotation(imageView, 0, 0, num[new Random().nextInt(4)]))
        .with(alpha(imageView, 0, 1, 100, 0))
        .with(scale(imageView, "scaleX", 0.9f, 1, 50, 150))
        .with(scale(imageView, "scaleY", 0.9f, 1, 50, 150))
        .with(translationY(imageView, 0, -600, 800, 400))
        .with(alpha(imageView, 1, 0, 300, 400))
        .with(scale(imageView, "scaleX", 1, 3f, 700, 400))
        .with(scale(imageView, "scaleY", 1, 3f, 700, 400));
    animatorSet.start();
    animatorSet.addListener(new AnimatorListenerAdapter() {
      @Override
      public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        removeViewInLayout(imageView);
      }
    });
    return super.onTouchEvent(event);
  }

?首先，我們需要在觸摸事件中做監(jiān)聽，當有觸摸時，創(chuàng)建一個展示心形圖片的ImageView。

final ImageView imageView = new ImageView(mContext);
  imageView.setImageDrawable(getResources().getDrawable(R.drawable.heart_red));//設(shè)置紅色心形圖片

?設(shè)置圖片展示的位置，是需要在手指觸摸的位置上方，即觸摸點是心形的下方角的位置。所以我們需要將ImageView設(shè)置到手指的位置

 LayoutParams params = new LayoutParams(300, 300);
 params.leftMargin = (int) event.getX() - 150;
 params.topMargin = (int) event.getY() - 300;
 imageView.setLayoutParams(params);

?給imageView add到父view中。

addView(imageView);

?設(shè)置imageView動畫

 AnimatorSet animatorSet = new AnimatorSet();
 animatorSet.play(scale(imageView, "scaleX", 2f, 0.9f, 100, 0))//縮放動畫，X軸2倍縮小至0.9倍
        .with(scale(imageView, "scaleY", 2f, 0.9f, 100, 0))//縮放動畫，Y軸2倍縮小至0.9倍
        .with(rotation(imageView, 0, 0, num[new Random().nextInt(4)]))//旋轉(zhuǎn)動畫，隨機旋轉(zhuǎn)角度num={-30.-20，0，20，30}
        .with(alpha(imageView, 0, 1, 100, 0))//漸變透明度動畫，透明度從0-1.
        .with(scale(imageView, "scaleX", 0.9f, 1, 50, 150))//縮放動畫，X軸0.9倍縮小至1倍
        .with(scale(imageView, "scaleY", 0.9f, 1, 50, 150))//縮放動畫，Y軸0.9倍縮小至1倍
        .with(translationY(imageView, 0, -600, 800, 400))//平移動畫，Y軸從0向上移動600單位
        .with(alpha(imageView, 1, 0, 300, 400))//透明度動畫，從1-0
        .with(scale(imageView, "scaleX", 1, 3f, 700, 400))//縮放動畫，X軸1倍放大至3倍
        .with(scale(imageView, "scaleY", 1, 3f, 700, 400));//縮放動畫，Y軸1倍放大至3倍
animatorSet.start();

?當然，我們不可能無限制的增加view，在view消失之后，需要手動的移除改ImageView。

animatorSet.addListener(new AnimatorListenerAdapter() {
      @Override
      public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        removeViewInLayout(imageView);
      }
    });

關(guān)于怎么在Android中自定義view實現(xiàn)抖音點贊效果就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

標題名稱：怎么在Android中自定義view實現(xiàn)抖音點贊效果-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://bm7419.com/article42/diojec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、標簽優(yōu)化、用戶體驗、網(wǎng)站策劃、關(guān)鍵詞優(yōu)化、定制網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容