Motion Porter

Design & Developed by Fangye Xu

-

This is a home-made design tool, used for getting the motion parameters.

The outputs is generated and written in two ways: Cubic-bezier for CSS3 moving and Progress-per-Frame for more generic motion.

Also, Motion Porter offers you 2 ways to check the motion effect: native CSS3 transition and Canvas Animation.

Still lots of work to do, but I'll keep improving it.

-

For any question, including bugs and usability problems, FEEL FREE to contact with me:

fangye1108@163.com

Params-Output

00, 0.5075, 1.0275, 1.5625, 2.1125, 2.68, 3.265, 3.8675, 4.4875, 5.13, 5.7925, 6.475, 7.185, 7.92, 8.68, 9.4675, 10.2875, 11.14, 12.025, 12.95, 13.9125, 14.9175, 15.9675, 17.065, 18.2125, 19.415, 20.675, 21.9975, 23.38, 24.825, 26.34, 27.92, 29.565, 31.2675, 33.0275, 34.8325, 36.6775, 38.545, 40.4225, 42.3, 44.16, 45.9975, 47.8, 49.56, 51.2725, 52.9375, 54.55, 56.1075, 57.615, 59.0725, 60.48, 61.84, 63.155, 64.4275, 65.66, 66.8525, 68.01, 69.1325, 70.2225, 71.28, 72.3075, 73.31, 74.285, 75.2375, 76.1625, 77.0675, 77.95, 78.8125, 79.6575, 80.4825, 81.29, 82.08, 82.855, 83.6125, 84.3575, 85.0875, 85.805, 86.51, 87.2025, 87.88, 88.5475, 89.205, 89.85, 90.4875, 91.1125, 91.7275, 92.335, 92.9325, 93.5225, 94.1025, 94.675, 95.2375, 95.795, 96.345, 96.8875, 97.4225, 97.9525, 98.4725, 98.9875, 99.495, 100,

Select motion type
Linear
Circular
Save the outputs
Save
Control Panel
Canvas Motion
CSS3 Motion

Cubic-bezier :

0.20 , 0.40 , 0.80 , 0.90

Progress per frame :

Click the "check effect" button, output motion params here
    Frames
    Progress