stylie工具轻松搞定css3抛物线动画

自从CSS3引入了动画（transition和@keyframes，还有与之搭配的transform）之后，写动画也变的越来多越来越容易。

可是当我们遇到需要利用数学公式的复杂动画时，却一筹莫展，只能怪小时候数学没学好（可能是语文老师教的）。那么问题来了，但我拿到要实现这样的需求，该如何：

可能我们会去苦恼，加班熬夜的去补功课去解决，可是这样真的很费劲，那么，我们就来分析一下如何，快速解决

要想做出这样的动画，我们必先知道其运动的原理，不是吗，鉴于抛物线太多了，这里只对最简单的匀变速曲线运动做分享，看图：

好不容易找到了一张小图，是不是有点读高中物理课的感觉

运动原理可以分解为：水平方向匀速运动，垂直方向重力加速度运动

位移途径为： 1. （水平）s = vt 2.（垂直）h = gt*t/2

假如我们已起抛点为原点，就可以根据运行时间，计算出，物体x轴、y轴运行的距离，通过细时间间隔，利用css3属性tanslate3d（x，y，z）进行精细的位移，那么我们就能形成抛物线运动了，那么我们试验一下。

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抛物线</title>
    <style>
        body{background: #8fd5d5;}
 
        /******抛物线******/
        .ball{
            20px;
            height:20px;
            background:yellow;
            -webkit-border-radius:50%;
            -moz-border-radius:50%;
            border-radius:50%;
            cursor:pointer
        }
        /********水平移动距离600 速度 200m/s  重力加速度的运动速度**************/
        .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)}
            10%{-webkit-transform:translate3d(60px,0.45px,0)}
            20%{-webkit-transform:translate3d(120px,1.8px,0)}
            30%{-webkit-transform:translate3d(180px,4.05px,0)}
            40%{-webkit-transform:translate3d(240px,7.2px,0)}
            50%{-webkit-transform:translate3d(300px,11.25px,0)}
            60%{-webkit-transform:translate3d(360px,16.2px,0)}
            70%{-webkit-transform:translate3d(420px,22.05px,0)}
            80%{-webkit-transform:translate3d(480px,28.8px,0)}
            90%{-webkit-transform:translate3d(540px,36.45,0)}
            100%{-webkit-transform:translate3d(600px,45px,0)}
        }
        @-webkit-keyframes pao50{
            0%{-webkit-transform:translate3d(0px,0,0)}
            10%{-webkit-transform:translate3d(60px,2.25px,0)}
            20%{-webkit-transform:translate3d(120px,9px,0)}
            30%{-webkit-transform:translate3d(180px,20.25px,0)}
            40%{-webkit-transform:translate3d(240px,36px,0)}
            50%{-webkit-transform:translate3d(300px,56.25px,0)}
            60%{-webkit-transform:translate3d(360px,81px,0)}
            70%{-webkit-transform:translate3d(420px,110.25px,0)}
            80%{-webkit-transform:translate3d(480px,144px,0)}
            90%{-webkit-transform:translate3d(540px,182.25,0)}
            100%{-webkit-transform:translate3d(600px,225px,0)}
        }        
        @-webkit-keyframes pao100{
            0%{-webkit-transform:translate3d(0px,0,0)}
            10%{-webkit-transform:translate3d(60px,4.5px,0)}
            20%{-webkit-transform:translate3d(120px,18px,0)}
            30%{-webkit-transform:translate3d(180px,40.5px,0)}
            40%{-webkit-transform:translate3d(240px,72px,0)}
            50%{-webkit-transform:translate3d(300px,112.5px,0)}
            60%{-webkit-transform:translate3d(360px,162px,0)}
            70%{-webkit-transform:translate3d(420px,220.5px,0)}
            80%{-webkit-transform:translate3d(480px,288px,0)}
            90%{-webkit-transform:translate3d(540px,364.5,0)}
            100%{-webkit-transform:translate3d(600px,450px,0)}
        }    
 
        .margin{margin-top:450px}
    </style>
</head>
<body>
    <h2>抛物线运动曲线 水平移动距离600px 速度 200px/s  默认垂直方向为重力加速度</h2>
    <div class="tab">
        <span class="sg">垂直方向重力加速度</span>
        <span class="sg50">垂直方向50px/s</span>
        <span class="sg100">垂直方向100px/s</span>
    </div>
    <div class="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>
</html>

在演示效果中，我们发现，水平方向匀速运动一定，垂直方向的加速度越大时，所细分的做出的动画抛物线效果越不好，得出结论就是我们为了保持更好的抛物线效果，时间比例细分越小，移动的距离越精细，抛物线效果动画越好。可是，问题来了，为了做精细的抛物动画，给我们带来的问题，就是要花更多的时间去计算精细的值，可这非常需要时间……

为了更好的解决以上的这个问题，分享一款更好用的动画神器—Stylie 用户界面简洁大方，使用简单

页面打开以后很简单，蓝色的网格背景上面，两个绿色的十字中间连着一根黄色的线，上面有一个白色小球不断地从左边滑动到右边（还称不上滚动），下面有一个进度条，右边有一个操作面板。

Keyframes标签设置面板：

1.第一个0ms处表示起点相关信息，第二个2000ms处表示2000ms处断点的相关信息；

2.第一个0ms处表示起点相关信息，第二个2000ms处表示2000ms处断点的相关信息；

3.X和Y分别表示横坐标及纵坐标（其实你也可以用鼠标去拖绿色的十字…）；

4.S表示缩放倍率（默认是1）；

5.rX、rY、rZ分别表示物体沿X、Y、Z轴的旋转角度（具体哪个轴是哪个可以在上面填写数字自己尝试，出于便于观察的理由建议填写180。当然你也可以按住Shift键，拖，但是我觉得这样很不好控制…）；

6.linear表示线性的…这一栏是自定义缓动曲线（Easing curves）

Motion是自定义缓动曲线运动轨迹，可以在Keyframes选择里面添加你自定义的运动轨迹。

我觉得这个神器最牛逼的功能在于，缓动曲线功能所有的数值，都！可！以！定义缓动，让我们轻松完成抛物线运动动画。

神器地址：http://jeremyckahn.github.io/stylie/