• 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/

     
  • 相关阅读:
    java学习--工具类学习之Arrays(1)
    509. 斐波那契数
    572. 另一个树的子树
    cmd中的标准文件重定向
    ng正则使用(持续更新)
    MySQL基准测试
    mysql_connect 弃用之后使用mysqli替换需要注意事项
    数据迁移到rds时候犯下的低级错误
    MySQL 架构与历史
    mysql中涉及到钱的字段如何设计
  • 原文地址:https://www.cnblogs.com/pingfan1990/p/4528603.html
Copyright © 2020-2023  润新知