标签: requestanimationframe

有没有办法知道浏览器何时正在运行requestAnimationFrame？

例如,当我从正在运行的标签切换标签时requestAnimationFrame,该功能停止执行,当我切换回它继续时,处理这个的最佳方法是什么？

在使用requestAnimationFrame API时,我遇到了一个问题.这可能是因为我使用的结构是错误的,但对我来说似乎合乎逻辑.

我基本上做的是一个非常简单的背景位置操作,以实现无限下降效果:

(此版本已简化,但有说明性)

cache.mechanism.snowFall = function(){

    cache.snow.position.y ++;
    if( cache.snow.position.y > cache.viewport.height ){ 
        cache.snow.position.y -= cache.viewport.height; 
    }
    cache.snow.elem.style.backgroundPosition = "0px " + cache.snow.position.y + "px";

    requestAnimationFrame( cache.mechanism.snowFall );

};

实际上,它会将每个动画帧的背景位置移动1px.(必要时重置,以避免高油漆时间和FPS损失)

我通过调用初始化它:

cache.mechanism.snowFall();

因此,它运行良好,具有非常高的FPS,但是不可能阻止它.

cancelAnimationFrame( cache.mechanism.snowFall );

什么都不做,并返回undefined.

因此，我正在制作像游戏这样的小俄罗斯方块，其中瓷砖彼此之间掉落，被破坏等。我正在通过制作HTML5画布动画requestAnimationFrame()。调用此方法可收集悬挂在空中的瓷砖并将其平稳地放下：

function dropTiles() {
    var tileArray = getFallingTiles();
    function step() {
        var finished = true;
        for (var index = 0; index < tileArray.length; ++index) {
            var currentTile = tileArray[index];
            if (currentTile.fallDepth > 0) {
                finished = false;
                currentTile.erase();
                currentTile.positionY -= 1;
                currentTile.fallDepth -= 1;
                currentTile.draw();
            }
        }
        if (!finished) {
            window.requestAnimationFrame(step);
        }
    }
    window.requestAnimationFrame(step);
}

这是从以下位置调用上述方法的主要方法：

function doGameEvents() {
    setCanvasListeners(false);
    do {
        var comboFactor = 1;
        dropTiles();
        while (getGroups()) {
            score();
            dropTiles();
            ++comboFactor;
        }
        if (comboFactor == 1) …

我有两个观测值Observable.of(0, animationFrame)＆Observable.fromEvent(window, 'scroll')。我想将它们组合在一起，以便renderScrollBar(event)仅在animationFrame的刻度上调用my 。

  Observable.fromEvent(window, 'scroll')
      .map((event: any) => event.currentTarget)
      .subscribe((event) => {
        this._renderScrollBar(event);
      });
  let x = 0;
  Observable.of(0, animationFrame)
      .repeat()
      .takeUntil(Observable.timer(1000))
      .subscribe(() => console.log(x++));
}

我有两个问题.

• 为什么使字母随机消失的动画对所有字母的速度都不一样？动画不流畅.

• 如何使动画在另一侧工作？当我用.hide()隐藏div时,我尝试使其显示为不透明度,这将无效.我已经尝试了不同的解决方案但是真的没有什么能让div出现

码:

function wow1 () {

	var mail1 = $(".mailFirst h2");
	var letters = mail1.children();

	setInterval(function() {
		letters.eq(Math.random()*letters.length |0).animate({opacity:0},500);
	},500);
}

$(document).ready(wow1);

.mailFirst	{position: absolute;
			       top: 0;
			       left: 0;
			       color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mailFirst">
  <h2> 
    <span> @ </span>
    <span> E </span>
    <span> - </span>
    <span> M </span>
    <span> a </span>
    <span> i </span>
    <span> l </span>
    <span> @ </span>
  </h2>
</div>