jbox2d贴纸动画

使用jbox2d物理引擎打造摩拜单车贴纸动画效果

接下来我们在看下摩拜单车安卓客户端贴纸动画，是什么样子呢？先上一副动态图:

mobike_demo.gif

效果很炫，也很漂亮，至少看起来实现的难度要比ofo那个大的多。那么该怎么实现呢？(这里插下题外话，ios端比较容易实现，因为系统内置了某些api，可以很方便的实现这样的效果)，可我们是安卓程序员啊，怎么办？自定义view？嗯，好像可以，但是这坐标怎么计算？并且还持续运动着，还有弹力，摩擦力，碰撞力…..

大脑一片茫然，如果产品经理坚决的确定需要这个效果，咋整？先不慌，我们可以先了解下摩拜单车是如何实现这样的效果的，很不幸，经过反编译摩拜单车apk后，安装包进行了加固，连混淆后的代码都看不到.

于是就上网各种搜索酷炫动画，不经意间发现了jbox2d物理引擎,然后回头在看下摩拜单车的apk，发现了其用到了libgdx-box2d，所以说摩拜是使用libgdx-box2d物理引擎来实现的这个效果：

image.png

jbox2d和libgdx-box2d：

jbox2d和libgdx-box2d有什么区别，他们之间的关系是什么?

jbox2d:

jbox2d百度百科这样描述的: jbox2D物理引擎原版 Box2D 是采用C++编写的，后来扩展到java，as等多种版本。著名手机游戏愤怒的小鸟便是采用jbox2D物理引擎。不过java版的jbox2D引擎性能不如C++环境下运行的性能好。在性能配置比较好的手机上面，jbox2D效果也是不错的。

libgdx:

libgdx百度百科这样描述的:libGdx是一个跨平台的2D/3D的游戏开发框架，它由Java/C/C++语言编写而成。

可能看完百度百科，还是比较模糊，我们只知道了他俩都是物理引擎，并且知道了愤怒的小鸟，就是用jbox2d引擎开发的。

后来经过搜索了解得出这样一句话:Libgdx使用jni封装了box2d的c++版本,使得其运行效率比其他同级的物理引擎如jbox2d快不少。所以最后的结论是jbox2d是面向java的，运行效率要慢。而libgdx是面向c/c++的，运行效率要快。

这次效果的实现是基于jbox2d上完成的，最终效果图如下:

mobike.gif

APK 下载体验:

qrcode.png

Github地址: https://github.com/andmizi/MobikeTags 欢迎star

jbox2d快速上手，推荐参考百度文库 https://wenku.baidu.com/view/c584cbfaf90f76c661371a5f.html

网上的文档都是比较过时的，新版中有些地方有变化，不过不影响快速入门。

jbox2d Github: https://github.com/jbox2d/jbox2d

简单描述下jbox2d物理引擎在安卓中的用法，jbox2d物理引擎并不负责view的绘制，只负物理数据的计算和分析，如物体的密度，质量，摩擦力，速度，碰撞力，恢复力……

通俗的讲，在安卓中一个view代表了一个物体，也就是刚体，通过view和刚体的绑定并设置初始参数，最后不停的draw，再从绑定的刚体中取出参数绘制到界面上，如此循环。而物体的所有物理参数都由jbox2d物理引擎帮助我们完成。

在MobikeLibrary中，自己只写了两个类，就实现了如上效果

image.png

Mobike和MobikeView是自己写的，org.jbox2d是官方的源代码，MobikeLibrary的具体使用请查看 https://github.com/andmizi/MobikeTags

MobikeView.java:

package com.mobike.library;import android.content.Context;import android.graphics.Canvas;import android.support.annotation.NonNull;import android.support.annotation.Nullable;import android.util.AttributeSet;import android.widget.FrameLayout;/** * Created by kimi on 2017/7/8 0008. * Email: [e-mail] */public class MobikeView extends FrameLayout {    private Mobike mMobike;    public MobikeView(@NonNull Context context) {        this(context,null);    }    public MobikeView(@NonNull Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        setWillNotDraw(false);        mMobike = new Mobike(this);    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        mMobike.onSizeChanged(w,h);    }    @Override    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {        super.onLayout(changed, left, top, right, bottom);        mMobike.onLayout(changed);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        mMobike.onDraw(canvas);    }    public Mobike getmMobike(){        return this.mMobike;    }}

MobikeView继承自Framelayout，比较简单，这里略过

Mobike.java

package com.mobike.library;import android.graphics.Canvas;import android.util.Log;import android.view.View;import android.view.ViewGroup;import org.jbox2d.collision.shapes.CircleShape;import org.jbox2d.collision.shapes.PolygonShape;import org.jbox2d.collision.shapes.Shape;import org.jbox2d.common.Vec2;import org.jbox2d.dynamics.Body;import org.jbox2d.dynamics.BodyDef;import org.jbox2d.dynamics.BodyType;import org.jbox2d.dynamics.FixtureDef;import org.jbox2d.dynamics.World;import java.util.Random;/** * Created by kimi on 2017/7/8 0008. * Email: [e-mail] */public class Mobike {    public static final String TAG = Mobike.class.getSimpleName();    private World world;    private float dt = 1f / 60f;    private int velocityIterations = 3;    private int positionIterations = 10;    private float friction = 0.3f,density = 0.5f,restitution = 0.3f,ratio = 50;    private int width,height;    private boolean enable = true;    private final Random random = new Random();    private ViewGroup mViewgroup;    public Mobike(ViewGroup viewgroup) {        this.mViewgroup = viewgroup;        density = viewgroup.getContext().getResources().getDisplayMetrics().density;    }    public void onSizeChanged(int width,int height){        this.width = width;        this.height = height;        //sizeChanged的时候获取到viewgroup的宽和高    }    public void onDraw(Canvas canvas) {        if(!enable){ //设置标记，在界面可见的时候开始draw，在界面不可见的时候停止draw            return;        }        //dt 更新引擎的间隔时间        //velocityIterations 计算速度        //positionIterations 迭代的次数        world.step(dt,velocityIterations,positionIterations);        int childCount = mViewgroup.getChildCount();        for(int i = 0; i < childCount; i++){            View view = mViewgroup.getChildAt(i);            Body body = (Body) view.getTag(R.id.mobike_body_tag);            if(body != null){                //从view中获取绑定的刚体，取出参数，开始更新view                view.setX(metersToPixels(body.getPosition().x) - view.getWidth() / 2);                view.setY(metersToPixels(body.getPosition().y) - view.getHeight() / 2);                view.setRotation(radiansToDegrees(body.getAngle() % 360));            }        }        //手动调用，反复执行draw方法        mViewgroup.invalidate();    }    public void onLayout(boolean changed) {        createWorld(changed);    }    public void onStart(){        setEnable(true);    }    public void onStop(){        setEnable(false);    }    public void update(){        world = null;        onLayout(true);    }    private void createWorld(boolean changed) {        //jbox2d中world称为世界，这里创建一个世界        if(world == null){            world = new World(new Vec2(0, 10.0f));            //创建边界，注意边界为static静态的，当物体触碰到边界，停止模拟该物体            createTopAndBottomBounds();            createLeftAndRightBounds();        }        int childCount = mViewgroup.getChildCount();        for(int i = 0; i < childCount; i++){            View view = mViewgroup.getChildAt(i);            Body body = (Body) view.getTag(R.id.mobike_body_tag);            if(body == null || changed){                createBody(world,view);            }        }    }    private void createBody(World world, View view) {        //创建刚体描述，因为刚体需要随重力运动，这里type设置为DYNAMIC        BodyDef bodyDef = new BodyDef();        bodyDef.setType(BodyType.DYNAMIC);        //设置初始参数，为view的中心点        bodyDef.position.set(pixelsToMeters(view.getX() + view.getWidth() / 2) ,                             pixelsToMeters(view.getY() + view.getHeight() / 2));        Shape shape = null;        Boolean isCircle = (Boolean) view.getTag(R.id.mobike_view_circle_tag);        if(isCircle != null && isCircle){            //创建圆体形状            shape = createCircleShape(view);        }else{            //创建多边形形状            shape = createPolygonShape(view);        }        //初始化物体信息        //friction  物体摩擦力        //restitution 物体恢复系数        //density 物体密度        FixtureDef fixture = new FixtureDef();        fixture.setShape(shape);        fixture.friction = friction;        fixture.restitution = restitution;        fixture.density = density;        //用世界创建出刚体        Body body = world.createBody(bodyDef);        body.createFixture(fixture);        view.setTag(R.id.mobike_body_tag,body);        //初始化物体的运动行为        body.setLinearVelocity(new Vec2(random.nextFloat(),random.nextFloat()));    }    private Shape createCircleShape(View view){        CircleShape circleShape = new CircleShape();        circleShape.setRadius(pixelsToMeters(view.getWidth() / 2));        return circleShape;    }    private Shape createPolygonShape(View view){        PolygonShape polygonShape = new PolygonShape();        polygonShape.setAsBox(pixelsToMeters(view.getWidth() / 2),pixelsToMeters(view.getHeight() / 2));        return polygonShape;    }    private void createTopAndBottomBounds() {        BodyDef bodyDef = new BodyDef();        bodyDef.type = BodyType.STATIC;        PolygonShape box = new PolygonShape();        float boxWidth = pixelsToMeters(width);        float boxHeight =  pixelsToMeters(ratio);        box.setAsBox(boxWidth, boxHeight);        FixtureDef fixtureDef = new FixtureDef();        fixtureDef.shape = box;        fixtureDef.density = 0.5f;        fixtureDef.friction = 0.3f;        fixtureDef.restitution = 0.5f;        bodyDef.position.set(0, -boxHeight);        Body topBody = world.createBody(bodyDef);        topBody.createFixture(fixtureDef);        bodyDef.position.set(0, pixelsToMeters(height)+boxHeight);        Body bottomBody = world.createBody(bodyDef);        bottomBody.createFixture(fixtureDef);    }    private void createLeftAndRightBounds() {        float boxWidth = pixelsToMeters(ratio);        float boxHeight = pixelsToMeters(height);        BodyDef bodyDef = new BodyDef();        bodyDef.type = BodyType.STATIC;        PolygonShape box = new PolygonShape();        box.setAsBox(boxWidth, boxHeight);        FixtureDef fixtureDef = new FixtureDef();        fixtureDef.shape = box;        fixtureDef.density = 0.5f;        fixtureDef.friction = 0.3f;        fixtureDef.restitution = 0.5f;        bodyDef.position.set(-boxWidth, boxHeight);        Body leftBody = world.createBody(bodyDef);        leftBody.createFixture(fixtureDef);        bodyDef.position.set(pixelsToMeters(width) + boxWidth, 0);        Body rightBody = world.createBody(bodyDef);        rightBody.createFixture(fixtureDef);    }    private float radiansToDegrees(float radians) {        return radians / 3.14f * 180f;    }    private float degreesToRadians(float degrees){        return (degrees / 180f) * 3.14f;    }    public float metersToPixels(float meters) {        return meters * ratio;    }    public float pixelsToMeters(float pixels) {        return pixels / ratio;    }    public void random() {        //弹一下，模拟运动        int childCount = mViewgroup.getChildCount();        for (int i = 0; i < childCount; i++) {            Vec2 impulse = new Vec2(random.nextInt(1000) - 1000, random.nextInt(1000) - 1000);            View view = mViewgroup.getChildAt(i);            Body body = (Body) view.getTag(R.id.mobike_body_tag);            if(body != null){                body.applyLinearImpulse(impulse, body.getPosition(),true);            }        }    }    public void onSensorChanged(float x,float y) {        //传感器模拟运动        int childCount = mViewgroup.getChildCount();        for (int i = 0; i < childCount; i++) {            Vec2 impulse = new Vec2(x, y);            View view = mViewgroup.getChildAt(i);            Body body = (Body) view.getTag(R.id.mobike_body_tag);            if(body != null){                body.applyLinearImpulse(impulse, body.getPosition(),true);            }        }    }    public float getFriction() {        return friction;    }    public void setFriction(float friction) {        if(friction >= 0){            this.friction = friction;        }    }    public float getDensity() {        return density;    }    public void setDensity(float density) {        if(density >= 0){            this.density = density;        }    }    public float getRestitution() {        return restitution;    }    public void setRestitution(float restitution) {        if(restitution >= 0){            this.restitution = restitution;        }    }    public float getRatio() {        return ratio;    }    public void setRatio(float ratio) {        if(ratio >= 0){            this.ratio = ratio;        }    }    public boolean getEnable() {        return enable;    }    public void setEnable(boolean enable) {        this.enable = enable;        mViewgroup.invalidate();    }}

阅读顺序，onlayout—ondraw，如果你仔细阅读过上面的百度文库，应该都可以看的懂代码。

转载:https://www.jianshu.com/p/3a7c84e29311