0

paper.js を使用して図形の変換をアニメーション化するのに役立つ小さな JavaScript ライブラリを作成しようとしていますが、残念ながら、この種のグラフィックス/数学は私の強みではありません!

フレームごとに小さな変換を行うことで、平行移動や回転などの単純な変換を実装できましたが、形状を累積的にスケーリングするための計算を行うことはできません。

たとえば、翻訳アニメーション コードの大まかな疑似コード バージョンは次のとおりです。

function rotateAnimation(shape, degrees, timeSecs) {
    var anglePerSecond = degrees / timeSecs,
        duration = timeSecs;
    shape.onFrame = function(e) {
        var timePassedSinceLastFrame = e.delta, // in seconds
            rotateAmount = anglePerSecond * timePassedSinceLastFrame;
         shape.rotate(rotateAmount);
         duration -= timePassedSinceLastFrame;
    }
}

各フレームのスケール量を計算する方法がわからないため、この種のアプローチをスケーリングに機能させる方法を理解できません。誰かがこれについて何かアドバイスがあれば、それは大歓迎です! 上記の粗末な疑似コードではなく、実際のコードを見たい場合は、github にあります: https://github.com/jordanwallwork/paper.animate/blob/master/paper.animate.js

編集：剪断にも同じ問題があります！

4

1 に答える 1

0

最終的にこれに対する私の解決策は、増分ステップでスケール/せん断を計算するのではなく、変換を実行して目的の結果を計算し、次に、既に記述した変換コードを使用して各ポイントを個別にアニメーション化することでした

于 2013-02-05T20:34:28.750 に答える