自从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{

            width:20px;

            height:20px;

            background:yellow;

            -webkit-border-radius:%;

            -moz-border-radius:%;

            border-radius:%;

            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{

            %{-webkit-transform:translate3d(0px,,)}

            %{-webkit-transform:translate3d(60px,.45px,)}

            %{-webkit-transform:translate3d(120px,.8px,)}

            %{-webkit-transform:translate3d(180px,.05px,)}

            %{-webkit-transform:translate3d(240px,.2px,)}

            %{-webkit-transform:translate3d(300px,.25px,)}

            %{-webkit-transform:translate3d(360px,.2px,)}

            %{-webkit-transform:translate3d(420px,.05px,)}

            %{-webkit-transform:translate3d(480px,.8px,)}

            %{-webkit-transform:translate3d(540px,36.45,)}

            %{-webkit-transform:translate3d(600px,45px,)}

        }

        @-webkit-keyframes pao50{

            %{-webkit-transform:translate3d(0px,,)}

            %{-webkit-transform:translate3d(60px,.25px,)}

            %{-webkit-transform:translate3d(120px,9px,)}

            %{-webkit-transform:translate3d(180px,.25px,)}

            %{-webkit-transform:translate3d(240px,36px,)}

            %{-webkit-transform:translate3d(300px,.25px,)}

            %{-webkit-transform:translate3d(360px,81px,)}

            %{-webkit-transform:translate3d(420px,.25px,)}

            %{-webkit-transform:translate3d(480px,144px,)}

            %{-webkit-transform:translate3d(540px,182.25,)}

            %{-webkit-transform:translate3d(600px,225px,)}

        }

        @-webkit-keyframes pao100{

            %{-webkit-transform:translate3d(0px,,)}

            %{-webkit-transform:translate3d(60px,.5px,)}

            %{-webkit-transform:translate3d(120px,18px,)}

            %{-webkit-transform:translate3d(180px,.5px,)}

            %{-webkit-transform:translate3d(240px,72px,)}

            %{-webkit-transform:translate3d(300px,.5px,)}

            %{-webkit-transform:translate3d(360px,162px,)}

            %{-webkit-transform:translate3d(420px,.5px,)}

            %{-webkit-transform:translate3d(480px,288px,)}

            %{-webkit-transform:translate3d(540px,364.5,)}

            %{-webkit-transform:translate3d(600px,450px,)}

        }    

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

 

stylie工具轻松搞定css3抛物线动画的更多相关文章

  1. 【转】轻松搞定FTP之FlashFxp全攻略

    转载网址:http://www.newhua.com/2008/0603/39163.shtml 轻松搞定FTP之FlashFxp全攻略 导读: FlashFXP是一款功能强大的FXP/FTP软件,融 ...

  2. Webcast / 技术小视频制作方法——自己动手录制video轻松搞定

    Webcast / 技术小视频制作方法——自己动手录制video轻松搞定 http://blog.sina.com.cn/s/blog_67d387490100wdnh.html 最近申请加入MSP的 ...

  3. 【微服务】之三：从零开始，轻松搞定SpringCloud微服务-配置中心

    在整个微服务体系中,除了注册中心具有非常重要的意义之外,还有一个注册中心.注册中心作为管理在整个项目群的配置文件及动态参数的重要载体服务.Spring Cloud体系的子项目中,Spring Clou ...

  4. 【微服务】之四：轻松搞定SpringCloud微服务-负载均衡Ribbon

    对于任何一个高可用高负载的系统来说,负载均衡是一个必不可少的名称.在大型分布式计算体系中,某个服务在单例的情况下,很难应对各种突发情况.因此,负载均衡是为了让系统在性能出现瓶颈或者其中一些出现状态下可 ...

  5. PDF怎么旋转页面，只需几步轻松搞定！

    有时候我们下载一个PDF文件里面有页面是旋转的情况,用手机看的时候可以把手机旋转过来看,那么用电脑的时候总不可能也转过来看吧,笔记本是可以的台式的是不行的,这个时候我们就需要把PDF文件中旋转的页面转 ...

  6. 轻松搞定RabbitMQ（六）——主题

    转自 http://blog.csdn.net/xiaoxian8023/article/details/48806871 翻译地址:http://www.rabbitmq.com/tutorials ...

  7. 基于 CODING 轻松搞定持续集成

    点击观看视频教程 带你一步一步搞定 CODING 持续集成 持续集成加速软件交付 持续集成这个概念是由 Grady Booch 在 1991 年首次提出,随后成为了 DevOps 的核心实践之一.持续 ...

  8. 春节过后就是金三银四求职季，分享几个Java面试妙招，轻松搞定HR！

    春节过后就是金三银四,分享几个Java面试妙招,轻松搞定HR! 2020年了,先祝大家新年快乐! 今年IT职位依然相当热门,特别是Java开发岗位.软件开发人才在今年将有大量的就业机会.春节过后,金三 ...

  9. 盘它！基于CANN的辅助驾驶AI实战案例，轻松搞定车辆检测和车距计算！

    摘要:基于昇腾AI异构计算架构CANN(Compute Architecture for Neural Networks)的简易版辅助驾驶AI应用,具备车辆检测.车距计算等基本功能,作为辅助驾驶入门级 ...

随机推荐

  1. WebGL 颜色与纹理

    1.纹理坐标 纹理坐标是纹理图像上的坐标,通过纹理坐标可以在纹理图像上获取纹理颜色.WebGL系统中的纹理坐标系统是二维的,如图所示.为了将纹理坐标和广泛使用的x.y坐标区分开来,WebGL使用s和t ...

  2. QT 运行崩溃：The inferior stopped because it received a signal from the Operating System

    最近在研究QT自带的boxes例子,自己派生一个图形项,但是在运行生成该图形项时程序直接退出了~ Qt Creater调试代码,问题定位如下代码行: 执行1270行时弹出错误消息框: 于是上网查找资料 ...

  3. 通过phoenix在hbase上创建二级索引，Secondary Indexing

    环境描述: 操作系统版本:CentOS release 6.5 (Final) 内核版本:2.6.32-431.el6.x86_64 phoenix版本:phoenix-4.10.0 hbase版本: ...

  4. 使用a标签制作tooltips

    摘要: 前面已经分享了三种方法制作tooltips,今天再来分享一个借助a标签来实现tooltips的方法. 效果如下:

  5. Servlet入门总结及第一个Servlet程序

    目录 一了解Servlet的概念 二Servlet技术功能 三 Servlet技术特点 四 Servlet生命周期 五servlet工作过程 六 Servlet与JSP区别 七Servlet代码结构 ...

  6. .NET Framework 4.0源代码

    原文出处:http://blogs.microsoft.co.il/blogs/arik/archive/2010/07/12/step-into-net-framework-4-0-source-c ...

  7. ios开发之--编码及命名规范

    做了几年的开发工作,因为是半路出的家,所以对这块一直都没怎么重视,所以在工作中,出现了很多的尴尬场景,编码和命名的规范是一定得有的,最起码一个团队之间的规范也是很有必要的.面向对象的编程,其实很好理解 ...

  8. SSL延迟有多大 (Https)

    据说,Netscape公司当年设计SSL协议的时候,有人提过,将互联网所有链接都变成HTTPs开头的加密链接. 这个建议没有得到采纳,原因之一是HTTPs链接比不加密的HTTP链接慢很多.(另一个原因 ...

  9. windows恶意软件删除工具(MRT.exe)检查计算机是否感染病毒使用图解

    Microsoft Windows恶意软件删除工具可以检查运行 Windows XP.Windows 2000 和 Windows Server 2003 的计算机是否受到特殊.流行的恶意软件(包括 ...

  10. java-使用SImpleDateFormat格式化时间输出

    之前有篇博客是使用NSDateFormatter来对时间进行格式化输出,但使用起来有点繁琐,今天介绍下最近刚刚使用的SimpleDateFormat. public class SimpleDateF ...