D5-Android绘图之让图形动起来

以前在Html利用js控制SVG或canvas进行运动模拟。浏览器自带window.requestAnimationFrame能不断执行渲染 在这使用我的LogicCanvas中的NumGo进行不断渲染工作,用法详见: 绘图部分基于我的LogicCanvas绘图库:基础使用在此, 喜欢的话可以到项目的github上看看,顺便给个star 如果此篇看起来有些困难,可以先看一下其他D系列文章,尤其是:D4-Android绘图之和我一起画箭头 本篇将介绍:反弹、自由落体、平抛、斜抛的物理场景模拟


一、反弹

效果.gif

1.构造函数初始化时:核心就是:位移=时间*速度
//创建一个水平速度向量对象,并赋值水平速度为100px/s,竖直速度50px/s
mVA = v2(100, -50);
//创建一个位移向量对象
mSA = v2(0, 0);

mRunNum = new NumGo(false, 0, 100000).setOnUpdate(new NumGo.OnUpdate() {
    @Override
    public void onUpdate(float rate) {
        long frameTime = System.currentTimeMillis();
        float detaT = frameTime - lastFrameTime;//时间变化量
        Pos detaS = mVA.dotC(detaT / 500);//位移增量=速度*时间变化量
        Pos detaSB = mVB.dotC(detaT / 500);//位移增量=速度*时间变化量
        mSA = mSA.add(detaS);//位移总量 = 位移增量和
        mSB = mSB.add(detaSB);//位移总量 = 位移增量和
        //区域限定
        if (mSA.x > 200 || mSA.x < -200) {
            mVA = mVA.refX();//x反弹
            mAColor = ColUtils.randomRGB();//随机色
        }
        if (mSA.y > 200 || mSA.y < -200) {
            mVA = mVA.refY();//Y反弹
            mAColor = ColUtils.randomRGB();
        }
        
        invalidate();
        lastFrameTime = frameTime;//时刻更新
    }
});
2.成员变量:
    Pos coo = v2(500, 600);
    private NumGo mRunNum;
    private long lastFrameTime;
    private Pos mVA;
    private Pos mSA;
    private Shape mFA;
    private int mBColor = Color.RED;
    private int mAColor = Color.BLUE;
2.抬起的事件:启动mRunNum
lastFrameTime = System.currentTimeMillis();
mRunNum.go();
3.绘制的方法:OnDraw中:
        Painter painter = PainterEnum.INSTANCE.getInstance(canvas);
        mFA = sa.deepClone().r(20).ang(360).fs(mAColor).p(mSA).coo(coo);//绘制小球
        //绘制矩形区域
        Shape fr = new ShapeRect().x(440).y(440).r(1).fs(0x66B8F8F0).coo(coo).p(-220, -220);
        painter.draw(fr, mFA);

二、自由落体:

自由落体.gif

加入加速度向量,初速度设为0:
 mG = v2(0, -10);
 mV = v2(0, 0);
处理位移时将加速度叠加到速度上
Pos detaV = mG.dotC(detaT);//速度变化量
mV = mV.add(detaV);//速度增量和

三、平抛运动:

平抛运动.gif

增加水平初速度
 mV = v2(3000, 0);

四、斜抛运动:

斜抛运动.gif

mV = v2(3000, -5000);//倾斜初速度

后记、

1.声明:

[1]本文由张风捷特烈原创,转载请注明 [2]欢迎广大编程爱好者共同交流 [3]个人能力有限,如有不正之处欢迎大家批评指证,必定虚心改正 [4]你的喜欢与支持将是我最大的动力

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏lonelydawn的前端猿区

一款不可多得的火柴时钟

? 火柴时钟 一款有意思的时钟玩具,原生代码编写,使用 CSS 渲染过渡动效,引入 base64 格式 data url 图片。 引用 <link rel=...

3027
来自专栏24K纯开源

QT中获取选中的radioButton的两种方法

QT中要获取radioButton组中被选中的那个按钮,可以采用两种如下两种办法进行: 方法一:采用对象名称进行获取 代码: 1 QRadioButt...

2455
来自专栏web编程技术分享

js常用方法和一些封装(2) -- 随机数生成

36010
来自专栏前端小作坊

CSS3着重符及其fallback

在中文里面,我们一般会在文字下方加上圆形符号。在日语中会在文字上方加上小顿号。在CSS3中如下属性可以控制着重符号:

1002
来自专栏HTML5学堂

JavaScript | 动画显示比例的投票效果

HTML5学堂(码匠):一个简洁实用的投票效果如何使用原生JS来进行实现呢?同时动画显示比例的形式又需要依靠哪些技术来实现?是数学对象还是字符串操作,又或者是计...

3446
来自专栏潇涧技术专栏

When Math meets Android Animation (2)

当数学遇上动画:讲述ValueAnimator、TypeEvaluator和TimeInterpolator之间的恩恩怨怨(2)

1021
来自专栏phodal

「微信小程序」剖析(四):原生的实时DOM转Virtual DOM

在之前的几篇文章里,我们讨论了MINA的一些原理。晚上在想着怎么结合Vux + Virtual Dom实现一个名为WINV框架的时候,在探索WCC功能才发现:自...

2206
来自专栏JackieZheng

初探JavaScript(二)——JS如何动态操控HTML

  除去五一三天,我已经和《JavaScript Dom编程艺术》磨合了六天,第一印象很好。慢慢的,我发现这是一块排骨,除了肉还有骨头。遇到不解的地方就会多看几...

2605
来自专栏前端新视界

CSS 特殊属性介绍之 pointer-events

首先看一下 MDN 上关于 pointer-events 的介绍: CSS属性 pointer-events 允许作者控制特定的图形元素在何时成为鼠标事件的 t...

19610
来自专栏GreenLeaves

FactoryMethod工厂方法模式升级成AbstractFactory抽象工厂模式

具体参考抽象工厂(AbstractFactory)模式-创建型模式,本文在FactoryMethod工厂方法模式(创建型模式)的基础上进行业务进一步抽象,不做详...

943

扫码关注云+社区

领取腾讯云代金券