聊聊数字切换库Tumbling的开发心路历程

先安利一波，Tumbling demo show
说到数字切换，你们应该比较熟悉，先来一张gif

初看还能够，细看会发现有两个问题

• 数字滚动的方向不一致，有的从上往下，有的从下往上
• 有的数字根本没有滚动

这种场景的实现大体以下

<ul>
  <li>9</li>
  <li>8</li>
  <li>7</li>
  <li>6</li>
  <li>5</li>
  <li>4</li>
  <li>3</li>
  <li>2</li>
  <li>1</li>
  <li>0</li>
</ul>复制代码

经过改变ul的translateY或者top来实现数字上下滚动，假设当前值是1，而后变成9，ul是向下滚，但是当数字变成3的时候，ul就得向上滚才行，怎么解决呢，因而就有了另一种写法

<ul>
  <li>9</li>
  <li>8</li>
  <li>7</li>
  <li>6</li>
  <li>5</li>
  <li>4</li>
  <li>3</li>
  <li>2</li>
  <li>1</li>
  <li>0</li>
  <li>9</li>
  <li>8</li>
  <li>7</li>
  <li>6</li>
  <li>5</li>
  <li>4</li>
  <li>3</li>
  <li>2</li>
  <li>1</li>
  <li>0</li>
</ul>复制代码

作过轮播图的同窗确定知道，咱们须要在最后一张图的后面还要添加第一张图，来实现循环轮播，这个原理跟轮播图是同样，仍是假设当前值是最下面的1，而后变成9，ul是向下滚，而后当数字变成3的时候,继续向下滚，滚动到上面的那个3，当滚动结束的时候再移到最下面的3(这个过程没有动画，用户无感知)，问题是解决了，可是你会发现用的DOM实在是有点多，比较耗性能，固然也有能解决的办法，就是滚动结束后让ul的display等于none

第一个问题有了还不错的方案，第二个问题就相对复杂了，数字不动，是由于对应这个位置的数字没有发生变化，可是咱们想象实际场景，111变成211，难道最右边的11不须要滚动么，确定是要动，要否则怎么能有111，112，113 ... 209 210 111这样的真实动画效果呢，如何解决呢？

咱们首先须要算出先后的差值，而后分别计算各个位置的数字应该滚动的距离，而后绘制动画，那前面举个例子，111 -> 211, 差值是 100，个位须要移动 100个单位，十位须要移动 10个单位，百分须要移动1个单位
问题来了个位须要转100个单位，依照前面的思路根本实现不了，你不可能真的放100个li在里面，若是变成1千，1万个呢，这其实引起了一个若是实现无线滚动的一个场景
细细分析，你会发现任什么时候候，这个数字滚动效果在同一时间用户最多能看到两个数字，若是你理解了这一点，咱们就能够用两个li去完成整个无线滚动的场景，两个li按照必定的规律来切换对应的值具体实现能够去看Tumbling的源码

若是你看到了这里，说明你对这个颇有兴趣，那么我接下来分享的应该是会让你更加有兴趣的
搞定了上面两个问题，我又开始思考另外的问题

• 若是我还想实现别的效果呢，不是这种上下滚动，而是左右翻转或者上下翻转，或者别的呢
• 若是我想把里面的数字换成字符、或者别的图片呢

当想到这个问题的时候，就是须要开始思考如何去抽象了，细细概括，上面两个问题，一个是动画扩展的能力，一个是内容渲染扩展的能力，带着这两个问题，我编写了Tumbling，核心的思想也是用来解决上面的两个问题，Tumbling核心是实现了计算、各动画指标的量化输出，简单理解就是生产数据，至于怎么使用数据，Tumbling提供了默认的处理方式(动画效果，内容渲染)，然而使用者是能够本身决定如何用数据来作动画，来作渲染内容，MODEL =》 VIEW，你get到了个人点了么？欢迎翻看Tumbling文档

另外补充下，Tumbling实现了es:next规范，支持tree-shaking，虽然它自己也很小~~
目前只开放了DOM的版本，后续还会补上canvas，为何要有canvas呢，由于能够制做出很是绚烂的效果

github地址sheweichun.github.io/tumbling/bu…,欢迎查阅

有点晚了，明天还要奋战双十一，洗洗睡了，后面由空再继续补充啦!!