Pixi.js:这个复杂的 position/alpha/scale 数字序列是如何生成的?

Pixi.js: How is this complex series of position/alpha/scale numbers generated?

谁能解释一下这个文件是如何生成的,是用什么制作的?这是大量的 y 位置、alpha 和比例点,每帧一个,用于在 pixi canvas 上动画精灵。有些元素可能有 800 个位置点?我在想每个 y 点都不是单独输入的,但也许是 :) 如果每个数字都是输入的而不是以其他方式生成的,那么似乎很难改进动画。

http://flashvhtml.com/js/site/ScrollMap.js

例如:

var rockets = {rockets:[{startFrame:0, endFrame:100, position:[1.15,5,3.14,2.25,10,3.14,3.3,15,3.14,4.3,20,3.14,5.3,25,3.14,6.25,30,3.13,7.15,35,3.13,8.05,40,3.13,8.9,45,3.13,9.75,50,3.13,10.55,53,3.13,11.35,54,3.13,12.15,53,3.13,12.9,50,3.13,13.65,45,3.13,14.4,38,3.13,15.1,29,3.13,15.8,18,3.13,16.5,5,3.13,17.2,-9.95,3.13,17.85,-26.9,3.13,18.5,-45.85,3.13,19.15,-66.8,3.13,19.8,-89.75,3.13,20.45,-114.7,3.13,21.05,-141.65,3.13,21.65,-170.6,3.13,22.25,-201.55,3.13,22.85,-234.5,3.13,23.45,-269.45,3.13,24.05,-306.4,3.13,24.6,-345.35,3.13,25.15,-386.3,3.13,25.7,-429.25,3.13,26.25,-474.2,3.13,26.8,-521.15,3.13,27.35,-570.1,3.13,27.9,-621.05,3.13,28.45,-674,3.13,29,-728.95,3.13,29.55,-785.9,3.13,30.05,-844.85,3.13,30.55,-905.8,3.13,31.05,-968.75,3.13,31.55,-1033.7,3.13,32.05,-1100.65,3.13,32.55,-1169.6,3.13,33.05,-1240.55,3.13,33.55,-1313.5,3.13,34.05,-1388.45,3.13,34.55,-1465.4,3.13,35.05,-1544.35,3.13,35.55,-1625.3,3.13,36.05,-1708.25,3.13,36.55,-1793.2,3.13,37.05,-1880.15,3.13,37.55,-1969.1,3.13,38.05,-2060.05,3.13,38.55,-2153,3.13,39.05,-2247.95,3.13,39.55,-2344.9,3.13,40.05,-2443.85,3.13,40.55,-2544.8,3.13,41,-2647.75,3.13,41.45,-2752.7,3.13,41.9,-2859.65,3.13,42.35,-2968.6,3.13,42.8,-3079.55,3.13,43.25,-3192.5,3.13,43.7,-3307.45,3.13,44.15,-3424.4,3.13,44.6,-3543.35,3.13,45.05,-3664.3,3.13,45.5,-3787.25,3.13,45.95,-3912.2,3.13,46.4,-4039.15,3.13,46.85,-4168.1,3.13,47.3,-4299.05,3.13,47.75,-4432,3.13,48.2,-4566.95,3.13,48.65,-4703.9,3.13,49.1,-4842.85,3.13,49.55,-4983.8,3.13,50,-5126.75,3.13,50.45,-5271.7,3.13,50.9,-5418.65,3.13,51.35,-5567.6,3.13,51.8,-5718.55,3.13,52.25,-5871.5,3.13,52.7,-6026.45,3.13,53.15,-6183.4,3.13,53.6,-6342.35,3.13,54.05,-6503.3,3.13,54.5,-6666.25,3.13,54.95,-6831.2,3.13,55.4,-6998.15,3.13,55.85,-7167.1,3.13,56.3,-7338.05,3.13,56.75,-7511,3.13,57.2,-7685.95,3.13]},

以及此处的位置、比例和 alpha:

    mc89:{view:'cloudFade', depth:3, startFrame:488, endFrame:540, position:[1,1,0.95,1.2,0.95,1.2,0.95,1.2,1,1,0.95,1.2,0.95,1.2,0.95,1.2,0.95,1.2,0.95,1.2,0.95,1.2,0.95,1.2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], scale:[20.718994140625,15.5989990234375,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718994140625,15.5989990234375,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375], alpha:[0,0.25,0.5,0.75,1,0.875,0.75,0.625,0.5,0.375,0.25,0.125,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]}, 

它有点像 skrollr.js 遇到类固醇的 greensock。它来自出色的 http://flashvhtml.com 网站。无论如何,我想知道它是如何组合在一起的。

Flash v HTML 说这个文件是使用 Adobe Edge Animate 生成的(在他们的 "Findings" 部分)。当时,它以制作 "brute-force" 动画片而闻名。我不确定他们现在是否使用更编程的方法,但 GreenSock 是制作此类动画的更轻量级方法。

this page中的第三个视频显示了动画过程。它将导出与您链接到的相同样式的文件,充满 x、y、alpha 等值。