关闭

android跳动的小球动画

标签: android动画
677人阅读 评论(1) 收藏 举报
分类:


平时对牛逼动画,高级UI,都深入的不多!近日,某头条,推了一个android技术类视频(平时在头条关注技术比较多),讲的是加载动画效果,是动脑学院讲的公开课,160分钟,我硬是拿着小手机看完了!边看,便记,然后整理了一下,规范了一下代码
做这个动画,需掌握:
1、属性动画
2、Path类、Canvas类
3、贝塞尔曲线
4、SurfaceView用法
5、自定义attr属性
6 、架构: 状态模式,控制器
7 、自由落体,抛物线等概念
不多说了,直接上码

1.DancingView.java

public class DancingView extends SurfaceView implements SurfaceHolder.Callback {

    public static final int STATE_DOWN = 1;//向下状态
    public static final int STATE_UP = 2;//向上状态

    public static final int DEFAULT_POINT_RADIUS = 10;
    public static final int DEFAULT_BALL_RADIUS = 13;
    public static final int DEFAULT_LINE_WIDTH = 200;
    public static final int DEFAULT_LINE_HEIGHT = 2;
    public static final int DEFAULT_LINE_COLOR = Color.parseColor("#FF9800");
    public static final int DEFAULT_POINT_COLOR = Color.parseColor("#9C27B0");
    public static final int DEFAULT_BALL_COLOR = Color.parseColor("#FF4081");

    public static final int DEFAULT_DOWN_DURATION = 600;//ms
    public static final int DEFAULT_UP_DURATION = 600;//ms
    public static final int DEFAULT_FREEDOWN_DURATION = 1000;//ms

    public static final int MAX_OFFSET_Y = 50;//水平下降最大偏移距离


    public int PONIT_RADIUS = DEFAULT_POINT_RADIUS;//小球半径
    public int BALL_RADIUS = DEFAULT_BALL_RADIUS;//小球半径

    private Paint mPaint;
    private Path mPath;
    private int mLineColor;
    private int mPonitColor;
    private int mBallColor;
    private int mLineWidth;
    private int mLineHeight;

    private float mDownDistance;
    private float mUpDistance;
    private float freeBallDistance;

    private ValueAnimator mDownController;//下落控制器
    private ValueAnimator mUpController;//上弹控制器
    private ValueAnimator mFreeDownController;//自由落体控制器

    private AnimatorSet animatorSet;
    private int state;

    private boolean ismUpControllerDied = false;
    private boolean isAnimationShowing = false;
    private boolean isBounced = false;
    private boolean isBallFreeUp = false;

    public DancingView(Context context) {
        super(context);
        init(context, null);
    }

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


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


    private void init(Context context, AttributeSet attrs) {
        initAttributes(context, attrs);

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(mLineHeight);
        mPaint.setStrokeCap(Paint.Cap.ROUND);

        mPath = new Path();
        getHolder().addCallback(this);

        initController();
    }

    private void initAttributes(Context context, AttributeSet attrs) {
        TypedArray typeArray = context.obtainStyledAttributes(attrs, R.styleable.DancingView);
        mLineColor = typeArray.getColor(R.styleable.DancingView_lineColor, DEFAULT_LINE_COLOR);
        mLineWidth = typeArray.getDimensionPixelOffset(R.styleable.DancingView_lineWidth, DEFAULT_LINE_WIDTH);
        mLineHeight = typeArray.getDimensionPixelOffset(R.styleable.DancingView_lineHeight, DEFAULT_LINE_HEIGHT);
        mPonitColor = typeArray.getColor(R.styleable.DancingView_pointColor, DEFAULT_POINT_COLOR);
        mBallColor = typeArray.getColor(R.styleable.DancingView_ballColor, DEFAULT_BALL_COLOR);
        typeArray.recycle();
    }


    private void initController() {
        mDownController = ValueAnimator.ofFloat(0, 1);
        mDownController.setDuration(DEFAULT_DOWN_DURATION);
        mDownController.setInterpolator(new DecelerateInterpolator());
        mDownController.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mDownDistance = MAX_OFFSET_Y * (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        mDownController.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                state = STATE_DOWN;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });

        mUpController = ValueAnimator.ofFloat(0, 1);
        mUpController.setDuration(DEFAULT_UP_DURATION);
        mUpController.setInterpolator(new DancingInterpolator());
        mUpController.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mUpDistance = MAX_OFFSET_Y * (float) animation.getAnimatedValue();
                if (mUpDistance >= MAX_OFFSET_Y) {
                    //进入自由落体状态
                    isBounced = true;
                    if (!mFreeDownController.isRunning() && !mFreeDownController.isStarted() && !isBallFreeUp) {
                        mFreeDownController.start();
                    }
                }
                postInvalidate();
            }
        });
        mUpController.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                state = STATE_UP;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                ismUpControllerDied = true;
            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });

        mFreeDownController = ValueAnimator.ofFloat(0, 8f);
        mFreeDownController.setDuration(DEFAULT_FREEDOWN_DURATION);
        mFreeDownController.setInterpolator(new DecelerateInterpolator());
        mFreeDownController.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //该公式解决上升减速 和 下降加速
                float t = (float) animation.getAnimatedValue();
                freeBallDistance = 40 * t - 5 * t * t;

                if (ismUpControllerDied) {//往上抛,到临界点
                    postInvalidate();
                }
            }
        });
        mFreeDownController.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                isBallFreeUp = true;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                isAnimationShowing = false;
                //循环第二次
                startAnimations();
            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });

        animatorSet = new AnimatorSet();
        animatorSet.play(mDownController).before(mUpController);
        animatorSet.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                isAnimationShowing = true;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });
    }

    /**
     * 启动动画,外部调用
     */
    public void startAnimations() {
        if (isAnimationShowing) {
            return;
        }
        if (animatorSet.isRunning()) {
            animatorSet.end();
            animatorSet.cancel();
        }
        isBounced = false;
        isBallFreeUp = false;
        ismUpControllerDied = false;

        animatorSet.start();
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);


        // 一条绳子用左右两部分的二阶贝塞尔曲线组成
        mPaint.setColor(mLineColor);
        mPath.reset();
        //起始点
        mPath.moveTo(getWidth() / 2 - mLineWidth / 2, getHeight() / 2);

        if (state == STATE_DOWN) {//下落
            /**************绘制绳子开始*************/
            //左部分 的贝塞尔
            mPath.quadTo((float) (getWidth() / 2 - mLineWidth / 2 + mLineWidth * 0.375), getHeight() / 2 + mDownDistance,
                    getWidth() / 2, getHeight() / 2 + mDownDistance);
            //右部分 的贝塞尔
            mPath.quadTo((float) (getWidth() / 2 + mLineWidth / 2 - mLineWidth * 0.375), getHeight() / 2 + mDownDistance,
                    getWidth() / 2 + mLineWidth / 2, getHeight() / 2);

            mPaint.setStyle(Paint.Style.STROKE);
            canvas.drawPath(mPath, mPaint);
            /**************绘制绳子结束*************/


            /**************绘制弹跳小球开始*************/
            mPaint.setStyle(Paint.Style.FILL);
            mPaint.setColor(mBallColor);
            canvas.drawCircle(getWidth() / 2, getHeight() / 2 + mDownDistance - BALL_RADIUS, BALL_RADIUS, mPaint);
            /**************绘制弹跳小球结束*************/
        } else if (state == STATE_UP) { //向上弹
            /**************绘制绳子开始*************/
            //左部分的贝塞尔
            mPath.quadTo((float) (getWidth() / 2 - mLineWidth / 2 + mLineWidth * 0.375), getHeight() / 2 + 50 - mUpDistance,
                    getWidth() / 2,
                    getHeight() / 2 + (50 - mUpDistance));

            //右部分的贝塞尔
            mPath.quadTo((float) (getWidth() / 2 + mLineWidth / 2 - mLineWidth * 0.375), getHeight() / 2 + 50 - mUpDistance,
                    getWidth() / 2 + mLineWidth / 2,
                    getHeight() / 2);

            mPaint.setStyle(Paint.Style.STROKE);
            canvas.drawPath(mPath, mPaint);
            /**************绘制绳子结束*************/

            mPaint.setStyle(Paint.Style.FILL);
            mPaint.setColor(mBallColor);

            //弹性小球,自由落体
            if (!isBounced) {
                //上升
                canvas.drawCircle(getWidth() / 2, getHeight() / 2 + (MAX_OFFSET_Y - mUpDistance) - BALL_RADIUS, BALL_RADIUS, mPaint);
            } else {
                //自由落体
                canvas.drawCircle(getWidth() / 2, getHeight() / 2 - freeBallDistance - BALL_RADIUS, BALL_RADIUS, mPaint);
            }
        }
        mPaint.setColor(mPonitColor);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(getWidth() / 2 - mLineWidth / 2, getHeight() / 2, PONIT_RADIUS, mPaint);
        canvas.drawCircle(getWidth() / 2 + mLineWidth / 2, getHeight() / 2, PONIT_RADIUS, mPaint);
    }

    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        Canvas canvas = holder.lockCanvas();//锁定整个SurfaceView对象,获取该Surface上的Canvas.
        draw(canvas);
        holder.unlockCanvasAndPost(canvas);//释放画布,提交修改
    }

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
    }
}

2.DancingInterpolator.java

 public class DancingInterpolator implements Interpolator {
    @Override
    public float getInterpolation(float input) {
        return (float) (1 - Math.exp(-3 * input) * Math.cos(10 * input));
    }
}

3.自定义属性 styles.xml

<declare-styleable name="DancingView">
       <attr name="lineWidth" format="dimension" />
       <attr name="lineHeight" format="dimension" />
       <attr name="pointColor" format="reference|color" />
       <attr name="lineColor" format="reference|color" />
       <attr name="ballColor" format="reference|color" />
</declare-styleable>

颜色,尺寸,参数可以自己测试,调整,仅供学习!

--每天进步一点,终会成长为老司机

1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

【Android】弹跳的小球——SurfaceView

简单介绍: 用安卓实现的一个黑色全屏上,红色的小球的随机跳动,加速度越来越快。 采用surfaceview实现,在activity中设置为全屏,并将小球弹跳的surfaceview设置为显示的...
  • felicitia
  • felicitia
  • 2013-06-12 16:59
  • 3389

一个精美的跳动小球—手把手教你用贝塞尔曲线实现一个酷炫跳动动画。

一个精美的跳动小球—手把手教你用贝塞尔曲线实现一个酷炫跳动动画。 2017-08-07 BraveJoy 终端研发部 前言介绍 手把手教你用贝塞尔曲线实现一个精美的跳动的...
  • fbird45
  • fbird45
  • 2017-08-07 10:10
  • 553

【UE4 shader】利用worldpositionoffset实现小球来回蹦

分别用cos和sine来实现循环运动,其中下方部分加一个abs值以保证球在地面以上运动。 上方利用RGB的R通道,即控制x轴方向实现左右运动。 下方部分利用RGB的B通道,即控制z轴方向实现上下运...
  • zolin7
  • zolin7
  • 2017-12-07 18:38
  • 69

Android 自定义View 跳动的水果和文字

开头这是自定义View和动画的第二篇,第一篇是Android drawPath实现QQ拖拽泡泡,主要介绍了drawPath 绘制二次贝塞尔曲线的过程。话不多说,还是先上效果图吧!全局配置根据效果图,再...
  • lovejjfg
  • lovejjfg
  • 2016-06-18 22:44
  • 1275

Android 图片弹跳动画

这几天看到一个小动画,觉得有点意思,就自己实现来看看,先看效果图 http://img.my.csdn.net/uploads/201605/07/1462618630_6882.gif
  • gesanri
  • gesanri
  • 2016-05-07 20:24
  • 2919

Android 属性动画:实现小球坠落

一、要做什么项目需要实现的效果:小球坠落 1. 首先绘制小球--自定义View 绘制圆; 2. 模拟小球坠落--属性动画,重绘小球轨迹; 3. 修改小球颜色--实现自定义TypeEvaluato...
  • happy_horse
  • happy_horse
  • 2017-03-21 20:46
  • 1341

Android仿QQ邮箱下拉刷新动画(三个小球围绕中心转动)

仿QQ邮箱下拉刷新动画(三个小球围绕中心转动) 该动画的实现主要借鉴了海龙的博客- 两个小球不停的绕中心旋转的进度条 ,在此感谢下。 1 首先上图(折腾了好久才把gif给搞了上去)2 分析2.1 ...
  • u012950099
  • u012950099
  • 2016-06-27 22:45
  • 1156

让你的TextView字体跳动起来

textview可以有跑马灯的效果,如何让textview字体可以像波浪形状跳动起来呢?先上个图 偶尔看了一个跳动的textview的开源项目,了解其原理,得到了一个很好用的类。还是很span有关,...
  • gacmy
  • gacmy
  • 2016-08-08 17:56
  • 1405

Android使用shape制作圆形控件及添加弹跳动画

前言:我们在很多时候都需要在res/drawable文件夹下创建相应的xml文件来为控件添加一些样式效果,比如按钮按下时的按钮样式变化、或者指定按钮的一些边框样式、或者为常用的EditText、Tex...
  • MYBOYER
  • MYBOYER
  • 2015-02-27 16:11
  • 2908

HTML Canvas实例 曲线弹跳的小球

HTML Canvas实例 曲线弹跳的小球
  • fumier
  • fumier
  • 2015-04-28 08:07
  • 1287
    个人资料
    • 访问:106450次
    • 积分:1777
    • 等级:
    • 排名:千里之外
    • 原创:69篇
    • 转载:3篇
    • 译文:0篇
    • 评论:6条