Customize view to imitate today's headlines and like animation!

Preface

I usually like to read today's headlines , Finance and economics above 、 Technology and NBA I like the columns very much , I accidentally found that his favorite animation was not bad , It attracted me at once . So I want to realize it myself .

The final effect comparison is as follows ：

headlines ：

Copywriting effect ：

One 、 Reading guide

In the process of learning , Each knowledge point is a small system . such as Glide The source code parsing , I saw an author write 10 This article is a series to analyze （Glide The source code parsing https://www.jianshu.com/nb/45157164）; Another example is customization view, The throwing line is also from three aspects ( draw 、 Layout 、 Animation )11 An article to describe ,Carson_Ho I also wrote a series to describe ; Therefore, to master the knowledge system in a knowledge point still requires some effort .

Two 、 Effect analysis

• 1 One click will scatter five random expressions and click sound effects ;
• 2 Continuous clicking will continuously spread expressions and play sound effects ;
• 3 Long press will spread all the time ;
• 4 The number of times and slogans will appear during continuous sprinkling (0-20 encourage ,20-40 come on. ,>40 fantastic );

3、 ... and 、 Implementation process

3.1 Outer layout

Because there will be some like buttons in the comment box and information list page at the bottom of today's headlines , Then the expression opportunity to like the effect exists all over the screen , So the outermost layer inherits RelativeLayout. Then set the width and height match_parent. Trigger when the button is clicked OnTouch event :

 ivThumbBottom.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (event.getAction() == MotionEvent.ACTION_DOWN) {
                    lastDownTime = System.currentTimeMillis();
                    // Get  x y To determine the starting point of the animation expression 
                    x = (int) event.getRawX();
                    y = (int) event.getRawY();
                    Log.i("aaa", (System.currentTimeMillis() - lastDownTime) + "");
                    handler.postDelayed(mLongPressed, 100);
                }
                if (event.getAction() == MotionEvent.ACTION_UP) {
                    Log.i("aaa", (System.currentTimeMillis() - lastDownTime) + "");
                    if (System.currentTimeMillis() - lastDownTime < 100) {// Judged as a click event 
                        articleThumbRl.setVisibility(View.VISIBLE);
                        articleThumbRl.setThumb(true, x, y, articleThumbRl);
                        handler.removeCallbacks(mLongPressed);
                    } else {// It is judged that it is released after a long press event 
                        handler.removeCallbacks(mLongPressed);
                    }
                }
                return true;
            }
        });

It is realized in the following ways , Long press the cycle to spread the expression .

final Runnable mLongPressed = new Runnable() {
        @Override
        public void run() {
            articleThumbRl.setVisibility(View.VISIBLE);
            articleThumbRl.setThumb(x, y, articleThumbRl);
            handler.postDelayed(mLongPressed, 100);
        }
    };

3.2 setThumb Method Handle click events

public void setThumb(float x, float y, ArticleRl articleThumbRl) {
        // Here we deal with sound playback 
        if (mMediaPlayer.isPlaying()) {
            mMediaPlayer.seekTo(0);// When clicking repeatedly , Play from the beginning 
        } else {
            mMediaPlayer.start();
        }
        if (System.currentTimeMillis() - lastClickTime > 800) {// One click 
            addThumbImage(mContext, x, y, this);
            lastClickTime = System.currentTimeMillis();
            for (int i = getChildCount() - 5; i < getChildCount(); i++) {
                if (getChildAt(i) instanceof ThumbEmoji) {
                    ((ThumbEmoji) getChildAt(i)).setThumb(true, articleThumbRl);
                }
            }
            currentNumber = 0;
            if (thumbNumber != null) {
                removeView(thumbNumber);
                thumbNumber = null;
            }
        } else {// Click on the straight 
            lastClickTime = System.currentTimeMillis();
            Log.i(TAG, " Animation is currently in progress ");
            addThumbImage(mContext, x, y, this);
            for (int i = getChildCount() - 5; i < getChildCount(); i++) {
                if (getChildAt(i) instanceof ThumbEmoji) {
                    ((ThumbEmoji) getChildAt(i)).setThumb(true, articleThumbRl);
                }
            }
            currentNumber++;
            // Add a number combo here view
            LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            DisplayMetrics metrics = mContext.getResources().getDisplayMetrics();
            layoutParams.setMargins(600, (int) (y) - 300, 0, 150);
            if (thumbNumber == null) {
                thumbNumber = new ThumbNumber(mContext);
                addView(thumbNumber, layoutParams);// The second parameter   Keep the number combo at the top 
            }
            thumbNumber.setNumber(currentNumber);
        }
    }

among , Digital Combo view The numbers in have a color gradient and stroke effect , Color gradient with LinearGradient（ The throwing line course has ）, Stroke is drawn by overlapping .

textPaint = new Paint();
        textPaint.setTextSize(TEXT_SIZE);
        textPaint.setTextAlign(Paint.Align.LEFT);
        textPaint.setStrokeWidth(STROKE_WIDTH);
        textPaint.setStyle(Paint.Style.FILL);
        textPaint.setTypeface(Typeface.DEFAULT_BOLD);
        // Here, in order to make the top and bottom colors half and half 
        LinearGradient mLinearGradient = new LinearGradient(0, 0, 0, 90f,
                new int[]{0xFFFF9641, 0xFFFF9641, 0xFFFF9641, 0xFFFF9641, 0xFFff0000, 0xFFff0000},
                null, Shader.TileMode.CLAMP);
        textPaint.setShader(mLinearGradient);
        // Stroke brush 
        textPaintStroke = new Paint();
        textPaintStroke.setColor(Color.BLACK);
        textPaintStroke.setTextSize(TEXT_SIZE);
        textPaintStroke.setTextAlign(Paint.Align.LEFT);
        textPaintStroke.setStrokeWidth(4);
        textPaintStroke.setStyle(Paint.Style.STROKE);
        textPaintStroke.setTypeface(Typeface.DEFAULT_BOLD);

3.3 Add a custom expression view ThumbEmoji

private void addThumbImage(Context context, float x, float y, ThumbEmoji.AnimatorListener animatorListener) {
        List<Integer> list = new ArrayList<>();
        for (int i = 0; i < 8; i++) {
            list.add(i);
        }
        Collections.shuffle(list);// Out of order 
        for (int i = 0; i < 5; i++) {
            LayoutParams layoutParams = new LayoutParams(100, 100);
            layoutParams.setMargins((int) x, (int) y - 50, 0, 0);
            ThumbEmoji articleThumb = new ThumbEmoji(context);
            articleThumb.setEmojiType(list.get(i));
            articleThumb.setmAnimatorListener(animatorListener);
            if (getChildCount() > 1)
                this.addView(articleThumb, getChildCount() - 1, layoutParams);
            else {
                this.addView(articleThumb, layoutParams);
            }
        }
    }

And here's addview Method set him index by  childcount-1 after , You can keep it in digital combo view Below , But I set it to 1 There will be bug, I have to go and see again .

if (getChildCount() > 1)
                this.addView(articleThumb, getChildCount() - 1, layoutParams);
            else {
                this.addView(articleThumb, layoutParams);
            }

3.4 Animation of flower spreading effect （ That is, parabola animation ） The implementation of the

Parabola animation It is divided into rising and falling parts , On the rise ,x The axis moves left or right at a uniform speed ,y The shaft decelerates upward , The emoticon is wide and high from 0 Change to 100; When it comes down ,x Turn into 1.2 times x, The height becomes the highest 0.8, Transparency comes at the end 1/8 In the time period from 1 Turn into 0.

private void showThumbDownAni(ArticleRl articleThumbRl) {
        float topX = -(1080 - 200) + (float) ((2160 - 400) * Math.random());
        float topY = -300 + (float) (-700 * Math.random());
        // Rising animation 
        // Parabola animation  x Direction 
        ObjectAnimator translateAnimationX = ObjectAnimator.ofFloat(this, "translationX",
                0, topX);
        translateAnimationX.setDuration(DURATION);
        translateAnimationX.setInterpolator(new LinearInterpolator());
        //y Direction 
        ObjectAnimator translateAnimationY = ObjectAnimator.ofFloat(this, "translationY",
                0, topY);
        translateAnimationY.setDuration(DURATION);
        translateAnimationY.setInterpolator(new DecelerateInterpolator());
        // The size of the expression picture changes 
        ObjectAnimator translateAnimationRightLength = ObjectAnimator.ofInt(this, "rightLength",
                0, 100, 100, 100, 100, 100);
        translateAnimationRightLength.setDuration(DURATION);
        ObjectAnimator translateAnimationBottomLength = ObjectAnimator.ofInt(this, "bottomLength",
                0, 100, 100, 100, 100, 100);
        translateAnimationBottomLength.setDuration(DURATION);
        translateAnimationRightLength.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                invalidate();//ondraw Under what circumstances will ?
            }
        });
        // Animation Collection 
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.play(translateAnimationX).with(translateAnimationY).with(translateAnimationRightLength).with(translateAnimationBottomLength);

        // Drop animation 
        // Parabola animation , principle ： Two displacement animations , A lateral uniform motion , A longitudinal variable speed movement , Two animations are executed simultaneously , You have the effect of parabola .
        ObjectAnimator translateAnimationXDown = ObjectAnimator.ofFloat(this, "translationX", topX, topX * 1.2f);
        translateAnimationXDown.setDuration(DURATION / 5);
        translateAnimationXDown.setInterpolator(new LinearInterpolator());

        ObjectAnimator translateAnimationYDown = ObjectAnimator.ofFloat(this, "translationY", topY, topY * 0.8f);
        translateAnimationYDown.setDuration(DURATION / 5);
        translateAnimationYDown.setInterpolator(new AccelerateInterpolator());
        // transparency 
        ObjectAnimator alphaAnimation = ObjectAnimator.ofFloat(this, "alpha", 1f, 1f, 1f, 1f, 1f, 1f, 1f, 0f);
        alphaAnimation.setDuration(DURATION / 5);
        AnimatorSet animatorSetDown = new AnimatorSet();// Set the animation playback order 
        // Play the rising animation 
        animatorSet.start();
        animatorSet.addListener(new Animator.AnimatorListener() {

            @Override
            public void onAnimationEnd(Animator animation) {
                animatorSetDown.play(translateAnimationXDown).with(translateAnimationYDown).with(alphaAnimation);
                animatorSetDown.start();
            }
        });
        animatorSetDown.addListener(new Animator.AnimatorListener() {

            @Override
            public void onAnimationEnd(Animator animation) {
                articleThumbRl.removeView(ThumbEmoji.this);
                mAnimatorListener.onAnimationEmojiEnd();
            }
        });
    }

Four 、 summary

project github Address ：https://github.com/honglei92/toutiaothumb view It is something that application development often touches , From several aspects of using concept principle, we need to deeply study and understand 、 Mechanical analysis , Make a thorough understanding of .apk Address ：https://github.com/honglei92/toutiaothumb/blob/master/app/release/app-release.apk

Android Advanced development system notes 、 The latest interview review notes PDF, my GitHub

At the end of the article

Your favorite collection is my greatest encouragement ！ Welcome to follow me , Share Android dried food , communication Android technology . What's your opinion on the article , Or any technical problems , Welcome to leave a message and discuss in the comment area ！