先安利一波,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…,欢迎查阅
有点晚了,明天还要奋战双十一,洗洗睡了,后面由空再继续补充啦!!
来源: https://juejin.im/post/5a0487466fb9a045030f899c