cubic-bezier又称三次贝塞尔，主要是为animation生成速度曲线函数。

cubic-bezier(x1,y1,x2,y2)

此图中:

P0:(0,0) P1:(x1,y1) P2:(x2,y2) P3:(1,1)

（x1,x2 范围为 0-1） （y1,y2没规定，但是过大没必要也没意义。）

我对此曲线是这么理解的：假设P1，P2两个点为吸铁石，曲线是薄铁条（可以被吸铁石影响形状的那种）

那么这个曲线则是被 P1，P2两个吸铁石点拉扯形成的。

有一点需要注意，当这个点距离曲线越远，则拉扯力越大，曲线弧度越大。距离曲线越近，拉扯力越小，曲线弧度越小（这里和吸铁石相反。）

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

   <meta charset="UTF-8">

   <title>Document</title>

   <style>

     .animation {

       width: 50px;

       height: 50px;

       background-color: #ed3;

       -webkit-transition:  all 2s cubic-bezier(.17, .86, .73, .14);

            -o-transition:  all 2s cubic-bezier(.17, .86, .73, .14);

               transition:  all 2s cubic-bezier(.17, .86, .73, .14);

     }

     .animation:hover {

       -webkit-transform:  translateX(400px);

           -ms-transform:  translateX(400px);

            -o-transform:  translateX(400px);

               transform:  translateX(400px);

     }

   </style>

 </head>

 <body>

   <div class="animation"></div>

 </body>

 </html>

这段代码中 (x1=0.17 y1=0.86) (x2=0.73 y2=0.14) 可以画出此运动曲线为

图片看不懂没关系，我教你，简单来讲可以把（0，0）当做物体的初始点，（0，1）当做物体的终点 注意这里不是（1，1），X轴从0到1为这个物体从初始点到终点的时间。

中间有段曲线大约在1/2路程的时候，发现随着时间的推移增加的很缓慢。那就说明这个物体在这段时间移动的慢。

好了，继续。下边有几个常用的曲线

ease： cubic-bezier(.25, .1, .25, 1);

liner：cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)

ease-in：cubic-bezier(.42, 0, 1, 1)

ease-out：cubic-bezier(0, 0, .58, 1)

ease-in-out：cubic-bezier(.42, 0, .58, 1)

In Out . Back（来回的缓冲效果）：cubic-bezier(0.68, -0.55, 0.27, 1.55)

参考：https://www.jianshu.com/p/d999f090d333

one more thing： 这个网址可以在线创作Cubic-bezier，蛮有意思的

Cubic-bezier 曲线的更多相关文章

  1. Bezier曲线的原理 及 二次Bezier曲线的实现

    原文地址:http://blog.csdn.net/jimi36/article/details/7792103 Bezier曲线的原理 Bezier曲线是应用于二维图形的曲线.曲线由顶点和控制点组成 ...

  2. [摘抄] Bezier曲线、B样条和NURBS

    Bezier曲线.B样条和NURBS,NURBS是Non-Uniform Rational B-Splines的缩写,都是根据控制点来生成曲线的,那么他们有什么区别了?简单来说,就是: Bezier曲 ...

  3. C# 实现Bezier曲线（vs2008）

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  4. 连续bezier曲线的实现

    需求场景 一系列的坐标点,划出一条平滑的曲线 3次Bezier曲线 基本上大部分绘图工具都实现了3次Bezier曲线,4个点确定一条3次Bezier曲线.以html5中的canvas为例 let ct ...

  5. 7.5.5编程实例－Bezier曲线曲面绘制

    (a)Bezier曲线                         (b) Bezier曲面 1. 绘制Bezier曲线 #include <GL/glut.h> GLfloat ct ...

  6. 实验6 Bezier曲线生成

    1．实验目的: 了解曲线的生成原理,掌握几种常见的曲线生成算法,利用VC+OpenGL实现Bezier曲线生成算法. 2．实验内容: (1) 结合示范代码了解曲线生成原理与算法实现,尤其是Bezier ...

  7. 简单而粗暴的方法画任意阶数Bezier曲线

    简单而粗暴的方法画任意阶数Bezier曲线 虽然说是任意阶数,但是嘞,算法原理是可以到任意阶数,计算机大概到100多阶就会溢出了 Bezier曲线介绍] [本文代码] 背景 在windows的Open ...

  8. python bezier 曲线

    1.手写bezier公式,生成bezier代码, 如果给的点数过多,则会生成一半bezier曲线,剩下的一半就需要进行拼接: import numpy as np import matplotlib. ...

  9. iOS Bezier曲线

    https://www.jianshu.com/p/2316f0d9db65 1. Bezier曲线 相关软件:PaintCode:可以直接画图,软件根据图像生产Bezier曲线 相关概念:UIBez ...

  10. Bezier曲线的实现——de Casteljau算法

    这学期同时上了计算机图形学和计算方法两门课,学到这部分的时候突然觉得de Casteljau递推算法特别像牛顿插值,尤其递推计算步骤很像牛顿差商表. 一开始用伯恩斯坦多项式计算Bezier曲线的时候, ...

随机推荐

  1. Java 之 打印流

    打印流 1.概述 平常在控制台打印输出,是调用 print 方法和 println 方法完成的,这两个方法都来自于 java.io.PrintStream 类,该类能够方便地打印各种数据类型的值,是一 ...

  2. Qt定时器

    PS: 本案例使用的是Qt 4.8.4版本,不同版本代码可能会有差异. 第一步: // 重写此虚函数(继承自QObject) virtual void timerEvent(QTimerEvent* ...

  3. http接口测试工具-Advanced-REST-client

    非常好用的http接口测试工具 相信作为一个java开发人员,大家或多或少的要写或者接触一些http接口.而当我们需要本地调试接口常常会因为没有一款好用的工具而烦恼.今天要给大家介绍一款非常好用.实用 ...

  4. RT-Thread--内存管理

    内存管理的功能特点 RT-Thread 操作系统在内存管理上,根据上层应用及系统资源的不同,有针对性地提供了不同的内存分配管理算法.总体上可分为两类:内存堆管理与内存池管理,而内存堆管理又根据具体内存 ...

  5. 《hello--world团队》第四次作业：项目需求调研与分析

    项目 内容 这个作业属于哪个课程 2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验八 团队作业4:基于原型的团队项目需求调研与分析 团队名称 <hello--w ...

  6. Java锁--Semaphore

    转载请注明出处:http://www.cnblogs.com/skywang12345/p/3534050.html Semaphore简介 Semaphore是一个计数信号量,它的本质是一个&quo ...

  7. 【noi2019集训题1】 脑部进食 期望dp+高斯消元

    题目大意:有n个点,m条有向边,每条边上有一个小写字母. 有一个人从1号点开始在这个图上随机游走,游走过程中他会按顺序记录下走过的边上的字符. 如果在某个时刻,他记录下的字符串中,存在一个子序列和S2 ...

  8. 前端面试：Vue.js常见的问题

    摘自今日头条用户:代码开发 原文链接: https://www.toutiao.com/a6683120112255369732/?tt_from=mobile_qq&utm_campaign ...

  9. 专为简化 C 开发而设计的编程语言 Trad

    Trad 是一个专为简化 C 开发而设计的编程语言,它: 基于 C: 经编译器编译后能得到干净可读的标准 C 代码,其与 C 的关系就像 TypeScript 与 JavaScript 一样 专为 U ...

  10. 2019-2020-1 20199312《Linux内核原理与分析》第三周作业

    计算机的三大法宝:程序存储计算机.函数调用.中断 堆栈的作用:记录函数调用框架.传递函数参数.保存返回值地址.提供函数内部局部便量的存储空间. 堆栈相关的寄存器 ESP:堆栈指针,指向堆栈栈顶 EBP ...