1

CPU 効率の非常に高いスクロール テキストをできるだけスムーズに作成する必要があります。パフォーマンスが非常に重要な理由は、ユーザーのマイクから同時に録音しているからです。これまでに2つのことを試しました：

scroller = setInterval(scroll_words, 100);

function scroll_words ()
{
   var words= document.getElementById("words");
   var speed = document.getElementById("word_speed").value;
   var total_height = word.children.length * 18;
   words.scrollTop += 0.1 * 18 * speed;
}

これは著しく途切れ途切れであり、記録に重大なエラー (スキップまたはブランク スポット) を引き起こします。これが私の2回目の試みです：

var words = document.getElementById("words");
var speed = document.getElementById("word_speed").value;
words.style.webkitTransition = ((18 * words.children.length)/speed)+"s all linear";
words.style.webkitTransform = "translate(0px, -"+(18 * words.children.length)+"px)";

これにより、パフォーマンスがそれほど厳しくはありません (サブピクセルの動きができるため、はるかにスムーズです) が、一部のコンピューター、特にオンボード ビデオを使用するコンピューターでは、記録時に顕著なエラーが発生します。

CPUにあまり負荷をかけずにこれを行う方法はありますか?

4

1 に答える 1

1

あなたが試すことができる2つの簡単な解決策があります：

  1. 3D 変換を使用して、最新のブラウザーに GPU アクセラレーションの使用を強制する
  2. テキストをチャンクに分割し、全体ではなく、目に見えるチャンクのみをアニメーション化します。チャンクは次のようになります: [p1p2] [p2p3] [p3p4] など、それぞれ 2 ページ。
于 2013-08-30T13:15:51.320 に答える