Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/okikio/postcss-spring-easing. PostCSS plugin to add that bounce and boogie that only springs can bring
easings linear postcss postcss-plugin spring spring-easing
Something went wrong. Try again.
24 kB · 591 lines
TypeScript
at commit 23712df9
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591
import { describe, expect, it } from 'vitest';import { interpolateColor } from "./utils/interpolate-color";import { toFixed, scale, limit } from "../src/utils";import { BatchSpringEasing, toAnimationFrames, SpringFrame, SpringOutFrame, SpringInOutFrame, SpringOutInFrame, registerEasingFunction, registerEasingFunctions } from "../src/index";
describe("BatchSpringEasing", () => { it('With 2 simple values [0, 25]', () => { expect(BatchSpringEasing([0, 25])) .toEqual([ [ 0, 1.43, 4.969, 9.598, 14.488, 19.032, 22.845, 25.737, 27.674, 28.737, 29.075, 28.871, 28.311, 27.564, 26.766, 26.019, 25.388, 24.906, 24.58, 24.398, 24.336, 24.365, 24.453, 24.573, 24.704, 24.826, 24.931, 25.011, 25.066, 25.097, 25.108, 25.104, 25.09, 25.071, 25.05, 25.03, 25.012, 24.999 ], 1333.3333333333333 ]);
})
it('Easing using Array Frame Format (only the frame function is specified) [SpringOutFrame]', () => { let [frames, duration] = BatchSpringEasing([0, 25], [SpringOutFrame]); expect([frames, duration]) .toEqual([ [ 0.001, -0.012, -0.03, -0.05, -0.071, -0.09, -0.104, -0.108, -0.097, -0.066, -0.011, 0.069, 0.174, 0.296, 0.427, 0.547, 0.635, 0.664, 0.602, 0.42, 0.094, -0.388, -1.019, -1.766, -2.564, -3.311, -3.871, -4.075, -3.737, -2.674, -0.737, 2.155, 5.968, 10.512, 15.402, 20.031, 23.57, 25 ], 1333.3333333333333 ]); })
// Even though I'd prefer if people didn't only set some of the spring parameters // I predict people will, so, `spring-easing` will warn about doing things like this it('Easing using string format (partially filled spring parameters) `spring-out(1, 100)`', () => { let [frames, duration] = BatchSpringEasing([0, 25], `spring-out(1, 100)`); expect([frames, duration]) .toEqual([ [ 0.001, -0.012, -0.03, -0.05, -0.071, -0.09, -0.104, -0.108, -0.097, -0.066, -0.011, 0.069, 0.174, 0.296, 0.427, 0.547, 0.635, 0.664, 0.602, 0.42, 0.094, -0.388, -1.019, -1.766, -2.564, -3.311, -3.871, -4.075, -3.737, -2.674, -0.737, 2.155, 5.968, 10.512, 15.402, 20.031, 23.57, 25 ], 1333.3333333333333 ]); })
// Even though I'd prefer if people didn't only set some of the spring parameters // I predict people will, so, `spring-easing` will warn about doing things like this it('Easing using string format (completely filled spring parameters) `spring-out(1, 100, 10, 0)`', () => { let [frames, duration] = BatchSpringEasing([0, 25], `spring-out(1, 100, 10, 0)`); expect([frames, duration]) .toEqual([ [ 0.001, -0.012, -0.03, -0.05, -0.071, -0.09, -0.104, -0.108, -0.097, -0.066, -0.011, 0.069, 0.174, 0.296, 0.427, 0.547, 0.635, 0.664, 0.602, 0.42, 0.094, -0.388, -1.019, -1.766, -2.564, -3.311, -3.871, -4.075, -3.737, -2.674, -0.737, 2.155, 5.968, 10.512, 15.402, 20.031, 23.57, 25 ], 1333.3333333333333 ]); })
it('Easing using Array Frame format (partially & completely filled spring parameters)', () => { let solution = [ [ 0, 2.484, 7.244, 11.422, 13.837, 14.537, 14.156, 13.383, 12.694, 12.29, 12.168, 12.226, 12.352, 12.465, 12.533, 12.554, 12.545, 12.525, 12.506, 12.494, 12.475, 12.455, 12.446, 12.467, 12.535, 12.648, 12.774, 12.832, 12.71, 12.306, 11.617, 10.844, 10.463, 11.163, 13.578, 17.756, 22.516, 25 ], 1333.3333333333333 ];
// Partial let partial = BatchSpringEasing([0, 25], [SpringInOutFrame, 1, 100]); expect(partial) .toEqual(solution);
// Complete let complete = BatchSpringEasing([0, 25], [SpringInOutFrame, 1, 100, 10, 0]); expect(complete) .toEqual(solution); })
it('Easing using both formats (maximums & minimums spring parameters)', () => { let solutionMin = [ [ 0, 2.328, 6.883, 11.032, 13.595, 14.511, 14.298, 13.592, 12.875, 12.392, 12.186, 12.188, 12.293, 12.415, 12.504, 12.547, 12.553, 12.538, 12.518, 12.482, 12.462, 12.447, 12.453, 12.496, 12.585, 12.707, 12.812, 12.814, 12.608, 12.125, 11.408, 10.702, 10.489, 11.405, 13.968, 18.117, 22.672, 25 ], 12833.333333333321 ];
let solutionMax = [ [ 0, 6567.764, 1650.657, -1034.923, -612.686, 89.192, 170.504, 34.883, -17.013, 0.165, 15.978, 16.108, 12.627, 11.73, 12.28, 12.616, 12.578, 12.494, 12.481, 12.519, 12.506, 12.422, 12.384, 12.72, 13.27, 12.373, 8.892, 9.022, 24.835, 42.013, -9.883, -145.504, -64.192, 637.686, 1059.923, -1625.657, -6542.764, 25 ], 27833.333333333394 ];
// Minimums for Spring Parameter let minimum = BatchSpringEasing([0, 25], [SpringInOutFrame, -5000, -5000, -5000, -5000]); expect(minimum) .toEqual(solutionMin);
// Maximums for Spring Parameter let maximum = BatchSpringEasing([0, 25], [SpringInOutFrame, 5000, 5000, 5000, 5000]); expect(maximum) .toEqual(solutionMax);
// Minimums for Spring Parameter (string format) let minimumStr = BatchSpringEasing([0, 25], `spring-in-out(-5000, -5000, -5000, -5000)`); expect(minimumStr) .toEqual(solutionMin);
// Maximums for Spring Parameter (string format) let maximumStr = BatchSpringEasing([0, 25], `spring-in-out(5000, 5000, 5000, 5000)`); expect(maximumStr) .toEqual(solutionMax); })
it('Other easing options', () => { let solutionMin = [ [ 0, 0.0163147, 0.0639972, 0.1413519, 0.2466917, 0.378342, 0.5346443, 0.7139596, 0.9146719, 1.1351909, 1.3739551, 1.629434, 1.9001311, 2.1845854, 2.4813739, 2.7891129, 3.10646, 3.4321154, 3.7648228, 4.1033709, 4.446594, 4.7933729, 5.1426352, 5.4933559, 5.8445577, 6.1953109, 6.5447337, 6.891992, 7.2362989, 7.5769147, 7.9131463, 8.2443467, 8.5699141, 8.8892915, 9.201966, 9.5074673, 9.8053675, 10.0952797, 10.3768568, 10.6497907, 10.9138112, 11.1686843, 11.4142116, 11.6502287, 11.8766037, 12.0932365, 12.300057, 12.4970239, 12.6841233, 12.8613677, 13.0287941, 13.1864631, 13.3344575, 13.4728805, 13.6018554, 13.7215231, 13.8320419, 13.9335854, 14.0263418, 14.1105126, 14.1863111, 14.2539618, 14.3136986, 14.3657644, 14.4104094, 14.4478906, 14.4784706, 14.5024166, 14.5199992, 14.5314924, 14.5371717, 14.5373139, 14.5321964, 14.522096, 14.5072886, 14.4880483, 14.464647, 14.4373536, 14.4064337, 14.3721488, 14.3347559, 14.2945074, 14.2516501, 14.2064253, 14.1590684, 14.1098083, 14.0588674, 14.0064614, 13.9527988, 13.898081, 13.8425019, 13.786248, 13.7294983, 13.6724238, 13.615188, 13.5579466, 13.5008474, 13.4440305, 13.3876282,
13.3317652, 13.2765585, 13.2221174, 13.168544, 13.1159329, 13.0643715, 13.01394, 12.964712, 12.9167539, 12.8701257, 12.824881, 12.781067, 12.7387251, 12.6978905, 12.6585929, 12.6208567, 12.5847009, 12.5501393, 12.5171813, 12.4858313, 12.4560896, 12.4279523, 12.4014114, 12.3764553, 12.3530689, 12.3312339, 12.3109287, 12.292129, 12.2748077, 12.2589355, 12.2444805, 12.2314091, 12.2196854, 12.2092723, 12.2001308, 12.1922208, 12.1855008, 12.1799286, 12.175461, 12.1720541, 12.1696635, 12.1682445, 12.1677519, 12.1681407, 12.1693656, 12.1713815, 12.1741436, 12.1776073, 12.1817286, 12.1864639, 12.1917701, 12.1976049, 12.2039269, 12.2106952, 12.2178702, 12.2254127, 12.2332851, 12.2414505, 12.249873, 12.2585182, 12.2673525, 12.2763438, 12.2854609, 12.294674, 12.3039546, 12.3132754, 12.3226102, 12.3319344, 12.3412245, 12.3504581, 12.3596144, 12.3686735, 12.3776171, 12.3864278, 12.3950896, 12.4035876, 12.4119081, 12.4200385, 12.4279676, 12.4356847, 12.4431809, 12.4504476, 12.4574778, 12.4642652, 12.4708044, 12.4770911, 12.4831216, 12.4888933, 12.4944043, 12.4996534, 12.5046402, 12.509365, 12.5138288, 12.5180332, 12.5219802, 12.5256728, 12.529114, 12.5323076, 12.5352578, 12.5379692,
12.5404467, 12.5426958, 12.544722, 12.5465313, 12.54813, 12.5495244, 12.5507212, 12.5517273, 12.5525495, 12.553195, 12.5536711, 12.5539848, 12.5541437, 12.554155, 12.5540261, 12.5537644, 12.5533772, 12.5528718, 12.5522554, 12.5515352, 12.5507182, 12.5498114, 12.5488217, 12.5477557, 12.54662, 12.5454211, 12.5441651, 12.5428583, 12.5415065, 12.5401154, 12.5386907, 12.5372376, 12.5357614, 12.534267, 12.5327592, 12.5312425, 12.5297213, 12.5281997, 12.5266817, 12.5251711, 12.5236712, 12.5221856, 12.5207172, 12.519269, 12.5178438, 12.516444, 12.515072, 12.5137299, 12.5124197, 12.5111432, 12.5099019, 12.4900981, 12.4888568, 12.4875803, 12.4862701, 12.484928, 12.483556, 12.4821562, 12.480731, 12.4792828, 12.4778144, 12.4763288, 12.4748289, 12.4733183, 12.4718003, 12.4702787, 12.4687575, 12.4672408, 12.465733, 12.4642386, 12.4627624, 12.4613093, 12.4598846, 12.4584935, 12.4571417, 12.4558349, 12.4545789, 12.45338, 12.4522443, 12.4511783, 12.4501886, 12.4492818, 12.4484648, 12.4477446, 12.4471282, 12.4466228, 12.4462356, 12.4459739, 12.445845, 12.4458563, 12.4460152, 12.4463289, 12.446805, 12.4474505, 12.4482727, 12.4492788, 12.4504756, 12.45187, 12.4534687,
12.455278, 12.4573042, 12.4595533, 12.4620308, 12.4647422, 12.4676924, 12.470886, 12.4743272, 12.4780198, 12.4819668, 12.4861712, 12.490635, 12.4953598, 12.5003466, 12.5055957, 12.5111067, 12.5168784, 12.5229089, 12.5291956, 12.5357348, 12.5425222, 12.5495524, 12.5568191, 12.5643153, 12.5720324, 12.5799615, 12.5880919, 12.5964124, 12.6049104, 12.6135722, 12.6223829, 12.6313265, 12.6403856, 12.6495419, 12.6587755, 12.6680656, 12.6773898, 12.6867246, 12.6960454, 12.705326, 12.7145391, 12.7236562, 12.7326475, 12.7414818, 12.750127, 12.7585495, 12.7667149, 12.7745873, 12.7821298, 12.7893048, 12.7960731, 12.8023951, 12.8082299, 12.8135361, 12.8182714, 12.8223927, 12.8258564, 12.8286185, 12.8306344, 12.8318593, 12.8322481, 12.8317555, 12.8303365, 12.8279459, 12.824539, 12.8200714, 12.8144992, 12.8077792, 12.7998692, 12.7907277, 12.7803146, 12.7685909, 12.7555195, 12.7410645, 12.7251923, 12.707871, 12.6890713, 12.6687661, 12.6469311, 12.6235447, 12.5985886, 12.5720477, 12.5439104, 12.5141687, 12.4828187, 12.4498607, 12.4152991, 12.3791433, 12.3414071, 12.3021095, 12.2612749, 12.218933, 12.175119, 12.1298743, 12.0832461, 12.035288, 11.98606, 11.9356285,
11.8840671, 11.831456, 11.7778826, 11.7234415, 11.6682348, 11.6123718, 11.5559695, 11.4991526, 11.4420534, 11.384812, 11.3275762, 11.2705017, 11.213752, 11.1574981, 11.101919, 11.0472012, 10.9935386, 10.9411326, 10.8901917, 10.8409316, 10.7935747, 10.7483499, 10.7054926, 10.6652441, 10.6278512, 10.5935663, 10.5626464, 10.535353, 10.5119517, 10.4927114, 10.477904, 10.4678036, 10.4626861, 10.4628283, 10.4685076, 10.4800008, 10.4975834, 10.5215294, 10.5521094, 10.5895906, 10.6342356, 10.6863014, 10.7460382, 10.8136889, 10.8894874, 10.9736582, 11.0664146, 11.1679581, 11.2784769, 11.3981446, 11.5271195, 11.6655425, 11.8135369, 11.9712059, 12.1386323, 12.3158767, 12.5029761, 12.699943, 12.9067635, 13.1233963, 13.3497713, 13.5857884, 13.8313157, 14.0861888, 14.3502093, 14.6231432, 14.9047203, 15.1946325, 15.4925327, 15.798034, 16.1107085, 16.4300859, 16.7556533, 17.0868537, 17.4230853, 17.7637011, 18.108008, 18.4552663, 18.8046891, 19.1554423, 19.5066441, 19.8573648, 20.2066271, 20.553406, 20.8966291, 21.2351772, 21.5678846, 21.89354, 22.2108871, 22.5186261, 22.8154146, 23.0998689, 23.370566, 23.6260449, 23.8648091, 24.0853281, 24.2860404, 24.4653557, 24.621658, 24.7533083, 24.8586481, 24.9360028, 24.9836853, 25 ], 12833.333333333321 ];
let solutionMax = [ [ 0, 6815.12, 4286.08, 510.54, -1047.09, -812.45, -165.05, 165.94, 165.81, 59.46, -7.25, -14.98, 1.6, 14.48, 17.24, 14.84, 12.45, 11.71, 12.02, 12.45, 12.62, 12.59, 12.52, 12.48, 12.48, 12.52, 12.52, 12.48, 12.41, 12.38, 12.55, 12.98, 13.29, 12.55, 10.16, 7.76, 10.52, 23.4, 39.98, 32.25, -34.46, -140.81, -140.94, 190.05, 837.45, 1072.09, -485.54, -4261.08, -6790.12, 25 ], 27833.333333333394 ];
// Minimums for Spring Parameter let minimum = BatchSpringEasing([0, 25], { easing: [SpringInOutFrame, -5000, -5000, -5000, -5000], numPoints: 500, decimal: 7 }); expect(minimum) .toEqual(solutionMin);
// Maximums for Spring Parameter let maximum = BatchSpringEasing([0, 25], { easing: `spring-in-out(5000, 5000, 5000, 5000)`, numPoints: 50, decimal: 2 }); expect(maximum) .toEqual(solutionMax); })
it('All frames function', () => { let easeIn = BatchSpringEasing([0, 25], { easing: [SpringFrame, 1, 100, 10, 0], numPoints: 50, decimal: 2 }); expect(easeIn) .toEqual([ [ 0, 0.84, 3.04, 6.13, 9.7, 13.4, 16.97, 20.21, 22.98, 25.22, 26.92, 28.09, 28.78, 29.06, 29.01, 28.72, 28.26, 27.69, 27.09, 26.5, 25.95, 25.47, 25.07, 24.77, 24.55, 24.41, 24.35, 24.34, 24.37, 24.44, 24.53, 24.63, 24.72, 24.82, 24.9, 24.97, 25.02, 25.06, 25.09, 25.1, 25.11, 25.1, 25.1, 25.08, 25.07, 25.05, 25.03, 25.02, 25.01, 25 ], 1333.3333333333333 ]);
let easeOut = BatchSpringEasing([0, 25], { easing: [SpringOutFrame, 1, 100, 10, 0], numPoints: 50, decimal: 2 }); expect(easeOut) .toEqual([ [ 0, -0.01, -0.02, -0.03, -0.05, -0.07, -0.08, -0.1, -0.1, -0.11, -0.1, -0.09, -0.06, -0.02, 0.03, 0.1, 0.18, 0.28, 0.37, 0.47, 0.56, 0.63, 0.66, 0.65, 0.59, 0.45, 0.23, -0.07, -0.47, -0.95, -1.5, -2.09, -2.69, -3.26, -3.72, -4.01, -4.06, -3.78, -3.09, -1.92, -0.22, 2.02, 4.79, 8.03, 11.6, 15.3, 18.87, 21.96, 24.16, 25 ], 1333.3333333333333 ]);
let easeInOut = BatchSpringEasing([0, 25], { easing: [SpringInOutFrame, 1, 100, 10, 0], numPoints: 50, decimal: 2 }); expect(easeInOut) .toEqual([ [ 0, 1.52, 4.85, 8.49, 11.49, 13.46, 14.39, 14.51, 14.13, 13.55, 12.97, 12.54, 12.28, 12.17, 12.19, 12.26, 12.36, 12.45, 12.51, 12.54, 12.55, 12.55, 12.53, 12.52, 12.5, 12.5, 12.48, 12.47, 12.45, 12.45, 12.46, 12.49, 12.55, 12.64, 12.74, 12.81, 12.83, 12.72, 12.46, 12.03, 11.45, 10.87, 10.49, 10.61, 11.54, 13.51, 16.51, 20.15, 23.48, 25 ], 1333.3333333333333 ]);
let easeOutIn = BatchSpringEasing([0, 25], { easing: [SpringOutInFrame, 1, 100, 10, 0], numPoints: 50, decimal: 2 }); expect(easeOutIn) .toEqual([ [ 0, -0.01, -0.03, -0.04, -0.05, -0.05, -0.03, 0.02, 0.09, 0.19, 0.28, 0.33, 0.29, 0.12, -0.23, -0.75, -1.35, -1.86, -2.03, -1.54, -0.11, 2.4, 5.8, 9.44, 12.08, 12.92, 15.56, 19.2, 22.6, 25.11, 26.54, 27.03, 26.86, 26.35, 25.75, 25.23, 24.88, 24.71, 24.67, 24.72, 24.81, 24.91, 24.98, 25.03, 25.05, 25.05, 25.04, 25.03, 25.01, 25 ], 1333.3333333333333 ]); })
it('String interpolation & Custom interpolation functions', () => { // string interpolation let [keyframes] = BatchSpringEasing(["0turn", 5, "50deg", "700", 0], { easing: "spring", numPoints: 100, decimal: 2 }); expect(keyframes.every(str => /turn$/.test(str as string))).toEqual(true)
let [keyframes2] = BatchSpringEasing(["red", "blue", "#4f4", "rgb(0, 0, 0)"], { // Enforce a linear easing frame function // Not really necessary but it show what you can do if you really need other kinds of easings easing: [(t) => t], numPoints: 8, decimal: 2 }, toAnimationFrames(interpolateColor)); expect(keyframes2) .toEqual([ 'rgba(255,0,0,1)', 'rgba(146,0,109,1)', 'rgba(36,0,219,1)', 'rgba(19,73,202,1)', 'rgba(49,182,121,1)', 'rgba(58,219,58,1)', 'rgba(29,109,29,1)', 'rgba(0,0,0,1)' ]); })
it('Instantaneous interpolation function', () => { function interpolateNumber(t: number, values: number[], decimal = 3) { // nth index const n = values.length - 1;
// The current index given t const i = limit(Math.floor(t * n), 0, n - 1);
const start = values[i]; const end = values[i + 1]; const progress = (t - i / n) * n;
return toFixed(scale(progress, start, end), decimal); }
function interpolatePixels(t: number, values: number[], decimal = 3) { const result = interpolateNumber(t, values, decimal); return `${result}px`; }
let [keyframes] = BatchSpringEasing( [0, 250], { easing: "spring", numPoints: 100, decimal: 2 }, toAnimationFrames(interpolatePixels) );
expect(keyframes).toEqual([ '0px', '2.17px', '8.26px', '17.68px', '29.85px', '44.22px', '60.26px', '77.5px', '95.49px', '113.83px', '132.16px', '150.19px', '167.63px', '184.27px', '199.93px', '214.46px', '227.77px', '239.77px', '250.44px', '259.75px', '267.72px', '274.39px', '279.81px', '284.04px', '287.16px', '289.25px', '290.42px', '290.76px', '290.36px', '289.33px', '287.76px', '285.75px', '283.39px', '280.76px', '277.94px', '275px', '272.01px', '269.02px', '266.08px', '263.25px', '260.54px', '258px', '255.65px', '253.49px', '251.55px', '249.82px', '248.32px', '247.03px', '245.96px', '245.09px', '244.41px', '243.91px', '243.58px', '243.4px', '243.36px', '243.43px', '243.6px', '243.86px', '244.2px', '244.58px', '245.01px', '245.48px', '245.96px', '246.44px', '246.93px', '247.41px', '247.87px', '248.31px', '248.72px', '249.1px', '249.45px', '249.77px', '250.05px', '250.29px', '250.5px', '250.67px', '250.81px', '250.92px', '251px', '251.05px', '251.08px', '251.08px', '251.07px', '251.04px', '251px', '250.94px', '250.88px', '250.81px', '250.73px', '250.65px', '250.57px', '250.5px', '250.42px', '250.34px', '250.27px', '250.2px', '250.14px', '250.09px', '250.03px', '249.99px' ]) })
it('Register custom easing functions', () => { function interpolateNumber(t: number, values: number[], decimal = 3) { // nth index const n = values.length - 1;
// The current index given t const i = limit(Math.floor(t * n), 0, n - 1);
const start = values[i]; const end = values[i + 1]; const progress = (t - i / n) * n;
return toFixed(scale(progress, start, end), decimal); }
function interpolatePixels(t: number, values: number[], decimal = 3) { const result = interpolateNumber(t, values, decimal); return `${result}px`; }
registerEasingFunction("linear", (t) => t); registerEasingFunctions({ quad: (t) => Math.pow(t, 2), cubic: (t) => Math.pow(t, 3), });
let [keyframes] = BatchSpringEasing( [0, 250], { easing: "linear", numPoints: 100, decimal: 2 }, toAnimationFrames(interpolatePixels) );
expect(keyframes).toEqual([ '0px', '2.53px', '5.05px', '7.58px', '10.1px', '12.63px', '15.15px', '17.68px', '20.2px', '22.73px', '25.25px', '27.78px', '30.3px', '32.83px', '35.35px', '37.88px', '40.4px', '42.93px', '45.45px', '47.98px', '50.51px', '53.03px', '55.56px', '58.08px', '60.61px', '63.13px', '65.66px', '68.18px', '70.71px', '73.23px', '75.76px', '78.28px', '80.81px', '83.33px', '85.86px', '88.38px', '90.91px', '93.43px', '95.96px', '98.48px', '101.01px', '103.54px', '106.06px', '108.59px', '111.11px', '113.64px', '116.16px', '118.69px', '121.21px', '123.74px', '126.26px', '128.79px', '131.31px', '133.84px', '136.36px', '138.89px', '141.41px', '143.94px', '146.46px', '148.99px', '151.52px', '154.04px', '156.57px', '159.09px', '161.62px', '164.14px', '166.67px', '169.19px', '171.72px', '174.24px', '176.77px', '179.29px', '181.82px', '184.34px', '186.87px', '189.39px', '191.92px', '194.44px', '196.97px', '199.49px', '202.02px', '204.55px', '207.07px', '209.6px', '212.12px', '214.65px', '217.17px', '219.7px', '222.22px', '224.75px', '227.27px', '229.8px', '232.32px', '234.85px', '237.37px', '239.9px', '242.42px', '244.95px', '247.47px', '250px' ])
let [keyframes2] = BatchSpringEasing( [0, 250], { easing: "quad", numPoints: 100, decimal: 2 }, toAnimationFrames(interpolatePixels) ); expect(keyframes2).toEqual([ '0px', '0.03px', '0.1px', '0.23px', '0.41px', '0.64px', '0.92px', '1.25px', '1.63px', '2.07px', '2.55px', '3.09px', '3.67px', '4.31px', '5px', '5.74px', '6.53px', '7.37px', '8.26px', '9.21px', '10.2px', '11.25px', '12.35px', '13.49px', '14.69px', '15.94px', '17.24px', '18.6px', '20px', '21.45px', '22.96px', '24.51px', '26.12px', '27.78px', '29.49px', '31.25px', '33.06px', '34.92px', '36.83px', '38.8px', '40.81px', '42.88px', '45px', '47.16px', '49.38px', '51.65px', '53.97px', '56.35px', '58.77px', '61.24px', '63.77px', '66.35px', '68.97px', '71.65px', '74.38px', '77.16px', '79.99px', '82.87px', '85.81px', '88.79px', '91.83px', '94.91px', '98.05px', '101.24px', '104.48px', '107.77px', '111.11px', '114.5px', '117.95px', '121.44px', '124.99px', '128.58px', '132.23px', '135.93px', '139.68px', '143.48px', '147.33px', '151.23px', '155.19px', '159.19px', '163.25px', '167.36px', '171.51px', '175.72px', '179.98px', '184.29px', '188.65px', '193.07px', '197.53px', '202.05px', '206.61px', '211.23px', '215.9px', '220.62px', '225.39px', '230.21px', '235.08px', '240px', '244.98px', '250px' ])
let [keyframes3] = BatchSpringEasing( [0, 250], { easing: "quad", numPoints: 100, decimal: 2 }, toAnimationFrames(interpolatePixels) ); expect(keyframes3).toEqual([ '0px', '0.03px', '0.1px', '0.23px', '0.41px', '0.64px', '0.92px', '1.25px', '1.63px', '2.07px', '2.55px', '3.09px', '3.67px', '4.31px', '5px', '5.74px', '6.53px', '7.37px', '8.26px', '9.21px', '10.2px', '11.25px', '12.35px', '13.49px', '14.69px', '15.94px', '17.24px', '18.6px', '20px', '21.45px', '22.96px', '24.51px', '26.12px', '27.78px', '29.49px', '31.25px', '33.06px', '34.92px', '36.83px', '38.8px', '40.81px', '42.88px', '45px', '47.16px', '49.38px', '51.65px', '53.97px', '56.35px', '58.77px', '61.24px', '63.77px', '66.35px', '68.97px', '71.65px', '74.38px', '77.16px', '79.99px', '82.87px', '85.81px', '88.79px', '91.83px', '94.91px', '98.05px', '101.24px', '104.48px', '107.77px', '111.11px', '114.5px', '117.95px', '121.44px', '124.99px', '128.58px', '132.23px', '135.93px', '139.68px', '143.48px', '147.33px', '151.23px', '155.19px', '159.19px', '163.25px', '167.36px', '171.51px', '175.72px', '179.98px', '184.29px', '188.65px', '193.07px', '197.53px', '202.05px', '206.61px', '211.23px', '215.9px', '220.62px', '225.39px', '230.21px', '235.08px', '240px', '244.98px', '250px' ]) })})