熵与负熵

熵遵循熵增原理,即无序非热能与热能之间的转换具有方向性。薛定谔说过:生命本质在于负熵。熵代表的是无序,负熵就是熵的对立,而负熵表示的则是有序。汲取负熵(米饭、面包、牛奶、鸡蛋),可以简单的理解为从外界吸收了物质或者能量之后,转化成负熵流,使系统的熵降低,人体变得更加有序。

那么一直吃饭为何还衰老?一日吃6餐行不行?答案是肯定不行。

负熵流和熵增伴从出生到死亡一直在对抗,随着时间流逝,负熵流慢慢对抗不过熵增,人体组织体系结构越来越无序。越无序就越难以抵抗疾病,所以通常死亡不是熵增到无序而老死,而是熵值较大时,难以抵抗其他疾病而死亡。最终归于尘土、洒向大海(更加无序了)。

所以:熵增加的方向就是时间的方向,时间不可逆,回到过去是不可能的,才有了AlloyTicker-让时光倒流成为可能....

Github: https://github.com/AlloyTeam/AlloyTicker

Demo: http://alloyteam.github.io/AlloyTicker/

传统的动画和运动

涉及到动画和运动才能和时间关联起来。这里做下分类:

1.精灵图动画:如利用精灵图实现人物跑、走等

2.积分运动:如粒子系统、子弹飞行等

3.缓动:如骨骼动画、弹出层特效、金币拾取等其他拥有起点、终点、时间和缓动函数的运动

精灵图动画

如上面的精灵图动画,当需要求出当前播放哪一帧的时候,通常按照下面这种方式计算:

var index = Math.floor(dt / interval) % length;

其中index为当前求出的结果。

dt为过去了多长时间

interval每一帧的间隔时间

length为总共的帧数

精灵图动画可逆设计

要实现精灵图动画可逆,必须对dt进行动态计算。dt怎么计算?

dt = 当前时间 - 开始时间

即:

var dt = currentTime - startTime;
var index = Math.floor(dt / interval) % length;

只需要把currentTime和startTime保存好方便sprite对象使用即可实现可逆。

当然这里要做边界处理,即dt小于0,代表播放时间还未开始,index是没有对应的值。

积分运动

传统的做法:

this.vx += this.ax * dt;
this.vy += this.ay * dt;
this.x += this.vx* dt;
this.y += this.vy * dt;

即:

速度是加速度在时间上的累加

位移是速度在时间上的累加

积分运动可逆设计

问题建模:根据起点位置(startX startY)、起始速度(vx vy)、加速度(ax ay)、开始时间(startTime)、当前时间(currentTime)求当前位置(x y)。

var dt = this.currentTime - this.startTime;
var h_sqDt = dt * dt/2;
this.x = this.startX + this.vx * dt + this.ax * h_sqDt;
this.y = this.startY + this.vy * dt + this.ay * h_sqDt;

公式:

缓动

this.dv = this.endValue - this.startVaule ;
var result = this.startVaule + this.dv * this.ease(dt / this.time);

其中result为当前求出的结果。

endValue为最终要运动到的结果

startVaule为开始运动的状态

ease为缓动函数

time为总时间

缓动可逆设计

缓动天生就是支持可逆设计。只需计算好dt便可。

var dt = currentTime - startTime;

当然还要处理一下边界情况,因为时间的流动性,dt是可能大于0或者dt大于传入的总时间this.time。

当dt小于0,即result等于this.startVaule

当dt大于总时间,即result等于this.endVaule

精灵图动画+积分运动

如上面的超级玛丽,不仅需要播放精灵图动画,还需要向右的积分运动。所以需要同时顾及两种状态:

var dt = this.currentTime - this.startTime;
//计算关键帧索引的结果
if (dt < 0) {
this.index = -1;
} else {
this.index = Math.floor(dt / this.interval) % this.length;
}
//计算积分运动的结果
this.x = this.startX + this.vx * dt;
this.y = this.startY + this.vy * dt;

AlloyTicker

是时候抽象出一个时间机器的-AlloyTicker。

var AlloyTicker = function(){
this.interval= null;
this.intervalTime= 16;
this.tickIntervalTime = 16;
this.currentTime = 0;
this.clockwise = true;
this.ticks=[];
this.isPause = false;
this.isStop = false;
} AlloyTicker.prototype = {
//时间开始
start: function () {
this.interval = setInterval(function () {
if(!this.isPause){
this.currentTime += (this.clockwise ? this.intervalTime : -1 * this.intervalTime);
if(this.currentTime<0)this.currentTime=0;
this.tick();
}
}.bind(this), this.tickIntervalTime);
},
tick: function () {},
//时光倒流
back: function () {
this.clockwise = false;
},
forward: function () {},
goto: function(time){},
pause:function(){},
play :function(){},
stop:function() {},
scale:function(value){}
}

因为:

1.从逻辑层面上currentTime不属于动画或运动对象的属性,都属于AlloyTicker时间机器的属性。

2.统一时间管理(倒流(back)、暂停(pause)、加速减速(scale)、时间跳转(goto)...)

3.所有对象的动画和运动都跟AlloyTicker挂钩,AlloyTicker时间状态的变更会影响到所有挂钩的对象

Github: https://github.com/AlloyTeam/AlloyTicker

Demo: http://alloyteam.github.io/AlloyTicker/

时光倒流程序设计-AlloyTicker的更多相关文章

  1. UVaLive5031 Graph and Queries(时光倒流+名次树)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=20332 [思路] 时光倒流+名次树(rank tree). 所谓“ ...

  2. 假如时光倒流,我会这样学习Java

    回头看看, 我进入Java 领域已经快15个年头了, 虽然学的也一般, 但是分享下我的心得,估计也能帮大家少走点弯路. [入门] 我在2001年之前是C/C++阵营, 有C和面向对象的基础, 后来转到 ...

  3. 假如时光倒流,我会这么学习Java

    回头看看, 我进入Java 领域已经快15个年头了, 虽然学的也一般, 但是分享下我的心得,估计也能帮大家少走点弯路. [入门] 我在2001年之前是C/C++阵营, 有C和面向对象的基础, 后来转到 ...

  4. [NOI2017]蔬菜——时光倒流+贪心

    题目链接 题解: 貌似一眼看过去是一个贪心. 其他的算法要记录的东西就太多了. 部分分其实很高.但是没有什么提示. 想一些套路:二分?不行还要贪心判断. 分治?前后取法是有影响的. 时光倒流? 也许可 ...

  5. 水管局长数据加强版:lct,时光倒流,最小生成树,边化点

    Description: SC省MY市有着庞大的地下水管网络,嘟嘟是MY市的水管局长(就是管水管的啦),嘟嘟作为水管局长的工作就是:每天供水公司可能要将一定量的水从x处送往y处,嘟嘟需要为供水公司找到 ...

  6. 并查集+时光倒流 || [JSOI2008]星球大战starwar || BZOJ 1015 || Luogu P1197

    题面:P1197 [JSOI2008]星球大战 题解: 坑点有点多啊,加上我本来就有点头昏脑涨,一道水题写了一万年.. 并查集不支持拆开(但是可以撤销合并),只支持合并.所以把询问离线了,从最后状态到 ...

  7. 洛谷 P2542 [AHOI2005]航线规划 树链剖分_线段树_时光倒流_离线

    Code: #include <map> #include <cstdio> #include <algorithm> #include <cstring&g ...

  8. 这个linux命令能让时光倒流!你不知道的date隐藏用法

    文章每周持续更新,各位的「三连」是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 今天给项目写了个脚本需要获取前一天的时间,本来先获取今天的然后减一下, ...

  9. 【Mood-10】每个程序员都应该读的30本书

    “如果能时光倒流,回到过去,作为一个开发人员,你可以告诉自己在职业生涯初期应该读一本,你会选择哪本书呢?我希望这个书单列表内容丰富,可以涵盖很多东西.” 很多程序员响应,他们在推荐时也写下自己的评语. ...

随机推荐

  1. 从史上八大MySQL事故中学到的经验

    本文列举了史上八大MySQL宕机事件原因.影响以及人们从中学到的经验,文中用地震级数来类比宕机事件的严重性和后果,排在最严重层级前两位的是由于亚马逊AWS宕机故障(相当于地震十级和九级). 一.Per ...

  2. windows 7(32/64位)GHO安装指南(系统安装篇)~重点哦!!~~~~

    经过了前三篇的铺垫,我们终于来到了最重要的部分~~如果没看过前几篇的小伙伴们,可以出门右转~~用十几分钟回顾一下~~然后在看这篇会感觉不一样的~~~~ 下面让我们来正式开始吧 我们进入大白菜的桌面是酱 ...

  3. Spark笔记:RDD基本操作(下)

    上一篇里我提到可以把RDD当作一个数组,这样我们在学习spark的API时候很多问题就能很好理解了.上篇文章里的API也都是基于RDD是数组的数据模型而进行操作的. Spark是一个计算框架,是对ma ...

  4. LINQ Group By操作

    在上篇文章 .NET应用程序与数据库交互的若干问题 这篇文章中,讨论了一个计算热门商圈的问题,现在在这里扩展一下,假设我们需要从两张表中统计出热门商圈,这两张表内容如下: 上表是所有政区,商圈中的餐饮 ...

  5. 搭建 windows(7)下Xgboost(0.4)环境 (python,java)以及使用介绍及参数调优

    摘要: 1.所需工具 2.详细过程 3.验证 4.使用指南 5.参数调优 内容: 1.所需工具 我用到了git(内含git bash),Visual Studio 2012(10及以上就可以),xgb ...

  6. Spring学习记录(十三)---基于xml文件配置AOP

    上一篇讲了用注解配置AOP,现在讲用xml怎么配置AOP 其实逻辑是一样的,只是用xml的方法,要把这种逻辑写出来,告诉spring框架去执行. 例子:这里的例子和上一篇的例子一样.换成xml方式 / ...

  7. z-index--记录七

    1.z-index用来控制元素重叠时堆叠顺序. 适用于:已经定位的元素(即position:relative/absolute/fixed). 2.不使用z-index的时候,堆叠顺序如下(从下到上) ...

  8. Android开发之自定义组件和接口回调

    说到自定义控件不得不提的就是接口回调,在Android开发中接口回调用的还是蛮多的.在这篇博客开始的时候呢,我想聊一下iOS的自定义控件.在iOS中自定义控件的思路是继承自UIView, 在UIVie ...

  9. 如何在删除ibdata1和ib_logfile的情况下恢复MySQL数据库

    昨天,有个朋友对公司内部使用的一个MySQL实例开启binlog,但是在启动的过程中失败了(他也没提,为何会失败),在启动失败后,他删除了ibdata1和ib_logfile,后来,能正常启动了,但所 ...

  10. SQL语句优化

    (1)      选择最有效率的表名顺序 ( 只在基于规则的优化器中有效 ) : ORACLE 的解析器按照从右到左的顺序处理 FROM 子句中的表名, FROM 子句中写在最后的表 ( 基础表dri ...