React怎么实现元素在浏览器可视范围内，随机移动，鼠标移上暂停动画

Question

而且页面高度会滚动，不知道怎么基于窗口范围去定位，控制动画

Answer 1

不用根据窗口范围定位，只需要把动画放到一个单独的层，这一层相对于窗口定位就可以了：

<div class="animation-layer">
</div>
<style>
    .animation-layer{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
</style>

如果用 canvas 动画的话记得监听窗口大小变化，调整画布大小。