2

まず第一に、はい、私は車輪を再発明したいことを知っています. しかし、これはポイントではありません。私はJavascriptが初めてで（学校で基本的なトレーニングを受けました）、Javascriptで作成されたアニメーションをコピーして貼り付けるだけでなく、理解したいと思っています。特定のパラメーターを変更して、Web ページの見栄えを良くしたいと考えています。

これが私の問題です（おそらく非常にばかげた質問ですが、とにかく）。この Javascript アニメーション チュートリアルを見つけました: http://javascript.info/tutorial/animation#the-basics-of-the-animation

それはまさに私が探していたものです. だから私が本当に得られないのは7行目と8行目です（太字）：

function animate(opts) {
    var start = new Date
    var id = setInterval(function () {
        var timePassed = new Date - start
        var progress = timePassed / opts.duration
        if (progress > 1) progress = 1
        var delta = opts.delta(progress)
        opts.step(delta)
        if (progress == 1) {
            clearInterval(id)
        }
    }, opts.delay || 10)
}

他のすべては理解できます。また、得られないのはデルタです（数学的な概念などは理解しています）が、それらの使用方法（適切な使用方法）は理解していません。

このコードを修正し、次のコードの 7 行目に何を書かなければならないかを説明してくれる親切な人がいれば、線形デルタが必要な場合は、本当に感謝しています。また、アニメーション化する関数 (この場合は関数 move()) を適切に呼び出す方法も知りたいと思います。

function move(element, delta, duration) {
    var to = 500
    animate({
        delay:10,
        duration:duration || 1000, // 1 sec by default
        delta:delta,
        step:function (delta) {
            element.style.left = to * delta + "px"
        }
    })
}
4

2 に答える 2

0

チュートリアルを確認したところ、デルタは、アニメーションがどれだけ動いているかを追跡するために使用される属性にすぎないように思えます。数値は常に 0 から 1 の間であるため、アニメーションの開始時は element.style.left = 0px であり、終了時は 500px になります。入力に応じて、値は線形または指数 (イージングあり) に設定できます。

あなたのコードは現在機能していませんか? または、デルタが何であるかについて疑問に思っていますか?

于 2012-07-06T16:45:23.920 に答える
0 
function move(element, delta, duration) {
    var to = 500
    animate({
        delay: 10,
        duration: duration || 1000, // 1 sec by default
        delta: delta,
        step: function(delta) {
            element.style.left = 100*delta + "px"    
        }
    }) 
}

あなたが言及したページのデルタセクションには、次のマッピングがあります。

  • 進行状況 = 0 -> 高さ = 0%
  • 進行状況 = 0.2 -> 高さ = 20%
  • 進行状況 = 0.5 -> 高さ = 50%
  • 進行状況 = 0.8 -> 高さ = 80%
  • 進行状況 = 1 -> 高さ = 100%

そして、デルタを次のように定義します。

delta(progress) は、時間の進行 "progress" をアニメーションの進行 "delta" にマップする関数です。

これは、線形デルタが次の規則に従う関数であることを意味します。

  • デルタ(0) -> "0%"
  • デルタ(0.2) -> "20%"
  • デルタ(0.4) -> "50%"
  • デルタ(0.8) -> "80%"
  • デルタ (1) -> "100%"

これは、あなたの例では「デルタ：デルタ」という行で定義されています。

ステップ関数は、このデルタをコードに適用します。この場合、次を使用します。

element.style.left = to*delta + "px"

デルタ 0 は、属性が「0px」になることを意味します。1 のデルタは、属性が「500px」になることを意味します。進行状況 0 はアニメーションの開始を示し、進行状況 1 はアニメーションの終了を示します。この例では、デルタは進行状況と同じです。アニメーションの途中で、進行状況は 50% です。delta(0.5) = 0.5 なので、ステップに渡される引数は 0.5 になり、属性は「250px」になります。

要素に適用する属性の値をテストするには、開発者コンソールを使用することをお勧めします。

于 2012-07-06T16:53:21.290 に答える