Stylie tool for easy CSS3 parabolic animation

Since CSS3 introduced animations (transition and @keyframes, and transform with them), writing animations has become more and more easy.

But when we meet the need to use the mathematical formula of complex animation, but helpless, can only blame childhood mathematics did not learn (may be taught by Chinese teachers). So here's the problem, but I got what I need to achieve this:

Perhaps we will go to distress, overtime to repair the homework to solve, but this is really laborious, then, we will analyze how to quickly solve

To make such an animation, we must first know the principle of its motion, is not it, given the parabolic line too much, here only the simplest uniform variable speed curve to share, look at the picture:

Finally found a small picture, is not a little reading of high school physics class feeling

The motion principle can be decomposed into: horizontal direction uniform motion, the vertical direction of acceleration motion

The displacement path is: 1. (horizontal) s = vt 2. (vertical) H = gT*T/2

If we have a throw point as the origin, we can calculate, according to the running time, the object x axis, the y axis of operation distance, through the fine time interval, using the CSS3 attribute Tanslate3d (x, Y, z) for fine displacement, then we can form parabolic motion, then we experiment.

code block

<! DOCTYPE html>"en">"UTF-8"> <title> Parabolic </title> <style>body{background: #8fd5d5;} /** * * * PARABOLIC * **/. ball{width:20px;            height:20px;            Background:yellow; -webkit-border-radius: -%; -moz-border-radius: -%; Border-radius: -%; Cursor:pointer}/******** horizontal movement distance 600 speed 200m/s acceleration velocity **************/. tab span{display:inline-Block;            padding:10px;            Color: #fff;        border:2px solid #59AEAE; }. animg{-webkit-Animation:pao 3s linear both;} . animg50{-webkit-animation:pao50 3s linear both;} . animg100{-webkit-animation:pao100 3s linear both;} @-webkit-keyframes pao{0%{-webkit-transform:translate3d (0px,0,0)}            Ten%{-webkit-transform:translate3d (60px,0.45px,0)}             -%{-webkit-transform:translate3d (120px,1.8px,0)}             -%{-webkit-transform:translate3d (180px,4.05px,0)}             +%{-webkit-transform:translate3d (240px,7.2px,0)}             -%{-webkit-transform:translate3d (300px, One.25px,0)}             -%{-webkit-transform:translate3d (360px, -.2px,0)}             -%{-webkit-transform:translate3d (420px, A.05px,0)}             the%{-webkit-transform:translate3d (480px, -.8px,0)}             -%{-webkit-transform:translate3d (540px,36.45,0)}             -%{-webkit-transform:translate3d (600px,45px,0)}        }        @-webkit-keyframes pao50{0%{-webkit-transform:translate3d (0px,0,0)}            Ten%{-webkit-transform:translate3d (60px,2.25px,0)}             -%{-webkit-transform:translate3d (120PX,9PX,0)}             -%{-webkit-transform:translate3d (180px, -.25px,0)}             +%{-webkit-transform:translate3d (240PX,36PX,0)}             -%{-webkit-transform:translate3d (300px, About.25px,0)}             -%{-webkit-transform:translate3d (360px,81px,0)}             -%{-webkit-transform:translate3d (420px, the.25px,0)}             the%{-webkit-transform:translate3d (480PX,144PX,0)}             -%{-webkit-transform:translate3d (540px,182.25,0)}             -%{-webkit-transform:translate3d (600px,225px,0)}        }                @-webkit-keyframes pao100{0%{-webkit-transform:translate3d (0px,0,0)}            Ten%{-webkit-transform:translate3d (60px,4.5px,0)}             -%{-webkit-transform:translate3d (120px,18px,0)}             -%{-webkit-transform:translate3d (180px, +.5px,0)}             +%{-webkit-transform:translate3d (240px,72px,0)}             -%{-webkit-transform:translate3d (300px, the.5px,0)}             -%{-webkit-transform:translate3d (360px,162px,0)}             -%{-webkit-transform:translate3d (420px, -.5px,0)}             the%{-webkit-transform:translate3d (480px,288px,0)}             -%{-webkit-transform:translate3d (540px,364.5,0)}             -%{-webkit-transform:translate3d (600px,450px,0)}}. Margin{margin-top:450px}</style>class="Tab"> <spanclass="SG"> Vertical acceleration of gravity </span> <spanclass="SG50"> Vertical Direction 50px/s</span> <spanclass="sg100"> Vertical Direction 100px/s</span> </div> <divclass="Ball SG"></div> <script type="Text/javascript">Document.queryselector (". SG"). OnClick =function () {Document.queryselector (". Ball"). ClassName ="Ball Animg"} document.queryselector (". SG50"). OnClick =function () {Document.queryselector (". Ball"). ClassName ="Ball Animg50"} document.queryselector (". sg100"). OnClick =function () {Document.queryselector (". Ball"). ClassName ="Ball animg100"}    </script></body>
In the demonstration effect, we found that the horizontal direction uniform motion certain, the vertical acceleration is larger, the subdivision of the animation parabolic effect is not good, the conclusion is that we in order to maintain a better parabolic effect, the smaller the time scale subdivision, the more precise the moving distance, the better the parabolic effect animation. However, the problem, in order to do the fine parabolic animation, the problem is that we have to spend more time to calculate the fine value, but it takes time ...
In order to better solve the above problem, share a better use of animation artifact-stylie user interface simple and simple, easy to use
After the page opened very simple, blue grid background above, two green crosses in the middle of a yellow line, there is a white ball constantly sliding from the left to the right (also called not scrolling), there is a progress bar, the right side has an operator panel.
KeyFrames Label Settings panel:
1. The first 0ms represents the starting point information, the second 2000ms at the 2000ms breakpoint at the relevant information;
2. The first 0ms represents the starting point information, the second 2000ms at the 2000ms breakpoint at the relevant information;
3.X and y represent the horizontal and vertical axis (in fact, you can also use the mouse to drag the Green cross ...) ）；
4.S indicates the magnification (default is 1);
5.rX, RY, RZ respectively indicate the angle of rotation of the object along the X, Y, Z axis (specifically which axis is which can be filled in the number of its own attempt, for easy observation of the reasons suggested to fill 180. Of course you can also hold down the SHIFT key, drag, but I think this is very difficult to control ... ）；
6.linear = linear ... This column is a custom easing curve (easing curves)
Motion is a custom easing curve motion trajectory that allows you to add your own custom motion trajectory to the keyframes selection.
I think the most powerful feature of this artifact is that the ease curve function all the values, all! Can To! Define easing to make it easy to complete parabolic motion animations.
Artifact Address: http://jeremyckahn.github.io/stylie/
Stylie tool for easy CSS3 parabolic animation