自定義view系列之——貝塞爾曲線仿美拍直播刷禮物

我特別喜歡看明星的直播，什么演技精湛吳亦凡，百花影帝李易峰，鐵血硬漢黃子韜，男人本色是鹿晗，從不吸毒柯震東，一米八零黃曉明，從未整容是楊穎，闔家歡樂王寶強。啊，這些明星我特別喜歡，老喜歡他們的直播了。今天，仿照美拍直播刷禮物做了同樣的效果。

不太明白貝塞爾曲線的，可以看我另一篇貝塞爾曲線基礎篇

github代碼直通車

這里是美拍效果：


giphy的副本.gif

自制效果：(背景仍為截圖)


giphy.gif

實現思路：

1.寫一個自定義Relativelayout，每次點擊，就在底部添加一個imageview。
2.隨機顯示一種禮物圖標。
3.先讓imageview做放大動畫出現，再繪制貝塞爾曲線。
4.計算曲線路徑，根據曲線實時設置imageview坐標。

準備工作，知道TypeEvaluator：
這個類是動畫能實現的基礎，在獲取動畫對象時只需要傳入起始和結束值系統就會自動完成值的平滑過渡。因為根據動畫的類型，內部的evaluate()方法根據規則計算路徑上的點坐標，并返回這個Point。當然也可以繼承TypeEvaluator自定義計算規則。

使用方法：
ValueAnimator animator = ValueAnimator.ofObject(evaluator, new PointF(), new PointF());
設置動畫監聽，在onAnimationUpdate()回調中PointF pointF = (PointF) animation.getAnimatedValue()或去當前路徑上的點pointF。

TypeEvaluator接口：

public interface TypeEvaluator<T> {

    /**
     * This function returns the result of linearly interpolating the start and end values, with
     * <code>fraction</code> representing the proportion between the start and end values. The
     * calculation is a simple parametric calculation: <code>result = x0 + t * (x1 - x0)</code>,
     * where <code>x0</code> is <code>startValue</code>, <code>x1</code> is <code>endValue</code>,
     * and <code>t</code> is <code>fraction</code>.
     *
     * @param fraction   The fraction from the starting to the ending values
     * @param startValue The start value.
     * @param endValue   The end value.
     * @return A linear interpolation between the start and end values, given the
     *         <code>fraction</code> parameter.
     */
    public T evaluate(float fraction, T startValue, T endValue);

}

實現步驟：

1.創建數組，添加5個禮物drawable圖標。設置布局參數為底部居中。

    private void init() {
        drawables[0] = ContextCompat.getDrawable(getContext(),R.mipmap.ic1);
        drawables[1] = ContextCompat.getDrawable(getContext(),R.mipmap.ic2);
        drawables[2] = ContextCompat.getDrawable(getContext(),R.mipmap.ic3);
        drawables[3] = ContextCompat.getDrawable(getContext(),R.mipmap.ic4);
        drawables[4] = ContextCompat.getDrawable(getContext(),R.mipmap.ic5);

        layoutParams = new LayoutParams(100,100);
        //代碼設置布局方式，底部居中
        layoutParams.addRule(CENTER_HORIZONTAL,TRUE);
        layoutParams.addRule(ALIGN_PARENT_BOTTOM,TRUE);

    }

2.點擊添加imageview，同時啟動放大出現動畫和貝塞爾漂流記動畫。

    public void addImageView(){
        ImageView imageView = new ImageView(getContext());
        imageView.setImageDrawable(drawables[(int) (Math.random()*drawables.length)]);
        imageView.setLayoutParams(layoutParams);

        addView(imageView);
        setAnim(imageView).start();
        getBezierValueAnimator(imageView).start();
    }

3.放大動畫

    private AnimatorSet setAnim(View view){
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(view, View.SCALE_X, 0.2f, 1f);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(view, View.SCALE_Y, 0.2f, 1f);

        AnimatorSet enter = new AnimatorSet();
        enter.setDuration(500);
        enter.setInterpolator(new LinearInterpolator());//線性變化
        enter.playTogether(scaleX,scaleY);
        enter.setTarget(view);

        return enter;
    }

4.給動畫設置自定義BezierEvaluator類，設置底部居中為貝塞爾起點，結束點隨機在寬度以內，高度50以內。

    private ValueAnimator getBezierValueAnimator(View target) {

        //初始化一個貝塞爾計算器- - 傳入
        BezierEvaluator evaluator = new BezierEvaluator(getPointF(),getPointF());

        //這里最好畫個圖 理解一下 傳入了起點 和 終點
        PointF randomEndPoint = new PointF((float) (Math.random()*screenWidth), (float) (Math.random()*50));
        ValueAnimator animator = ValueAnimator.ofObject(evaluator, new PointF(screenWidth / 2, screenHeight), randomEndPoint);
        animator.addUpdateListener(new BezierListener(target));
        animator.setTarget(target);
        animator.setDuration(3000);
        return animator;
    }

每次產生隨機控制點

    private PointF getPointF() {
        PointF pointF = new PointF();
        pointF.x = (float) (Math.random()*screenWidth);
        pointF.y = (float) (Math.random()*screenHeight/4);
        return pointF;
    }

5.自定義BezierEvaluator路徑計算類，構造方法傳入2個點，即設置為三階貝塞爾曲線的2個控制點。依照三階貝塞爾曲線計算公式：


三階公式

再結合startPoint和endPoint計算當前路徑上點point并return。

    public class BezierEvaluator implements TypeEvaluator<PointF> {


        private PointF pointF1;
        private PointF pointF2;
        public BezierEvaluator(PointF pointF1,PointF pointF2){
            this.pointF1 = pointF1;
            this.pointF2 = pointF2;
        }
        @Override
        public PointF evaluate(float time, PointF startValue,
                               PointF endValue) {

            float timeLeft = 1.0f - time;
            PointF point = new PointF();//結果

            point.x = timeLeft * timeLeft * timeLeft * (startValue.x)
                    + 3 * timeLeft * timeLeft * time * (pointF1.x)
                    + 3 * timeLeft * time * time * (pointF2.x)
                    + time * time * time * (endValue.x);

            point.y = timeLeft * timeLeft * timeLeft * (startValue.y)
                    + 3 * timeLeft * timeLeft * time * (pointF1.y)
                    + 3 * timeLeft * time * time * (pointF2.y)
                    + time * time * time * (endValue.y);
            return point;
        }
    }

6.屬性動畫監聽，拿到該路徑點給imageview設置坐標；并設置逐漸透明的動畫。

    private class BezierListener implements ValueAnimator.AnimatorUpdateListener {

        private View target;

        public BezierListener(View target) {
            this.target = target;
        }

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            //這里獲取到貝塞爾曲線計算出來的的x y值 賦值給view 這樣就能讓愛心隨著曲線走啦
            PointF pointF = (PointF) animation.getAnimatedValue();
            target.setX(pointF.x);
            target.setY(pointF.y);
            // 這里順便做一個alpha動畫
            target.setAlpha(1 - animation.getAnimatedFraction());
        }
    }

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/bg"
    tools:context="com.example.berziergift.berziergift.MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical"
        android:gravity="right"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="40dp">

        <com.example.berziergift.berziergift.MyGiftView
            android:id="@+id/giftview"
            android:layout_width="100dp"
            android:layout_height="300dp"/>

        <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:onClick="like"
            android:layout_marginRight="5dp"
            android:layout_below="@id/giftview"/>
    </LinearLayout>

</RelativeLayout>

完整代碼：

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.TypeEvaluator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.PointF;
import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView;
import android.widget.RelativeLayout;

/**
 * Created by libo on 2017/11/28.
 */

public class MyGiftView extends RelativeLayout{
    private int screenWidth;
    private int screenHeight;
    private LayoutParams layoutParams;
    private Drawable[] drawables = new Drawable[5];

    public MyGiftView(Context context) {
        super(context);
        init();
    }

    public MyGiftView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        drawables[0] = ContextCompat.getDrawable(getContext(),R.mipmap.ic1);
        drawables[1] = ContextCompat.getDrawable(getContext(),R.mipmap.ic2);
        drawables[2] = ContextCompat.getDrawable(getContext(),R.mipmap.ic3);
        drawables[3] = ContextCompat.getDrawable(getContext(),R.mipmap.ic4);
        drawables[4] = ContextCompat.getDrawable(getContext(),R.mipmap.ic5);

        layoutParams = new LayoutParams(100,100);
        //代碼設置布局方式，底部居中
        layoutParams.addRule(CENTER_HORIZONTAL,TRUE);
        layoutParams.addRule(ALIGN_PARENT_BOTTOM,TRUE);

    }

    public void addImageView(){
        ImageView imageView = new ImageView(getContext());
        imageView.setImageDrawable(drawables[(int) (Math.random()*drawables.length)]);
        imageView.setLayoutParams(layoutParams);

        addView(imageView);
        setAnim(imageView).start();
        getBezierValueAnimator(imageView).start();
    }

    private ValueAnimator getBezierValueAnimator(View target) {

        //初始化一個貝塞爾計算器- - 傳入
        BezierEvaluator evaluator = new BezierEvaluator(getPointF(),getPointF());

        //這里最好畫個圖 理解一下 傳入了起點 和 終點
        PointF randomEndPoint = new PointF((float) (Math.random()*screenWidth), (float) (Math.random()*50));
        ValueAnimator animator = ValueAnimator.ofObject(evaluator, new PointF(screenWidth / 2, screenHeight), randomEndPoint);
        animator.addUpdateListener(new BezierListener(target));
        animator.setTarget(target);
        animator.setDuration(3000);
        return animator;
    }

    /**
     * 產生隨機控制點
     * @return
     */
    private PointF getPointF() {
        PointF pointF = new PointF();
        pointF.x = (float) (Math.random()*screenWidth);
        pointF.y = (float) (Math.random()*screenHeight/4);
        return pointF;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        screenWidth = getMeasuredWidth();
        screenHeight = getMeasuredHeight();
    }

    private AnimatorSet setAnim(View view){
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(view, View.SCALE_X, 0.2f, 1f);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(view, View.SCALE_Y, 0.2f, 1f);

        AnimatorSet enter = new AnimatorSet();
        enter.setDuration(500);
        enter.setInterpolator(new LinearInterpolator());//線性變化
        enter.playTogether(scaleX,scaleY);
        enter.setTarget(view);

        return enter;
    }

    private class BezierListener implements ValueAnimator.AnimatorUpdateListener {

        private View target;

        public BezierListener(View target) {
            this.target = target;
        }

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            //這里獲取到貝塞爾曲線計算出來的的x y值 賦值給view 這樣就能讓愛心隨著曲線走啦
            PointF pointF = (PointF) animation.getAnimatedValue();
            target.setX(pointF.x);
            target.setY(pointF.y);
            // 這里順便做一個alpha動畫
            target.setAlpha(1 - animation.getAnimatedFraction());
        }
    }

    public class BezierEvaluator implements TypeEvaluator<PointF> {


        private PointF pointF1;
        private PointF pointF2;
        public BezierEvaluator(PointF pointF1,PointF pointF2){
            this.pointF1 = pointF1;
            this.pointF2 = pointF2;
        }
        @Override
        public PointF evaluate(float time, PointF startValue,
                               PointF endValue) {

            float timeLeft = 1.0f - time;
            PointF point = new PointF();//結果

            point.x = timeLeft * timeLeft * timeLeft * (startValue.x)
                    + 3 * timeLeft * timeLeft * time * (pointF1.x)
                    + 3 * timeLeft * time * time * (pointF2.x)
                    + time * time * time * (endValue.x);

            point.y = timeLeft * timeLeft * timeLeft * (startValue.y)
                    + 3 * timeLeft * timeLeft * time * (pointF1.y)
                    + 3 * timeLeft * time * time * (pointF2.y)
                    + time * time * time * (endValue.y);
            return point;
        }
    }

}

大家定當好好努力工作，三省吾身，不要荒廢青春，不然，15年后拿什么娶她？


giphy.gif
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容