2. 程式人生 > >Android自定義view之實現仿抖音雙擊點贊單擊暫停特效

Android自定義view之實現仿抖音雙擊點贊單擊暫停特效

阿新 • • 發佈：2019-01-03

       2018年抖音、快手、火山等短視訊App比較火，最近自己做短視訊專案時有個需求，就是類似抖音的點贊特效，單擊螢幕時視訊暫停，再次點選時視訊恢復播放，雙擊或者連續多次點選時出現點贊特效(飄小心心特效)，而且是全屏可以隨意點選，都是可以響應雙擊及多擊事件。我們的需求點贊效果出現的同時請求介面，所以還是遇到很多問題的，這裡記錄一下.先放上一張抖音的點贊效果截圖如下:

:

分析一下效果圖:

1.當手指單擊螢幕時，視訊暫停播放.

2.當連續點選螢幕時，響應雙擊事件出現小心心特效，而且點選次數可以大於2次.

3.單擊暫停視訊時同時可以響應雙擊事件互不衝突.

4.點選整個螢幕都可以響應單擊和雙擊事件.

5.多次點選時間間隔要設定在短時間內不響應，要不會出現多次響應，重複點贊(我們的需求是雙擊或者多擊時請求點贊介面).

實現過程如下:

1.自定義點贊view

/**

* 作者： njb

* 時間： 2018/9/20 0020-上午 11:44

* 描述： 雙擊點贊心形動畫

* 來源：

*/

public class Like extends RelativeLayout {
private Context mContext;
float[] num = {-30, -20, 0, 20, 30};//隨機心形圖片角度
//記錄上一次的點選時間
private long  lastClickTime = 0;
//點選的時間間隔
private long INTERVAL = 200;
private MyClickListener.MyClickCallBack onClickListener;

public Like(Context context) {
    super(context);
    initView(context);
}

public Like(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    initView(context);
}

public Like(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);
}

@Override
public boolean dispatchTouchEvent(MotionEvent event) {
    switch (event.getAction()){
        case MotionEvent.ACTION_DOWN:
            //獲取點選時間
            long currTime = System.currentTimeMillis();
            //判斷點選之間的時間差
            long  interval = currTime - lastClickTime;
            lastClickTime = currTime;
            if(interval <INTERVAL ){//小於1秒，攔截事件，並做處理
                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.mipmap.sp_dianzanhou_da));
                imageView.setLayoutParams(params);
                //把IV新增到父佈局當中
                addView(imageView);

                //設定控制元件的動畫
                AnimatorSet animatorSet = new AnimatorSet();
                //縮放動畫，X軸2倍縮小至0.9倍
                animatorSet.play(scale(imageView, "scaleX", 2f, 0.9f, 100, 0))
                        //縮放動畫，Y軸2倍縮放至0.9倍
                        .with(scale(imageView, "scaleY", 2f, 0.9f, 100, 0))
                        //旋轉動畫，隨機旋轉角
                        .with(rotation(imageView, 0, 0, num[new Random().nextInt(4)]))
                        //漸變透明動畫，透明度從0-1
                        .with(alpha(imageView, 0, 1, 100, 0))
                        //縮放動畫，X軸0.9倍縮小至
                        .with(scale(imageView, "scaleX", 0.9f, 1, 50, 150))
                        //縮放動畫，Y軸0.9倍縮放至
                        .with(scale(imageView, "scaleY", 0.9f, 1, 50, 150))
                        //位移動畫，Y軸從0上移至600
                        .with(translationY(imageView, 0, -600, 800, 400))
                        //透明動畫，從1-0
                        .with(alpha(imageView, 1, 0, 300, 400))
                        //縮放動畫，X軸1至3倍
                        .with(scale(imageView, "scaleX", 1, 3f, 700, 400))
                        //縮放動畫，Y軸1至3倍
                        .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);
                    }
                });
            }
            break;
    }
    return super.dispatchTouchEvent(event);
}

/**
 * 縮放動畫
 * @param view
 * @param propertyName
 * @param from
 * @param to
 * @param time
 * @param delayTime
 * @return
 */
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;
}

/**
 * 位移動畫
 * @param view
 * @param from
 * @param to
 * @param time
 * @param delayTime
 * @return
 */
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;
}

/**
 * 透明度動畫
 * @param view
 * @param from
 * @param to
 * @param time
 * @param delayTime
 * @return
 */
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;
}

public void setOnClickListener(MyClickListener.MyClickCallBack onClickListener) {
    this.onClickListener = onClickListener;
}

public MyClickListener.MyClickCallBack getOnClickListener() {
    return onClickListener;
}

}

2.事件監聽類MyClickListener

 

/**

* 作者： njb

* 時間： 2018/11/30 18:18

* 描述：單擊和多次點選事件監聽回撥

* 來源：

*/

public class MyClickListener implements View.OnTouchListener {
    private static int timeout=400;//雙擊間四百毫秒延時
    private int clickCount = 0;//記錄連續點選次數
    private Handler handler;
    private MyClickCallBack myClickCallBack;

    public interface MyClickCallBack{
        void oneClick();//點選一次的回撥
        void doubleClick();//雙擊及連續多次點選的回撥
    }


    public MyClickListener(MyClickCallBack myClickCallBack) {
        this.myClickCallBack = myClickCallBack;
        handler = new Handler();
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            clickCount++;
            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    if (clickCount == 1) {
                        myClickCallBack.oneClick();
                    }else if(clickCount>=2){
                        myClickCallBack.doubleClick();
                    }
                    handler.removeCallbacksAndMessages(null);
                    //清空handler延時，並防記憶體洩漏
                    clickCount = 0;//計數清零
                }
            },timeout);//延時timeout後執行run方法中的程式碼
        }
        return false;//讓點選事件繼續傳播，方便再給View新增其他事件監聽
    }
}

3.佈局檔案程式碼:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/banner">
    <com.example.administrator.timertask.view.Like
        android:id="@+id/like"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </com.example.administrator.timertask.view.Like>
</android.support.constraint.ConstraintLayout>

 

4.Activity程式碼:

/**
 * 作者： njb
 * 時間： 2018/12/13 14:55
 * 描述：
 * 來源：
 */
public class LikeActivity extends AppCompatActivity {
    private Like like;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_like);
        initView();
    }

    private void initView() {
        like = findViewById(R.id.like);
        like.setOnClickListener(new MyClickListener.MyClickCallBack() {
            @Override
            public void oneClick() {
                Toast.makeText(LikeActivity.this,"單擊事件",Toast.LENGTH_SHORT).show();
            }

            @Override
            public void doubleClick() {
                Toast.makeText(LikeActivity.this,"雙擊或多擊事件",Toast.LENGTH_SHORT).show();
            }
        });
    }
}

5.以上就是單擊擊和雙擊及多擊事件監聽和點贊動畫自定義view實現，由於時間問題後面會加上視訊播放、單擊暫停等,慢慢完善例子,並給出原始碼，寫得不好，還望大家見諒，有問題大家可以提出一起探討解決.

 

相關推薦

Android自定義view之實現仿抖音雙擊點贊單擊暫停特效

       2018年抖音、快手、火山等短視訊App比較火，最近自己做短視訊專案時有個需求，就是類似抖音的點贊特效，單擊螢幕時視訊暫停，再次點選時視訊恢復播放，雙擊或者連續多次點選時出現點贊特效(飄小心心特效)，而且是全屏可以隨意點選，都

Android自定義view之實現帶checkbox的Snackbar

前言 最近專案要求實現一個類似於snackbar功能，但是又不完全是snackbar的外掛，本來想在Google提供的snackbar裡面進行更改，但是這樣太麻煩了，於是自己動手實現了一個snackbar。先看下效果圖： 1.要解決的問題 1.彈框裡面除了文字提示之外還有一個按鈕，這個按

Android自定義View之實現簡單炫酷的球體進度球

前言 最近一直在研究自定義view，正好專案中有一個根據下載進度來實現球體進度的需求，所以自己寫了個進度球，程式碼非常簡單。先看下效果： 效果還是非常不錯的。 準備知識 要實現上面的效果我們只要掌握兩個知識點就好了，一個是Handler機制，用於發訊息重新整理我們的進度球，一個是clip

android自定義View之仿通訊錄側邊欄滑動，實現A-Z字母檢索

我們的手機通訊錄一般都有這樣的效果，如下圖： OK，這種效果大家都見得多了，基本上所有的android手機通訊錄都有這樣的效果。那我們今天就來看看這個效果該怎麼實現。 一.概述 1.頁面功能分析 整體上來說，左邊是一個ListView，右邊是一個自定義View，但

Android自定義View之仿QQ側滑選單實現

最近，由於正在做的一個應用中要用到側滑選單，所以通過查資料看視訊，學習了一下自定義View，實現一個類似於QQ的側滑選單，順便還將其封裝為自定義元件，可以實現類似QQ的側滑選單和抽屜式側滑選單兩種選單。 下面先放上效果圖： 我們這裡的側

我的Android進階之旅------>Android自定義View來實現解析lrc歌詞並同步滾動、上下拖動、縮放歌詞的功能

前言 最近有個專案有關於播放音樂時候，關於歌詞有以下幾個功能： 1、實現歌詞同步滾動的功能，即歌曲播放到哪句歌詞，就高亮地顯示出正在播放的這個歌詞； 2、實現上下拖動歌詞時候，可以拖動播放器的進度。即可以不停地上下拖動歌詞，

Android自定義View之導航欄(Fragment實現)

安卓輕量級底部導航欄 目前安卓開發中常常會用到底部導航欄這個控制元件，但是自己從零開始做一個又太麻煩。因此，我封裝了一個底部導航欄，同時，也做了一些修改，用於頂部也十分合適。下面是示例圖： 使用方法： 1.新增依賴 首先，在build.gradle檔案下加入 maven

Android自定義View之仿京東售後稽核進度

本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出 概述：同常在做商城類的App時，都會有售後的需求，而售後流程通常會因為不同的業務，而分為不確定的幾個步驟，如下圖所示： 那麼問題就來了，像這樣的效果如何實現呢？讓我們先放下這個問題，先看

Android自定義View之ListView實現時間軸效果：我只是個送快遞的。

先上效果圖： 實現時間軸的原理 listview的基本使用，相信大家都很熟悉。先在layout下新建一個xml佈局檔案，對應一個子項的listView的顯示內容。在上面的圖我們可以看到，每一項都是 有3個 textview控制元件

Android 自定義View之仿華為圓形載入進度條

效果圖 實現思路 可以看出該View可分為三個部分來實現 最外圍的圓，該部分需要區分進度圓和底部的刻度圓，進度部分的刻度需要和底色刻度區分開來 中間顯示的文字進度，需要讓文字在View中居中顯示 旋轉的小圓點，小圓點需要模擬小球下落運動時的加速度

Android自定義 view之圖片裁剪從設計到實現

android圖片剪下是常用的功能，因為部落格開發的是SDK不涉及到activity，所以就需要自定義裁剪功能，參閱了網上的大部分資料後，在github上一個封裝好的裁剪庫cropper，正好符合要求，本著拿來主義的思想，直接把原始碼clone嵌入到專案裡，然後

Android自定義View之分貝儀

一、說明        最近在整理自定義View方面的知識，偶爾看到meizu工具箱的分貝儀效果，感覺它的實效效果還挺好的，遂想自己模擬實現練練手，廢話不多說，直接開擼。 二、效果圖 首先看一下效果圖： 看效果還挺炫酷

Android自定義View之Canvas

https://www.jianshu.com/p/fb18c28d6627 用繼承View的方式來自定義View，我們就需要重寫onDraw方法，也就是得咱自己來畫圖了。畫圖就得用到畫筆和畫布，也就是Paint和Canvas。我們來了解下Canvas。 Canvas Canvas我們可

Android 自定義View之Canvas詳解

自定義View的相關文章： Android 實現一個簡單的自定義View Android 自定義View步驟 Android Paint詳解 Android 自定義View之Canvas相關方法說明 Android 自定義View例項之 “京東跑”

Android : 自定義View之流式佈局

寫了一個很簡單的佈局 這是周圍圓框的drawable <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">

Android自定義View之getTextBounds()

在Android自定義View的過程中一定會用到Paint，而paint屬性中有一個方法getTextBounds(String text,int start,int end,Rext bounds),它的中文解釋是：返回一個包含中文的矩形邊界，位置為(start,end) 英文解釋：Retur

Android自定義View之自定義屬性

在Android開發中經常會用到自定義View的情況，而在自定義View時，自定義屬性是必須用到的。 1、新建一個自定義View如CustomView 它的自定義屬性主要是通過declare-styleable標籤為其配置自定義屬性。具體做法是：在res/values/目錄下增加一個reso

Android -- 自定義view之StepView

先看看實現的效果： 2，首先我們來看看我們常規的自定義view的基礎步驟吧         1，繼承View，重寫構造方法 2，自定義屬性 3，重寫onMeasure（）測量控制元件高度 4，重寫onDra

Android 自定義View 之 可隨意拖動的View

因為趕專案本人停更兩個月 從今天開始又可以更新了 今天說一下這個可隨意拖動的view 簡單說一下這個view效果 和 發展 一開始這種效果是使用在網頁端的特別是購物類 例如某寶 某東 購物車和客服視窗 都有使用這個懸浮可拖動的設計效果 後來才發展到的移動端 還有

Android 自定義View之咖啡動畫

文章目錄效果畫杯子畫杯墊畫煙霧 效果 大概思路 自定義view，直接繼承view 複寫onSizeChanged()方法，在此計算杯墊，杯子，煙霧效果的path 在onDraw()方法中，描繪杯墊，杯子 處理煙霧動畫效果 畫杯子 這裡需要畫兩部分內容，第