仿即刻的點贊滾動放大波紋圖示

VIjolie發表於2017-12-07

首先感謝關於仿寫者劉金偉：

https://github.com/arvinljw/ThumbUpSample的作者，從中收到了啟發。

先來看一張效果圖（沒圖說個蛋蛋）

大體思路：

上面這個控制元件PraiseView我把它拆成了兩部分：一個左邊的ImageView這個點選的時候會有放大的動畫，比較簡單。右邊的那個控制元件ScrollTextView複製數字加減進位，文字的滾動。這樣的好處是避免複雜的尺寸計算以及繪製邏輯，同時拆成兩個程式碼不會顯得過於冗長，便於理解。

關鍵程式碼解析：

public class PraiseView extends LinearLayout implements View.OnClickListener {
    private static final int DIP_8 = DisplayUtil.dip2px(8);
    /**
     * 預設的padding為縮放動畫留出空間
     */
    private final static int PADDING = DIP_8;

    private ImageView mImageView;
    private ScrollTextView mScrollTextView;
    private Drawable mPraiseDrawable;
    private Drawable mUnPraiseDrawable;
    private int mTextSize;
    private int mTextColor;
    public boolean mCanClick = true;
    private AnimatorSet mAnimatorSet;
    private int mLikeCount;
    private boolean mIsLiked;
    //圓的半徑
    private int mCircleMaxRadius;
    //園的顏色
    private int mCircleColor = Color.parseColor("#E73256");
    private Paint mCirclePaint = new Paint();
    private int mCurrentRadius = 0;
    private IPraiseListener mIPraiseListener;
    private ValueAnimator valueAnimator;


    public PraiseView(Context context) {
        this(context, null);
    }

    public PraiseView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PraiseView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs);
    }

    private void initView(Context context, @Nullable AttributeSet attrs) {
        View.inflate(context, R.layout.layout_praise_view, this);
        setOrientation(HORIZONTAL);
        setGravity(Gravity.CENTER_VERTICAL);
        setPadding(PADDING, PADDING, PADDING, PADDING);
        setOnClickListener(this);
        mImageView = findViewById(R.id.iv_praise);
        mScrollTextView = findViewById(R.id.scroll_text_praise);

        TypedArray attrArray = context.obtainStyledAttributes(attrs, R.styleable.PraiseView);
        mTextSize = attrArray.getDimensionPixelSize(R.styleable.PraiseView_pv_textSize, DisplayUtil.sp2px(12));
        mTextColor = attrArray.getColor(R.styleable.PraiseView_pv_textColor, Color.parseColor("#757575"));
        mPraiseDrawable = attrArray.getDrawable(R.styleable.PraiseView_pv_praise_imageSrc);
        mUnPraiseDrawable = attrArray.getDrawable(R.styleable.PraiseView_pv_unPraise_imageSrc);
        attrArray.recycle();

        initView();
    }

    private void initView() {
        if (mPraiseDrawable == null) {
            mPraiseDrawable = getResources().getDrawable(R.mipmap.icon_praise_orange);
        }
        if (mUnPraiseDrawable == null) {
            mUnPraiseDrawable = getResources().getDrawable(R.mipmap.icon_un_praise_gray);
        }
        mImageView.setImageDrawable(mIsLiked ? mPraiseDrawable : mUnPraiseDrawable);
        mScrollTextView.setTextColorAndSize(mTextColor, mTextSize);
        mCirclePaint.setAntiAlias(true);
        mCirclePaint.setStyle(Paint.Style.STROKE);
        mCirclePaint.setStrokeWidth(DisplayUtil.dip2px(2));
    }


    public void bindData(IPraiseListener praiseListener, boolean isLike, int likeCount) {
        mLikeCount = likeCount;
        mIPraiseListener = praiseListener;
        setLiked(isLike);
        refreshText(likeCount);
    }

    void refreshText(int likeCount) {
        mScrollTextView.bindData(likeCount > 0 ? likeCount : 0);

    }

    public void setLiked(boolean isLike) {
        mIsLiked = isLike;
        mImageView.setImageDrawable(isLike ? mPraiseDrawable : mUnPraiseDrawable);
    }


    public void clickLike() {
        setLiked(!mIsLiked);

        if (mAnimatorSet == null) {
            mAnimatorSet = generateScaleAnim(mImageView, 1f, 1.3f, 0.9f, 1f);
        } else {
            mAnimatorSet.cancel();
        }
        mAnimatorSet.start();
        if (mIsLiked) {
            mLikeCount++;
        } else if (mLikeCount > 0) {
            mLikeCount--;
        }
        mIPraiseListener.like(mIsLiked, mLikeCount);
        mScrollTextView.bindDataWithAnim(mLikeCount);


    }


    @Override
    public void onClick(View v) {
        if (!mCanClick) return;
        clickLike();
        generateCircleAnim();

    }

    /**
     * 生成一個縮放動畫 X軸和Y軸
     *
     * @param view       需要播放動畫的View
     * @param scaleValue 縮放軌跡
     * @return AnimatorSet 動畫物件
     */
    public static AnimatorSet generateScaleAnim(View view, float... scaleValue) {
        AnimatorSet animatorSet = new AnimatorSet();
        ObjectAnimator animatorX = ObjectAnimator.ofFloat(view, View.SCALE_X, scaleValue);
        animatorX.setDuration(600);

        ObjectAnimator animatorY = ObjectAnimator.ofFloat(view, View.SCALE_Y, scaleValue);
        animatorY.setDuration(600);

        List<Animator> animatorList = new ArrayList<>(2);
        animatorList.add(animatorX);
        animatorList.add(animatorY);
        animatorSet.playTogether(animatorList);
        return animatorSet;
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, mCurrentRadius, mCirclePaint);
    }

    /**
     * 計算波紋動畫的最大半徑
     */
    private void calculateRadius() {
        mCircleMaxRadius = Math.min(getWidth(), getHeight()) / 2 - DIP_8;
    }

    public interface IPraiseListener {
        void like(boolean isPraise, int praiseCount);
    }

    /***
     * 波紋動畫
     */
    private void generateCircleAnim() {
        calculateRadius();
        if (valueAnimator != null && valueAnimator.isRunning()) {
            valueAnimator.cancel();
        }
        valueAnimator = ValueAnimator.ofInt(0, mCircleMaxRadius);
        valueAnimator.setDuration(400);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mCurrentRadius = (int) animation.getAnimatedValue();
                if (mCurrentRadius >= mCircleMaxRadius) {
                    mCurrentRadius = 0;
                }
                mCirclePaint.setColor(ColorUtils.setAlphaComponent(mCircleColor, (int) ((mCircleMaxRadius - mCurrentRadius) * 1.0f / mCircleMaxRadius * 255)));
                invalidate();
            }
        });
        valueAnimator.start();
    }
}複製程式碼

可以看到PraiView繼承了LinearLayout,因此不需要進行復雜的尺寸和繪製，使用預設的就好了。/***

     * 波紋動畫
     */
    private void generateCircleAnim() {
        calculateRadius();
        if (valueAnimator != null && valueAnimator.isRunning()) {
            valueAnimator.cancel();
        }
        valueAnimator = ValueAnimator.ofInt(0, mCircleMaxRadius);
        valueAnimator.setDuration(400);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mCurrentRadius = (int) animation.getAnimatedValue();
                if (mCurrentRadius >= mCircleMaxRadius) {
                    mCurrentRadius = 0;
                }
                mCirclePaint.setColor(ColorUtils.setAlphaComponent(mCircleColor, (int) ((mCircleMaxRadius - mCurrentRadius) * 1.0f / mCircleMaxRadius * 255)));
                invalidate();
            }
        });
        valueAnimator.start();
    }
}複製程式碼

通過ValueAnimator不斷改變圓的半徑，進行不斷的重繪，形成了點選波紋擴散的效果，注意的是：

 @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, mCurrentRadius, mCirclePaint);
    }複製程式碼

畫波紋的程式碼一定要放在super.dispatchDraw(canvas);操作的後面，也就是說波紋是前景，這樣會更加美觀，否則就成了背景，另外隨州波紋的擴撒波紋的顏色逐漸透明這裡用了ColorUtils.setAlphaComponent（）。

接下來看下ScrollTextView這個控制元件，有兩個比較重要的點：

怎麼處理進位退位？/**

 * 計算不變，原來，和改變後各部分的數字
 * 這裡是只針對加一和減一去計算的演算法，因為直接設定的時候沒有動畫
 */
private void calculateChangeNum(int change) {
    mChange = change;
    if (change == 0) {
        mChangeNumbers[0] = String.valueOf(mOriginValue);
        mChangeNumbers[1] = "";
        mChangeNumbers[2] = "";
        return;
    }
    toBigger = change > 0;
    String oldNum = String.valueOf(mOriginValue);
    String newNum = String.valueOf(mOriginValue + change);

    int oldNumLen = oldNum.length();

    if (isLengthDifferent(mOriginValue, mOriginValue + change)) {
        mChangeNumbers[0] = "";
        mChangeNumbers[1] = oldNum;
        mChangeNumbers[2] = newNum;
    } else {
        for (int i = 0; i < oldNumLen; i++) {
            char oldC1 = oldNum.charAt(i);
            char newC1 = newNum.charAt(i);
            if (oldC1 != newC1) {
                if (i == 0) {
                    mChangeNumbers[0] = "";
                } else {
                    mChangeNumbers[0] = newNum.substring(0, i);
                }
                mChangeNumbers[1] = oldNum.substring(i);
                mChangeNumbers[2] = newNum.substring(i);
                break;
            }
        }
    }
    mOriginValue = mOriginValue + change;


}複製程式碼

這裡採用一個長度為3的陣列存放不變的數字、原來的數字、變化後的數字。例如：

87到88，那麼陣列的元素為"8","7","8"；99到100，那麼陣列的元素為"","99","100"。不變的數字在draw的時候直接花一次就好了，原來的數字和變化後的數字需要不斷改變Y值形成滾動的動畫。

private void drawText(Canvas canvas) {
    Paint.FontMetricsInt fontMetrics = mTextPaint.getFontMetricsInt();
    float y = (getHeight() - fontMetrics.bottom - fontMetrics.top) / 2;
    canvas.drawText(String.valueOf(mChangeNumbers[0]), mStartX, y, mTextPaint);
    if (mChange != 0) {
        //字型滾動
        float fraction = (mTextSize - Math.abs(mOldOffsetY)) / mTextSize;
        Log.e("drawText", "drawText" + fraction);
        mTextPaint.setColor(ColorUtils.setAlphaComponent(mTextColor, (int) (fraction * 255)));
        canvas.drawText(String.valueOf(mChangeNumbers[1]), mSingleTextWidth * mChangeNumbers[0].length() + mStartX, y + mOldOffsetY, mTextPaint);
        mTextPaint.setColor(ColorUtils.setAlphaComponent(mTextColor, (int) ((1 - fraction) * 255)));
        canvas.drawText(String.valueOf(mChangeNumbers[2]), mSingleTextWidth * mChangeNumbers[0].length() + mStartX, y + mNewOffsetY, mTextPaint);
    }

}複製程式碼

值得注意的是這裡：

private int getContentWidth() {
    /**
     * 加1為了防止進位時寬度不夠顯示不下
     */
    return (int) (getPaddingRight() + getPaddingLeft() + mSingleTextWidth * (String.valueOf(mOriginValue).length() + 1));
}複製程式碼

控制元件的寬度為當前字元的寬度再加一個字元寬度，避免發生進位時顯示不全的問題。

程式碼github對你有幫助的話順手給個星吧！

碼字不易，期待各位的讚賞！！！

仿 “即刻APP” 滑動返回的效果
2018-08-20
APP
Flutter仿掘金點贊效果
2020-05-20
Flutter
仿抖音點贊按鈕
2018-07-17
React Native 仿抖音點贊特效
2018-07-19
React Native特效
iOS 仿即刻評論輸入框帶圖片
2018-03-02
iOS
用Flutter實現一個仿Twitter的點贊效果
2019-03-03
Flutter
iOS仿抖音點贊動畫、波浪圖、主張圖、3D旋轉、圖片處理、播放器等原始碼
2018-09-11
iOS動畫3D播放器原始碼
仿網易LOFTER視差滾動列表
2019-03-04
Android自定義View教你一步一步實現即刻點贊效果
2018-12-25
AndroidView
android短視訊開發，實現動態點贊出現的點贊動畫
2021-12-20
Android動畫
表格顯示滾動條
2018-07-17
仿騰訊課堂固定滾動列表ReactNative元件
2019-03-04
React元件
Android——仿淘寶頭條垂直滾動廣告
2018-08-02
Android
flutter仿微信底部圖示漸變
2020-04-13
Flutter
頁面圖片自動滾動
2018-08-28
一鍵免費自動AI摳圖，效果連PS大哥也點贊！
2019-02-19
AI
VS+Qt+Halcon——顯示圖片，實現滑鼠縮放、移動圖片
2021-08-25
QT
win10桌面圖示怎麼隨意擺放取消桌面圖示自動排列設定的方法
2021-01-13
Win10
CSS 例項之滾動的圖片欄
2018-09-23
CSS
關於億圖圖示縮放鎖定1%的問題
2020-11-18
Android 點選波紋擴散動畫
2019-03-04
Android動畫
移動端點透事件--阻止滾動事件
2018-07-10
事件
直播系統原始碼，點選滾動的輪播圖自動跳轉到相應頁
2022-06-17
原始碼
解決方案 | IrfanView如何滑動滾輪影像縮放？
2024-08-28
View
Android 實現GridView的橫向滾動，實現仿京東秒殺效果
2018-07-19
AndroidView
jQuery圖片無縫滾動效果
2018-05-18
jQuery
react無縫滾動輪播圖
2018-07-22
React
仿釘釘頭像（有頭像顯示圖片拼接，無圖顯示暱稱）
2018-12-14
使用jQuery實現的平滑滾動輪播圖
2018-08-29
jQuery
如何滾動截圖長圖？手把手教你
2024-11-22
『自定義View實戰』—— 仿ios圖示下載view
2019-02-20
ViewiOS
html/css 滾動到元素位置，顯示載入動畫
2020-06-19
HTMLCSS動畫
開放世界地圖設計的秘訣：圖示的多維應用
2024-07-17
地圖
QLabel顯示圖片，並實現縮放
2020-10-27
爬蟲實戰 -- QQ空間自動點贊
2020-10-01
爬蟲
仿有贊後臺+vue+ts+vuecli3.0+elementUi
2018-10-31
VueUI
div顯示滾動條（類似合同閱讀）
2020-10-10
Redis高效實現點贊、取消點贊只需這四步
2020-01-13
Redis
Python:Excel自動化實踐入門篇甲【留言點贊領圖書門票】
2023-02-24
PythonExcel

仿即刻的點贊滾動放大波紋圖示

大體思路：

關鍵程式碼解析：

相關文章