自定义洒豆子

先上效果图

    

 

洒豆子的效果，突发奇想，觉得这个动画挺有意思的，就抽空写了一个玩玩

绘制流程：

　　定义6个‘’豆子‘’，每个豆子有各自的属性，大小，抛出的速度等，然后控制每个的方向和状态，回弹效果使用差值器 BounceInterpolator

package com.fragmentapp.view.beans;

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.BounceInterpolator;

import com.fragmentapp.R;
import com.fragmentapp.helper.RandomUtil;

/**
 * Created by liuzhen on 2017/1/17.
 */

public class BeansView extends View {

    private Paint paint;
    private int mWidth;
    private int mHeight;
    private int top;

    private ValueAnimator va;

    private Beans beans1,beans2,beans3,beans4,beans5,beans6;

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

    public BeansView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BeansView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        Log.e("tag","init");
        setWillNotDraw(false);
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(getResources().getColor(R.color.color_ff9c19));
        //随机生成球体的大小、
        beans1 = new Beans(RandomUtil.random(5,15));
        beans2 = new Beans(RandomUtil.random(5,15));
        beans3 = new Beans(RandomUtil.random(5,15));
        beans4 = new Beans(RandomUtil.random(5,15));
        beans5 = new Beans(RandomUtil.random(5,15));
        beans6 = new Beans(RandomUtil.random(5,15));
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        if (changed) {
            mWidth = getWidth();
            mHeight = getHeight();
            this.top = top;
            startAnim();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //正常向右掉落，这里也可以利用随机生成方向，这里就固定左边三个右边三个
        canvas.drawCircle(beans1.getCx(), beans1.getCy(), beans1.getRadius(), paint);
        canvas.drawCircle(beans2.getCx(), beans2.getCy(), beans2.getRadius(), paint);
        canvas.drawCircle(beans3.getCx(), beans3.getCy(), beans3.getRadius(), paint);
        //让球往左边掉落
        canvas.drawCircle(-beans4.getCx()+mWidth, beans4.getCy(), beans4.getRadius(), paint);
        canvas.drawCircle(-beans5.getCx()+mWidth, beans5.getCy(), beans5.getRadius(), paint);
        canvas.drawCircle(-beans6.getCx()+mWidth, beans6.getCy(), beans6.getRadius(), paint);

    }

    public void startAnim() {
        if (mWidth == 0) return;

        beans1.setState(0);
        beans1.setOff(0);
        beans1.setRand(RandomUtil.random(20));//随机生成抛出的速度值

        beans2.setState(0);
        beans2.setOff(0);
        beans2.setRand(RandomUtil.random(20));

        beans3.setState(0);
        beans3.setOff(0);
        beans3.setRand(RandomUtil.random(20));

        beans4.setState(0);
        beans4.setOff(0);
        beans4.setRand(RandomUtil.random(20));

        beans5.setState(0);
        beans5.setOff(0);
        beans5.setRand(RandomUtil.random(20));

        beans6.setState(0);
        beans6.setOff(0);
        beans6.setRand(RandomUtil.random(20));

        va = ValueAnimator.ofFloat(top, mHeight - top);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {

                float val = (float)animation.getAnimatedValue();

                beans1.setCy(val);
                beans1.move(mWidth);//先移动坐标，实际上是改变了off偏移量的值
                beans1.setCx(mWidth / 2 + beans1.getOff());//刷新X轴坐标

                beans2.setCy(val);
                beans2.move(mWidth);
                beans2.setCx(mWidth / 2 + beans2.getOff());

                beans3.setCy(val);
                beans3.move(mWidth);
                beans3.setCx(mWidth / 2 + beans3.getOff());

                beans4.setCy(val);
                beans4.move(mWidth);
                beans4.setCx(mWidth / 2 + beans4.getOff());

                beans5.setCy(val);
                beans5.move(mWidth);
                beans5.setCx(mWidth / 2 + beans5.getOff());

                beans6.setCy(val);
                beans6.move(mWidth);
                beans6.setCx(mWidth / 2 + beans6.getOff());

                invalidate();
            }
        });
        va.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {

            }

            @Override
            public void onAnimationEnd(Animator animator) {
                //防止停止后球体因为半径的不一样而降落到地面的水平不一样，统一水平线
                beans1.setCy(mHeight - beans1.getRadius());

                beans2.setCy(mHeight - beans2.getRadius());

                beans3.setCy(mHeight - beans3.getRadius());

                beans4.setCy(mHeight - beans4.getRadius());

                beans5.setCy(mHeight - beans5.getRadius());

                beans6.setCy(mHeight - beans6.getRadius());

                invalidate();
            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });
        va.setInterpolator(new BounceInterpolator());//重力差值器
        va.setDuration(3000);
        va.setRepeatMode(ValueAnimator.RESTART);
        va.start();
    }

    public void stopAnim() {
        va.cancel();
        va = null;
    }

}

这里主要把逻辑封装到单独的对象里面去了，所以view类看起来很清爽

下面是豆子类

package com.fragmentapp.view.beans;

import android.util.Log;

/**
 * Created by liuzhen on 2018/1/18.
 */

public class Beans {

    public Beans(){ }

    public Beans(int radius){
        this.radius = radius;
    }

    /**X坐标*/
    private float cx;
    /**Y坐标*/
    private float cy;
    /**偏移量*/
    private float off;
    /**随机生成的速度值*/
    private float rand;
    /**是否碰到边缘*/
    private int state;
    /**圆球的大小*/
    private float radius;

    /**移动 X 坐标，并且碰到边界后回弹*/
    public void move(int width){
        if (cx < 0 || state == 1) {//碰到左边的边缘
            state = 1;
            off += rand;
        } else if (cx >= width || state == 2) {//碰到右边的边缘
            state = 2;
            off -= rand;
        }else if(state == 0) {
            state = 0;
            off += rand;
        }
//        Log.e("tag","-- cx "+(int)cx  + " width "+width + " state "+state);
    }

    public float getCx() {
        return cx;
    }

    public void setCx(float cx) {
        this.cx = cx;
    }

    public float getOff() {
        return off;
    }

    public void setOff(float off) {
        this.off = off;
    }

    public float getRand() {
        return rand;
    }

    public void setRand(float rand) {
        this.rand = rand;
    }

    public int getState() {
        return state;
    }

    public void setState(int state) {
        this.state = state;
    }

    public float getCy() {
        return cy;
    }

    public void setCy(float cy) {
        this.cy = cy;
    }

    public float getRadius() {
        return radius;
    }

    public void setRadius(float radius) {
        this.radius = radius;
    }
}

主要逻辑集中在move方法中

默认是正常抛出，然后碰到边缘后改变状态往回弹

使用上只关注两个方法就行了

 这里是把控件放在了一个dialog里面，这个看个人喜欢，显然dialog不是很适合，或者可以加到下拉库的头部上去，效果应该不错

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/shape_dialog_bg"
    android:padding="@dimen/d20.0"
    android:orientation="vertical"
    android:id="@+id/root">

    <com.fragmentapp.view.beans.BeansView
        android:id="@+id/beans"
        android:layout_width="@dimen/d350.0"
        android:layout_height="@dimen/d300.0"
        android:layout_gravity="center_horizontal" />

    <!--<View-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="@dimen/d1.0"-->
        <!--android:background="@color/white"/>-->

    <TextView
        android:id="@+id/tv_val"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="@dimen/d20.0"
        android:text="加载中..."
        android:textColor="@color/color_cccccc"
        android:textSize="@dimen/d43.0" />

</LinearLayout>

到这里基本完成了，不过这样的效果绘制显然不是很好看，而且很low，所以要优化一下绘制的图形，让它看起来更高大上一些，最优先需要改的肯定是圆球了，各种3D形状，很好看，不过没法绘制，只能网上找个图片直接drawbitmap了，大多的华丽都是跟图片搭配的

 然而就是代码了，代码看起来也有点low，也需要优化一下

 1：代码优化

　　以前的是固定对象，然后绘制，肯定需要稍微动态一点了

2：圆球绘制

　　以前的是直接绘制圆，不好看，从网上下载一个圆形 icon，代替圆，看起来更立体一点

这里的做法是把圆形对象也放进实体类里面去，方便统一获取，然后创建一个统一管理实体类的集合

 先获取到我们的icon，随机产生圆球的大小，添加进集合

接下来所有的固定的地方都换成for循环来代替

是不是方便多了，看起来简洁多了，可以对比两边的代码，你会发现，哎呦，不错哦

package com.fragmentapp.view.beans;

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.BounceInterpolator;

import com.fragmentapp.R;
import com.fragmentapp.helper.RandomUtil;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by liuzhen on 2017/1/17.
 */

public class BeansView extends View {

    private Paint paint;
    private int mWidth;
    private int mHeight;
    private int top;

    private ValueAnimator va;

    private List<Beans> beans = null;

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

    public BeansView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BeansView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        Log.e("tag","init");
        setWillNotDraw(false);
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(getResources().getColor(R.color.color_ff9c19));

        beans = new ArrayList<>();

        Bitmap bitmap = ((BitmapDrawable)(getResources().getDrawable(R.mipmap.ball))).getBitmap();
        //随机生成球体的大小、
        for(int i = 0;i < 6; i ++){
            int radius = RandomUtil.random(15,30);
            final Beans b = new Beans(radius);
            b.setDirection(i % 2 == 0 ? Beans.Left : Beans.Right);
            b.bitmap = Bitmap.createScaledBitmap(bitmap,radius,radius,true);
            beans.add(b);
        }

    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        if (changed) {
            mWidth = getWidth();
            mHeight = getHeight();
            this.top = top;
            startAnim();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {

        for (Beans b : beans) {
            if (b.bitmap != null) {
                if (b.getDirection() == Beans.Left) {
                    canvas.drawBitmap(b.bitmap, b.getCx(), b.getCy(), null);
                } else {
                    canvas.drawBitmap(b.bitmap, -b.getCx() + mWidth, b.getCy(), null);
                }
            }
        }

    }

    public void startAnim() {
        if (mWidth == 0 || beans.size() == 0) return;
        for (Beans b : beans) {
            b.setState(0);
            b.setOff(0);
            b.setRand(RandomUtil.random(20));//随机生成抛出的速度值
        }

        va = ValueAnimator.ofFloat(top, mHeight);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {

                float val = (float)animation.getAnimatedValue();

                for (Beans b : beans) {
                    b.setCy(val - b.getRadius());
                    b.move(mWidth);//先移动坐标，实际上是改变了off 偏移量的值
                    b.setCx(mWidth / 2 + b.getOff());//刷新X轴坐标
                }

                postInvalidate();
            }
        });
        va.setInterpolator(new BounceInterpolator());//重力差值器
        va.setDuration(3500);
        va.setRepeatMode(ValueAnimator.RESTART);
        va.start();
    }

    public void stopAnim() {
        va.cancel();
        va = null;
    }

}

package com.fragmentapp.view.beans;

import android.graphics.Bitmap;
import android.util.Log;

/**
 * Created by liuzhen on 2018/1/18.
 */

public class Beans {

    public Beans(){ }

    public Beans(int radius){
        this.radius = radius;
    }

    public static final int Left = 0;
    public static final int Right = 1;

    private int direction;
    /**X坐标*/
    private float cx;
    /**Y坐标*/
    private float cy;
    /**偏移量*/
    private float off;
    /**随机生成的速度值*/
    private float rand;
    /**是否碰到边缘*/
    private int state;
    /**圆球的大小*/
    private float radius;
    public Bitmap bitmap;

    /**移动 X 坐标，并且碰到边界后回弹*/
    public void move(int width){
        if (cx < 0 || state == 1) {//碰到左边的边缘
            state = 1;
            off += rand;
        } else if (cx >= width || state == 2) {//碰到右边的边缘
            state = 2;
            off -= rand;
        }else if(state == 0) {
            state = 0;
            off += rand;
        }
//        Log.e("tag","-- cx "+(int)cx  + " width "+width + " state "+state);
    }

    public float getCx() {
        return cx;
    }

    public void setCx(float cx) {
        this.cx = cx;
    }

    public float getOff() {
        return off;
    }

    public void setOff(float off) {
        this.off = off;
    }

    public float getRand() {
        return rand;
    }

    public void setRand(float rand) {
        this.rand = rand;
    }

    public int getState() {
        return state;
    }

    public void setState(int state) {
        this.state = state;
    }

    public float getCy() {
        return cy;
    }

    public void setCy(float cy) {
        this.cy = cy;
    }

    public float getRadius() {
        return radius;
    }

    public void setRadius(float radius) {
        this.radius = radius;
    }

    public int getDirection() {
        return direction;
    }

    public void setDirection(int direction) {
        this.direction = direction;
    }
}

接下来继续美化，可以在下面添加一个回弹的跳板样式，看起来效果更好，也同样是用二级贝塞尔来实现，先绘制出接触面

一条直线，然后物体挑落到底下的时候在触发接触面的控制点，达到回弹效果，但是怎么知道物体落到了地面吗，差值器我没找到什么好的办法去解决，所以自己先想了一个方法去判断到底了，但是感觉不太好，不过目前本人还没有更好的方法去实现

 就是通过自己自定义差值器，然后在差值器里面添加回调判断，代码如下

package com.fragmentapp.view;

import android.util.Log;
import android.view.animation.BounceInterpolator;
import android.view.animation.Interpolator;

/**
 * Created by liuzhen on 2018/2/2.
 */

public class MyBounceInterpolator implements Interpolator {

    private CallBack callBack;
    private boolean t_3 = false,t_7 = false,t_9 = false,t_1 = false;

    public MyBounceInterpolator(CallBack callBack){
        this.callBack = callBack;
    }

    private float bounce(float t) {
        return t * t * 8.0f;
    }

    @Override
    public float getInterpolation(float t) {
//        Log.e("tag",""+t);
        t *= 1.1226f;
        if (t < 0.3535f) {
//            Log.e("tag","----1");0.1 0.2 0.3
            if (t_3 == false){
                t_3 = true;
//                callBack.toLast();
            }
            return bounce(t);
        } else if (t < 0.7408f) {
//            Log.e("tag","----2");4=0.6 5=0.8 6=0.8
            if (t_7 == false){
                t_7 = true;
                callBack.toLast();
            }
            return bounce(t - 0.54719f) + 0.7f;
        } else if (t < 0.9644f) {
//            Log.e("tag","----3");7=0.8 8=0.9 9=1
            if (t_9 == false){
                t_9 = true;
                callBack.toLast();
            }
            return bounce(t - 0.8526f) + 0.9f;
        } else {
//            Log.e("tag","----4");
            if (t_1 == false){
                t_1 = true;
                callBack.toLast();
            }
            return bounce(t - 1.0435f) + 0.95f;
        }
    }

    public interface CallBack{
        void toLast();
    }

}

这样就是说在物体开始回弹的时候回调，并且只有一次，不过看效果后发现有点误差，就是前面的几次回弹物体并没有在最底部就回弹了，这个想想后发现没有什么合适的方法解决，看看是不是可以改变它原本的算法去控制，后来在判断的地方把数值提高了一点，

发现果然有效果，好了，因为每个回弹的数值都是经过那里的

到这里告一段落了，不过不知道有没有发现有点问题，因为我的背景设置的是白色的，而且吃食的那段动画其实也是重新绘制了一层白色，所以看不出来，但是如果背景没有设置或者不是白色，那么就会出现问题了，这显然也不是我们想要的

于是还是得在次去优化，这里想来想去也只能在创建一个画板去绘制了，分两块，就类似于橡皮擦一样的效果，所以得小小的修改一下

 

然后把吃食物的那段的绘制移到新的画板中，这样就可以达到吃的效果了

protected void onDraw(Canvas canvas) {
        if (!isDraw) return;

        //绘制大球
        path.reset();
        path.moveTo(startPoint.x + faceRadius/2,startPoint.y);
        path.cubicTo(movePoint1.x,movePoint1.y + faceRadius/2,movePoint2.x,movePoint2.y + faceRadius/2,endPoint.x - faceRadius/2,endPoint.y);
        canvas.drawPath(path, facePaint);

        //绘制小球,需要在最后面绘制
        canvas.drawArc(rectF, angle, 360 - angle * 2, true, facePaint);

        if (mBitmap != null) {
            canvas.drawBitmap(mBitmap, 0, 0, defPaint);
        }
    }

    private void draw(){

        //绘制“食物”
        foodPath.reset();
        foodPath.moveTo(startPoint.x,startPoint.y);
        foodPath.cubicTo(movePoint1.x,movePoint1.y,movePoint2.x,movePoint2.y,endPoint.x,endPoint.y);
        mCanvas.drawPath(foodPath, effectPaint);
        //吃掉“食物”
        for (PointF f : clears) {
            RectF rectF = new RectF(f.x-foodRadius*2,f.y-foodRadius*2,f.x+foodRadius*2,f.y+foodRadius*2);
            mCanvas.drawOval(rectF,clearPaint);
        }

        postInvalidate();
    }

在次运行，可以看到，背景已经都移除，在无背景的状态下正常显示动画

下面是下载地址，谢谢收藏  ^_^

GitHub：https://github.com/1024477951/FragmentApp