React Flux:
Flux an application into four parts.
Flux's most important feature is the "one-way flow" of data.
The above procedure, the data is always "one-way flow", it will not be part of any adjacent "two-way flow" data occurs. This ensures a clear process. |
|
React animation library: react-motion
http://cexoso.github.io/cexoso/2017/10/08/read-react-motion/
spring spring:
Fspring force generated by the stiffness coefficient, generated by the damping force Fdamper. is defined as a direct acceleration, and here two forces (assuming that the mass of a chant). Followed by integration method (assuming a infinitesimal time, in fact, a time slice is 1/60 sec), and the new velocity is calculated new position. If the speed and position and speed differential will be set to 0 in the end of the movement accuracy. The last tuple returned with a new location and speed.
Easing function |
|
https://zhuanlan.zhihu.com/p/20458251 It has obvious problems with this approach:
We solve these problems one by one.
我们再以一个左右切换的 toggle 动画为例,写一个渲染函数:
有了这个函数之后,只需要告诉它 x 的当前值,新的页面就开始自动绘制了。由于 toggle 的运动规律,x 的值也不用手动依次给出,我们仍然可以写一个自动计算 x 的函数。这个自动计算 x 的函数,或者说计算页面状态的函数,就是缓动函数。
上述章节使用 setTimeout 来模拟时间的逝去,然而浏览器为动画过程提供了一个更为专注的 API -requestAnimationFrame。 raf 使用起来就像 setTimeout 一样,但有以下优点:
raf 的这个特性,还可以利用在实时模块中,让标签页隐藏时停止发请求。
然后,我们尝试用 React 和 raf 来重构一次 Toggle 动画。在数据上,用中介者模式实现一个简单的单向数据流:
动画是源自现实世界的,人类早已习惯了一个变速运动的物理环境,这样的一个匀速动画会让人相对感觉不适。 而从动画体验的角度来说,不同的缓动函数会带给用户不同的缓动体验。缓动体验一般为: 匀速缓动 < 变速缓动 < 物理缓动。 其中,spring 是最经典也是最常用的物理缓动。React Motion 就使用了这种物理缓动 —— 弹簧( spring )。 React Motion 缓动原理剖析React Motion 使动画看起来像一个弹簧那样(一个有空气阻力的弹簧,如果没有空气阻力,弹簧就会不停地做简谐运动了)。大家可以尝试使用 React Motion 的spring-parameters-chooser,配置一个合适的劲度系数和空气阻力。弹簧动画可以使网站增添一些俏皮的元素,让用户体验起来更加舒畅! 下面就让我们进入主题,开始解读 React Motion 的缓动过程。 先模拟弹簧的物理规律,实现弹簧动画。
CSS 动画与 JS 动画总的来说,使用 CSS 动画,能够得到更好的性能和更快的开发效率,然而 CSS 虽然更方便,但也必然有其做为 DSL 的局限性。例如: 1. 缓动函数单一(只有 cubic-bezier ) 2. CSS 动画并不支持所有属性。例如 svg path 的 d 属性。 3. translate,rotate,skew 等都属于一个属性 —— transform。所以这些属性只能共用同一个缓动函数。(假如,我们想要动画的轨迹是一条贝塞尔曲线,可以通过给 translateX 和 translateY 这两个属性加两个不同的 cubic-bezier 缓动函数来实现,因此这就只能使用 JS 动画了) (值得一提的是,CSS3 transition 的实现也使用了 raf 的机制,当标签页被切换时, transition 动画也会暂停,大家不妨试一试) 而 JS 动画刚好弥补了 CSS 动画的这些不足。 React 通过设置 state 让界面迅速发生变化,但动画的哲学告诉我们,变化要慢,得用一个逐渐变化的过程来过渡,从而帮助用户理解页面。 而界面的变化无非是 DOM 节点(或组件)的增与减和 DOM 节点(或组件)属性的变化。React 的 TransitionGroup 帮助我们便捷地识别 React 中的那些增加或删除的组件,从而让我们可以专注于更加简单的属性变化的动画。 |
|
https://threejs.org/examples/#webgl_animation_cloth
超多示例:
|
|
就三个公式: |