android自定义动画实现牛顿撞球

最新推荐文章于 2022-10-27 17:50:21 发布
最新推荐文章于 2022-10-27 17:50:21 发布
阅读量621 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/acxingyun/article/details/78142054
版权

效果

最近实现了一个不错的自定义view，类似在商店里看到的牛顿撞球，先上效果：
一个球摆动：
这里写图片描述
两个球摆动：
这里写图片描述
三个球摆动：
这里写图片描述

感谢mp4转gif网站，甩格式工厂10条街：https://ezgif.com/video-to-gif
一开始的想法就是做一个等待时的动画效果，好看的动画效果能让用户耐心等待，撞球是我比较喜欢的效果。

使用

小球个数、颜色、半径、摆动球个数、最大摆动角度等都可以使用时在xml中自定义：

    <acxingyun.cetcs.com.myviews.WaitingBallView
        android:id="@+id/waitingBallView"
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        app:ballColor="@color/color3"
        app:ballRadius="20dp"
        app:lineColor="@color/color1"
        app:lineWidth="2dp"
        app:waveAngle="30"
        app:ballCount="6"
        app:barColor="@color/black"
        app:barWidth="5dp"
        app:animationPeriod="5000"
        app:wavingBallCount="3"
        />

代码调用：

waitingBallView = findViewById(R.id.waitingBallView);
waitingBallView.startAnimation();

目前只有一个方法:startAnimation()，可以加一些设置属性的方法。

实现原理

就是一些几何计算，cos、sin之类的，还有就是弧度转角度。
这里写图片描述

总高度 = 线长 + 球半径；总高度和球半径是属性定义的，可以算出线长lineLength。

为了后面计算方便，先保存每个小球静止时的坐标，水平方向摆动时的坐标等于静止坐标加上偏移量；y方向坐标等于 线长*cosα：

这里写图片描述
以摆动最大角度时第一个小球左边位置为水平方向圆点，计算出第一个球静止时的横坐标X0，然后可以得出其它球的横坐标；所有球的Y0 = mHeight - 球半径。把静止时的坐标保存下来，方便以后计算摆动时的坐标。

下面是摆动时的坐标计算：
这里写图片描述
α是相对于y轴的，向左是负数，向右为正。
多个小球向右摆动，x坐标仍然是x0 + 偏移量，y坐标是线长*cosα：
这里写图片描述

在onDraw里面需要判断摆动角度的正负，为负数是左边的球摆，为正数是右边球摆，没有摆动的球坐标维持静止时的坐标。

除了小球，还要画线，线的一端坐标和球一样，另一端x坐标和小球静止时一样，y坐标为0。

实现

在values新建attrs.xml：
这里写图片描述
在attrs.xml定义属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="WaitingBallView">
        <attr name="ballCount" format="integer"/>
        <attr name="ballColor" format="color"/>
        <attr name="ballRadius" format="dimension"/>
        <attr name="lineColor" format="color"/>
        <attr name="waveAngle" format="float"/>
        <attr name="lineWidth" format="dimension"/>
        <attr name="barColor" format="color"/>
        <attr name="barWidth" format="dimension"/>
        <attr name="animationPeriod" format="float"/>
        <attr name="wavingBallCount" format="integer"/>
    </declare-styleable>
</resources>

定义的属性用于自定义View的构造函数中读取配置的属性，declare-styleable标签中的名字一定要和view的名字一样，不然在activity_main.xml中无法识别自定义属性。

下面是java文件：

public class WaitingBallView extends View {

    /**
     * 球个数
     */
    private int ballCount;
    /**
     * 球半径
     */
    private float ballRadius;

    /**
     * 小球颜色
     */
    private int ballColor;

    /**
     * 摆线的颜色
     */
    private int lineColor;

    /**
     * 水平bar颜色
     */
    private int barColor;

    /**
     * 水平bar宽度
     */
    private float barWidth;

    /**
     * 摆线宽度
     */
    private float lineWidth;

    /**
     * 画摆线画笔
     */
    private Paint linePaint;

    /**
     * 画球的画笔
     */
    private Paint ballPaint;

    /**
     * 摆动一个周期时长
     */
    private float animationPeriod;

    /**
     * 最大摆动角度
     */
    private float waveAngleMax;

    /**
     * 摆动中的角度
     */
    private float wavingAngle;

    /**
     * 摆动小球个数
     */
    private int wavingBallCount;

    /**
     * 自定义view的宽度
     */
    private int mWidth;

    /**
     * 自定义view的高度
     */
    private int mHeight;

    /**
     * 保存没有摆动时每个球的坐标
     */
    private Map<Integer , List<Float>> locationMap = new HashMap<>();
    private float lineLength;

    public WaitingBallView(Context context){
        this(context, null, 0);
    }

    public WaitingBallView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public WaitingBallView(Context context, AttributeSet attrs, int defStyleAttr){
        super(context, attrs, defStyleAttr);
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.WaitingBallView, defStyleAttr, 0);

        ballCount = a.getInteger(R.styleable.WaitingBallView_ballCount, 0);
        ballRadius = a.getDimension(R.styleable.WaitingBallView_ballRadius, 0);
        ballColor = a.getColor(R.styleable.WaitingBallView_ballColor, 0);
        lineColor = a.getColor(R.styleable.WaitingBallView_lineColor, 0);
        waveAngleMax = a.getFloat(R.styleable.WaitingBallView_waveAngle, 0);
        lineWidth = a.getDimension(R.styleable.WaitingBallView_lineWidth, 0);
        barColor = a.getColor(R.styleable.WaitingBallView_barColor, 0);
        barWidth = a.getDimension(R.styleable.WaitingBallView_barWidth, 0);
        animationPeriod = a.getFloat(R.styleable.WaitingBallView_animationPeriod, 0);
        wavingBallCount = a.getInteger(R.styleable.WaitingBallView_wavingBallCount, 0);

        a.recycle();

        linePaint = new Paint();
        ballPaint = new Paint();

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        Log.d(getClass().getSimpleName(), "onMeasure called...");
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int computeSize;

        int specMode = MeasureSpec.getMode(widthMeasureSpec);
        int spenSize = MeasureSpec.getSize(widthMeasureSpec);

        Log.d(getClass().getSimpleName(), "spenSize:" + spenSize);

        switch (specMode){
            //为match_parent或指定xxdp
            case MeasureSpec.EXACTLY:
                mWidth = spenSize;
                break;

        //wrap_content
            case MeasureSpec.AT_MOST:
                computeSize = getPaddingLeft() + getPaddingRight() + spenSize;
                //需要根据parent大小计算本身大小，取小的，保证不会超出parent
                Log.d(getClass().getSimpleName(), "computeSize:" + computeSize);
                mWidth = computeSize < spenSize?computeSize:spenSize;
                break;

            case MeasureSpec.UNSPECIFIED:
                computeSize = getPaddingLeft() + getPaddingRight() + spenSize;
                Log.d(getClass().getSimpleName(), "computeSize:" + computeSize);
                mWidth = computeSize < spenSize?computeSize:spenSize;
                break;
        }

        specMode = MeasureSpec.getMode(heightMeasureSpec);
        spenSize = MeasureSpec.getSize(heightMeasureSpec);

        Log.d(getClass().getSimpleName(), "spenSize:" + spenSize);

        switch (specMode){
            case MeasureSpec.EXACTLY:
                mHeight = spenSize;
                break;

            case MeasureSpec.AT_MOST:
                computeSize = getPaddingLeft() + getPaddingRight() + spenSize;
                Log.d(getClass().getSimpleName(), "computeSize:" + computeSize);
                mHeight = computeSize < spenSize?computeSize:spenSize;
                break;

            case MeasureSpec.UNSPECIFIED:
                computeSize = getPaddingLeft() + getPaddingRight() + spenSize;
                Log.d(getClass().getSimpleName(), "computeSize:" + computeSize);
                mHeight = computeSize < spenSize?computeSize:spenSize;
                break;
        }

        Log.d(getClass().getSimpleName(), "mWidth:" + mWidth);
        Log.d(getClass().getSimpleName(), "mHeight:" + mHeight);

        setMeasuredDimension(mWidth, mHeight);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        Log.d(getClass().getSimpleName(), "onSizeChanged called,w:" + w + " h:" + h + " oldw:" + oldw + " oldh:" + oldh);
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;

    }

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

//        Log.i(getClass().getSimpleName(), "wavingAngle:" + wavingAngle);

        linePaint.setColor(barColor);
        linePaint.setStyle(Paint.Style.FILL);
        linePaint.setAntiAlias(true);
        linePaint.setStrokeWidth(barWidth);

        canvas.drawLine(0, 0, mWidth, 0, linePaint);

        linePaint.setColor(lineColor);
        linePaint.setStrokeWidth(lineWidth);

        ballPaint.setColor(ballColor);
        ballPaint.setStyle(Paint.Style.FILL);
        ballPaint.setAntiAlias(true);

        float ballX;
        float ballY;

        float lineStartX;
        float lineStartY;
        float lineStopX;
        float lineStopY;

        lineLength = mHeight - ballRadius;
        List<Float> locationList;
        //静止时的坐标
        if (wavingAngle == 0){
            for (int i = 0; i< ballCount; i++){
                locationList = locationMap.get(i);
                ballX = locationList.get(0);
                ballY = locationList.get(1);

                //先画线再花球，球上不会看到线，更好看
                canvas.drawLine(ballX, 0, ballX, ballY, linePaint);
                canvas.drawCircle( ballX,  ballY, ballRadius, ballPaint);

            }
        }else if (wavingAngle < 0){
            //绘制向左摆动时的小球
            for (int i = 0; i < wavingBallCount; i++){

                locationList = locationMap.get(i);
                ballX = (float) (locationList.get(0) + lineLength * Math.sin(wavingAngle * Math.PI/180));
                ballY = (float) (lineLength * Math.cos(wavingAngle * Math.PI / 180));

                lineStartX = ballX;
                lineStartY = ballY;
                lineStopX = locationList.get(0);
                lineStopY = 0;

                canvas.drawLine(lineStartX, lineStartY, lineStopX, lineStopY, linePaint);
                canvas.drawCircle( ballX, ballY, ballRadius, ballPaint);

            }

        //绘制静止不动的小球 
            for (int i = wavingBallCount; i < ballCount; i++){
                locationList = locationMap.get(i);
                ballX = locationList.get(0);
                ballY = locationList.get(1);

                canvas.drawLine(ballX, 0, ballX, ballY, linePaint);
                canvas.drawCircle( ballX,  ballY, ballRadius, ballPaint);
            }

        }else if (wavingAngle > 0){
            //绘制向右摆动的小球
            for (int i = ballCount - 1; i > ballCount - wavingBallCount - 1; i--){
                locationList = locationMap.get(i);
                ballX = (float) (locationList.get(0) + lineLength * Math.sin(wavingAngle * Math.PI/180));
                ballY = (float) (lineLength * Math.cos(wavingAngle * Math.PI / 180));

                lineStartX = locationMap.get(i).get(0);
                lineStartY = 0;
                lineStopX = ballX;
                lineStopY = ballY;

                canvas.drawLine( lineStartX, lineStartY, lineStopX, lineStopY, linePaint);
                canvas.drawCircle( ballX,  ballY, ballRadius, ballPaint);

            }

        //绘制静止不动的小球
            for (int i = 0; i < ballCount - wavingBallCount; i++){

                locationList = locationMap.get(i);
                ballX = locationList.get(0);
                ballY = locationList.get(1);

                lineStartX = ballX;
                lineStartY = ballY;
                lineStopX = ballX;
                lineStopY = 0;

                canvas.drawLine( lineStartX, lineStartY, lineStopX, lineStopY, linePaint);
                canvas.drawCircle( ballX,  ballY, ballRadius, ballPaint);
            }
        }
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        Log.d(getClass().getSimpleName(), "changed:" + changed + " left:" + left + " top:" + top
        + " right:" + right + " bottom:" + bottom);

        //onMeasure之后，mHeight和mWidth就确定了，此时计算静止时的坐标
        float ballX;
        float ballY;
        for (int i = 0; i < ballCount; i++){
            ballX = (float) ((mHeight - ballRadius*2 + ballRadius) * Math.sin(waveAngleMax * Math.PI / 180) + ballRadius + ballRadius * 2 * i);
            ballY = mHeight - ballRadius*2 + ballRadius;
            List<Float> locationArray = new ArrayList<>();
            locationArray.add(0, ballX);
            locationArray.add(1, ballY);
            locationMap.put(i, locationArray);
        }

        super.onLayout(changed, left, top, right, bottom);
    }

    public void startAnimation(){
        //范围变化：-waveAngleMax, 0 , waveAngleMax, 0, -waveAngleMax为一个周期
        final ValueAnimator angleValue = ValueAnimator.ofFloat(-waveAngleMax, 0 , waveAngleMax, 0, -waveAngleMax);
        //均匀变化
        angleValue.setInterpolator(new LinearInterpolator());
        //从左边开始摆动
        wavingAngle = -waveAngleMax;
        angleValue.setDuration((long) (animationPeriod));
        //无限运动
        angleValue.setRepeatCount(ValueAnimator.INFINITE);
        angleValue.start();
        angleValue.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                //更新摆动角度
                wavingAngle = (float) angleValue.getAnimatedValue();
                //invalidate()会调用onDraw()，实现了视图刷新
                invalidate();
            }
        });
    }
}

在MainActivity中调用：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="acxingyun.cetcs.com.myviews.MainActivity">

    <acxingyun.cetcs.com.myviews.WaitingBallView
        android:id="@+id/waitingBallView"
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        app:ballColor="@color/color3"
        app:ballRadius="20dp"
        app:lineColor="@color/color1"
        app:lineWidth="2dp"
        app:waveAngle="30"
        app:ballCount="6"
        app:barColor="@color/black"
        app:barWidth="5dp"
        app:animationPeriod="5000"
        app:wavingBallCount="1"
        />

</RelativeLayout>
public class MainActivity extends Activity {

    private WaitingBallView waitingBallView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        waitingBallView = findViewById(R.id.waitingBallView);
        waitingBallView.startAnimation();
    }
}

后记

一开始看了一篇别人的文章突发奇想，利用业余时间实现的，动画的是通过ValueAnimator不断变化，然后调用onDraw()实现的。理解了这一点就知道自定义动画的实现原理了。

源码：https://github.com/acxingyun/WaveBalls

acxingyun
关注
Android 自定义动画(实现类似分享动画)
安卓兼职framework和app工程师的博客
10-20 1037
最近在开发app中，要实现点击进入分享动画页面，然后照着每个Item的功能，来实现各自的功能 效果图如下: 首选自定义动画Activity import android.animation.Animator; import android.animation.AnimatorListenerAdapter; import android.animation.AnimatorSet; import android.animation.ObjectAnimator; import android.conten
android 小球碰撞动画,android练习：碰撞的小球
weixin_32876681的博客
05-25 716
先看图： 小球碰到边上反弹，下面的横杆接住小球让其再反弹上去。很简单，大家都见过的啦。这里主要练习SurfaceView，Callback以及在SurfaceView中使用线程，看主要的View类：package com.wt.app;import android.content.Context;import android.graphics.Canvas;import android.graph...
android 自定义动画效果 一
bingdongguke1的专栏
07-06 95
/** * 定义从右侧进入的动画效果 * @return */ protected Animation inFromRightAnimation() { Animation inFromRight = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIV...
Android实现自定义动画
pows8015的专栏
11-11 513
Animation提供了几种动画效果（渐变 缩放 移动）
Android自定义加载动画的实现
DIY4MAN4
05-06 1361
两种实现方式，如下。 1 AnimationDrawable
自定义动画 android,Android实现自定义下载动画
weixin_34800530的博客
05-25 255
本篇文章主要记录最近实现的下载动画所学的知识效果成功效果image.png失败效果image.png原理我们想要的下载动画，大概分为两个部分，第一个部分是下载中的动画，也就是滑动条滑动的动画，另一部分是下载结束的动画，也就是滑动条缩放和显示小勾的动画，那么具体如何实现呢，首先我们要根据外部下载速度来改变滑动条进度，执行滑动条滑动的动画，然后等待下载完成以后，执行下载完成动画主要知识点属性动画的相关...
Android-XView下雨飘雪红包雨碰撞球自定义View
08-13
这个库是Android开发中的一个实践案例，展示了如何通过自定义View来实现动态视觉效果。 首先，我们来看"下雨"效果。在Android中，这种效果通常通过绘制多个小的图形元素（如线条或水滴）并让它们沿着屏幕滑下来来...
基于Android的迷你桌球游戏设计与实现
10-28
在本项目中，“基于Android的迷你桌球游戏设计与实现”是一个典型的移动应用开发实例，主要涉及了Android平台上的游戏开发技术。这个项目不仅提供了源代码，还包含了毕业设计论文，使得学习者能够深入理解整个开发...
Android之小球自由碰撞动画
fjnu_se的博客
12-15 691
Android 动画之小球碰撞 本文将基于Android对一个小球自由碰撞动画项目做一个简单介绍，并展示部分关键代码以及实际效果动态图 1. add balls List 添加颜色为绿，黄，红，黑，蓝，灰的小球，并设置其大小 ballList.add(new Ball(80, Color.GREEN, 700, width / 2, height / 2)); ballList.add(new Ball(100, Color.YELLOW, 600, width / 4 *
android版的撞球游戏
08-10
【Android版撞球游戏开发详解】 在Android平台上开发游戏，尤其是像撞球这样的物理模拟游戏，需要对Android SDK、Java编程语言以及游戏引擎有深入理解。这个资源提供了一个完整的Android版撞球游戏的源码，对于想要...
android 实现progressbar的简单自定义动画
10-19
android 实现progressbar的简单自定义动画
Android 自定义View实现动画时钟
06-09
该项目使用AS开发，通过获取当前系统时间,然后通过自定义View加自定义的属性动画ValueAnimator实现了一个带动画效果的时钟，对学习自定义View是一个很好的例子
Android游戏中动画的实现
03-06
对于游戏等对界面要求较高的程序，一般需要控制View中的具体图像显示（如动画功能）下面介绍实现此功能常用的SurfaceView控制。
Android自定义动画
u013685113的博客
05-30 729
创建自定义动画只需要实现它的applyTransformation的逻辑就可以了，不过通常情况下，还需要覆盖父类的initalize方法来实现一些初始化工作。 调用 代码： MyAnimation myAnimation = new MyAnimation(); imageView.startAnimation(myAnimation); 具体代码如下： package com....
Android——自定义动画
LCY天上殿的博客
04-11 411
自定义动画：重写父类的initialize完成初始化操作，实现applyTransformation逻辑 第一个例子：实现电视关闭时屏幕的关闭效果public class CustomAnim extends Animation { private int mCenterWidth; private int mCenterHeight; @Override publ
android 自定义动画
u013519290的博客
06-19 400
自定义动画的使用,主要介绍功能如下 首先是程序的入口 package com.example.myanimation; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import and
在Android动画基础上实现自定义的动画效果
继续沉淀！
03-10 1921
如何在Android动画基础上实现自定义的平移动画效果。        位移动画有多种时间插值算法，比如我们常用的有AccelerateDecelerateInterpolator、AccelerateInterpolator、DecelerateInterpolator等，这些插值算法是为了给平移动画添加各种效果，加速减速、加速、减速等，这里举个例子。          Accel
自定义动画的简单实现
qq_34024778的博客
09-03 299
需求:登陆时，密码错误时按钮出现摇头动作 实现思路 使用自定义动画即可实现 1.定义一个类实现Animation,并实现它的两个方法，如下： public class Anima extends Animation { @Override public void initialize(int width, int height, int parentWidth, in...
Android动画特效之自定义View
最新发布
qq_31481093的博客
10-27 2123
Android动画特效之自定义View
VB5实现趣味撞球游戏的界面与代码设计
文档以创建一个简单的撞球游戏为例，详细介绍了如何利用VB5编程环境来设计和实现一个基本的游戏界面。以下是主要内容概要： 1. **项目初始化**： - 开始时，用户需要在VB5中创建一个标准的EXE工程，包含一个名为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值