RxJS animationFrame
动画帧计划程序
const animationFrame: any;
描述
执行任务时,window.requestAnimationFrame
会开除
当animationFrame
延迟使用调度程序时,它将退回到async
调度程序的行为。
无延迟,animationFrame
调度可以用来创建流畅的浏览器的动画。它确保计划的任务将在下一个浏览器内容重新绘制之前发生,从而尽可能高效地执行动画。
例
安排div高度动画
// html: <div style="background: #0ff;"></div>
import { animationFrameScheduler } from 'rxjs';
const div = document.querySelector('div');
animationFrameScheduler.schedule(function(height) {
div.style.height = height + "px";
this.schedule(height + 1); // `this` references currently executing Action,
// which we reschedule with new state
}, 0, 0);
// You will see a div element growing in height