react可视化_如何使用React和Popmotion.io可视化煎饼算法

react可视化

What you are going to see below was supposed to be part of my solution to an exercise given in a coding challenge. It was several months ago, and I had signed in for it. Due to unforeseen factors, I hadn't finished it. Now, after that time and the challenge is finished, I can share it here.This is not going to be a step-by-step tutorial. Rather, it'll be a quick review of how can we use frameworks like React and Popmotion.io along with an algorithm. And then create a nice visualization of that very same algorithm. Somehow it feels nice! 邏The so called Pancakes Sorting Algorithm is a famous (or not?) sorting algorithm that you can read more about on the internet, if you're interested. Its nature is out of the scope of this article. Here we only see it in action with nice animations, thanks to Popmotion.io.Here is the live demo you can play with. There are two text inputs and two buttons. In the first input you enter the time interval which will be used for each animation round, that is how fast each pancake will be sorted. It's in milliseconds, which means if you enter the value 1000, the animation will execute for roughly 1 second.

您将在下面看到的内容应该是我对编码挑战中给出的练习的解决方案的一部分。 几个月前，我已经签了字。 由于不可预见的因素，我尚未完成。 现在，在那之后，挑战完成了，我可以在这里分享它。这不会是一个分步教程。 而是快速回顾一下如何使用React和Popmotion.io等框架以及算法。 然后创建一个与该算法完全相同的可视化效果。 不知何故感觉不错！ cake所谓的Pancakes Sorting Algorithm是一种著名的(或不是？)排序算法，如果您有兴趣的话，可以在Internet上阅读更多信息。 它的性质超出了本文的范围。 感谢Popmotion.io，在这里我们只能看到带有精美动画的动作，这里是您可以播放的现场演示 。 有两个文本输入和两个按钮。 在第一个输入中，输入将用于每个动画回合的时间间隔，即每个煎饼的分类速度。 以毫秒为单位，这表示如果输入值1000，动画将执行大约1秒钟。

The second input is used to define how many pancakes you want to see sorting. The value there must be between 2 and 50. The buttons are self-explanatory enough. One is for starting the sorting animation, the other one is for resetting it. And here is where you can find the source code for the demo app. Feel free to check it out and take a closer look. You might try to amend the animations I did. I would be more than interested to see your versions. :)That was all. Nice and short, perfect for the summer! ☀️  Thanks for reading! 

第二个输入用于定义要查看的煎饼数量。 该值必须在2到50之间。这些按钮很容易解释。 一种用于启动排序动画，另一种用于重置动画。 在这里 ，您可以找到演示应用程序的源代码。 随时检查一下并仔细查看。 您可以尝试修改我所做的动画。 我将非常有兴趣查看您的版本。 ：)这就是全部了。 短暂而美好，非常适合夏天！ ☀️感谢您的阅读！ 

翻译自: https://www.freecodecamp.org/news/visualize-pancakes-algorithm-with-react-and-popmotion-io/

react可视化