Tumbling Demo show

When it comes to digital switching, you should be familiar with it. Let’s start with a GIF



At first glance it’s ok, but a closer look reveals two problems

  • Numbers scroll in different directions, some from the top down, some from the bottom up
  • Some numbers don’t scroll at all

The implementation of this scenario is roughly as follows

<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>
Copy the code

Scroll up and down by changing the translateY or top of ul, let’s say the current value is 1, then it becomes 9, ul rolls down, but when the number becomes 3, ul rolls up, so there’s another way

<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>
Copy the code

Done by figure students must know that we need in the last picture below to add the first figure, round for recycling, this principle with round figure is the same, or assume the current value is one of the most below 1, then 9, ul is rolling down, and then when the Numbers into three continued to roll down, scroll to the 3 above, At the end of the scroll, move to the bottom 3(no animation, no user perception). The problem is solved, but you will find that using the DOM is a bit too much, which is very inefficient. Of course, there is a solution, which is to set ul’s display equal to None after scrolling

The first problem has a good solution, the second problem is relatively complicated, the number does not move, because the corresponding position of the number does not change, but we imagine the actual scene, 111 becomes 211, does not need to scroll 11, it must move, otherwise how can 111,112,113… How about 209, 210, 111?

We first need to figure out the difference between before and after, and then calculate how far each position should scroll, and then draw the animation. So, for example, 111 -> 211, the difference is 100, and we need to move 100 units in the ones place, 10 units in the tens place, and 1 unit in the hundredth place

The problem is that you have to rotate 100 units in one place, and that’s impossible to do, because you can’t really put 100 Li’s in there, but if you put 1,000, 10,000 li’s in there, that actually leads to a scenario of how to do wireless scrolling

After careful analysis, you may find that users can see a maximum of two digits at one time. If you understand this, we can complete the whole scene with two Lis. After switching the corresponding values according to certain rules, let’s look at the source code of Tumbling

If you’ve seen this, you’re interested, and I’m going to share something that will make you even more interested

Having solved the above two problems, I began to think about another one

  • What if I wanted to do something else, instead of scrolling up and down like this, I could flip it left to right or up and down, or whatever
  • What if I want to change the numbers into characters or other pictures

After thinking about this issue, I need to start thinking about how to reduce abstraction. After carefully concluding the above two issues, ONE is the ability of animation extension and the other is the ability of content rendering extension. With these two issues in mind, I wrote Tumbling. Tumbling core is to realize the quantitative index is calculated, the animation output, simple to understand is the production data, as for how to use data, Tumbling provides the default approach (animation effects, and rendering), however, the user can decide how to use data to do animation, to render the content, MODEL = VIEW, did you get my point? Welcome to the Tumbling document

In addition, the Tumbling implements es: next specification, support tree – shaking, even though it itself is small ~ ~

At present, only the DOM version is open, and canvas will be added later. Why canvas, because it can produce a very gorgeous effect

It is a little late, tomorrow will fight double eleven, wash and sleep, and then continue to supplement by empty!!