抛物线动画及抛物线与贝塞尔曲线的结合

前端如何用代码写元素做抛物线运动的动画

前言：对于没有经验的前端来说，用代码写元素做抛物运动的动画是一件挺麻烦的事，
这里元气小编根据自己的工作经验总结了几种写这种动画的方法
复制代码

---

1. 简单粗暴型一，利用animation-timing-function中的steps()函数来做，优点对于帧数少的抛物线动画，用此方法可以说非常的快。缺点图片帧数少效果会不流畅，图片帧数多造成图片过大，加载慢。

   举例 1.1 html代码

    <div class="niudan"></div>
   复制代码

   1.2 css代码

    .niudan{
       ...
       animation: showball steps(22) 2.4s 1 0s;
    }
    @keyframes showball {
       0% {
           background-position-y: 0；
       }
       100% {
           background-position-y: 100%;
       }
    }
   复制代码

   1.3 效果如下图

2. 简单粗暴型二，根据抛物线的起始坐标和结束坐标，然后取一些抛物线上的坐标，利用keyframes来做animation动画。优点只需单帧图片，效果比较流畅。缺点算坐标比较麻烦。

   举例：1.1 取坐标模型

   1.2 html代码

    <div class="cat-cell"></div>
   复制代码

   1.3 css代码

    .cat-cell {
      ...
      animation: wnPwx 0.3s 0s linear forwards;
     }
     @keyframes wnPwx {
       0% {
           transform: translate3d(0px, 0, 0);
       }
       10% {
           transform: translate3d(50px, -10px, 0);
       }
       20% {
           transform: translate3d(100px, -30px, 0);
       }
       30% {
           transform: translate3d(150px, 10px, 0);
       }
       40% {
           transform: translate3d(200px, 20px, 0) ;
       }
       50% {
           transform: translate3d(230px, 40px, 0) ;
       }
       60% {
           transform: translate3d(245px, 70px, 0);
       }
       70% {
           transform: translate3d(265px, 110px, 0);
       }
       80% {
           transform: translate3d(285px, 140px, 0);
       }
       90% {
           transform: translate3d(300px, 170px, 0) ;
       }
       100% {
           transform: translate3d(314px, 190px, 0);
       }
    }
   复制代码

   1.4效果如下图

3. 简单隐藏型，例如抛物线的结束坐标在可视屏幕之外，这种类型可以采用抛物线的起始坐标和结束坐标和css3中rotate(90deg)属性来实现。优点只需单帧图片，效果比较流畅。缺点适用场景比较固定。

   举例：1.1 html代码

    <div class="xiang"></div>
   复制代码

   1.2 css代码

       .xiang-top{
           ...
           transform: rotate(-8deg);
           animation: topRotate 0.6s 2s linear forwards;
       }
       @keyframes topRotate {
             0% {
               transform-origin: right bottom;
               transform: rotate(0deg) translateX(0px) translateY(0px);
             }
             100% {
               transform-origin: right bottom;
               transform: rotate(90deg) translateX(500px) translateY(-900px);
             }
       }
   复制代码

   1.3 效果如下图

4. 简单大众型，利用animationd中的贝塞尔曲线和抛物线的起始坐标、结束坐标结合形成抛物线。优点只需单帧图片，效果比较流畅。缺点要花一个小时掌握贝塞尔曲线。如何掌握贝塞尔曲线，这点将在下面着重来说。

Tips：对于目前这种四种方法，大家可以根据自己喜欢或者动画要求来用
复制代码

前端如何通过贝塞尔曲线来形成css3中简单的抛物线运动？

1. 简单介绍贝塞尔曲线

   贝塞尔曲线是应用于二维图形应用程序的数学曲线。 曲线定义：起始点、终止点（也称锚点）、控制点。通过调整控制点，贝塞尔曲线的形状会发生变化。 cubic-bezier(x1,y1,x2,y2),贝塞尔曲线有四个参数，每个参数的范围一般在0到1之间（备注：特殊曲线也可取负数，这里就不多说特殊情况了）

2. 从HTML、CSS代码方面介绍形成抛物线运动的方法

   需要两个div,且是父子级关系，需要一个div做匀速直线运动，另外一个div做贝塞尔曲线运动。

   1.1 HTML代码

   <div class="wrap">
        <div class="qiu">
            <div class="qiu2"></div>
        </div>
   </div>
   复制代码

   1.2 CSS代码

     .wrap {
        ...
        .qiu{
          ...
          animation: da 2s 0s cubic-bezier(0.8,0.16,0.9,0.57) forwards;
          .qiu2{
           ...
            animation: da2 2s 0s linear forwards;
          }
        }
     }
    @keyframes da {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(200px);
      }
    }
    @keyframes da2 {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(400px);
      }
    }
   复制代码

   1.3 效果如下图

3. 通过调节贝塞尔曲线参数形成不同的抛物线运动

   接下来就是说说如何调节贝塞尔曲线形成不同的抛物线了，先来看看贝塞尔曲线图。

   cubic-bezier(x1,y1,x2,y2),想要形成一般的抛物线，条件是0<y1<x1<=1,且0<y2<x2<=1或者是0<x1<y1<=1且0<x2<y2<=1。x1、y1可以看做曲线的第一阶段缓慢程度，x2、y2可以看做曲线的第二阶段缓慢程度。这是贝塞尔曲线的官方网站，里面可手动拖拽两个点，形成不同的曲线

   • 一条平缓的曲线，例如：cubic-bezier(0.4,0.2,0.8,0.3);

   • 一条先慢后快的曲线，例如：cubic-bezier(0.4,0.2,0.9,0.4);

   • 一条先快后慢的曲线，例如：cubic-bezier(0.9,0.4,0.4,0.2);

转载于:https://juejin.im/post/5b93ebfbf265da0ad2216c76