CSS3 三次贝塞尔曲线(cubic-bezier)
例子:transition:all 1s cubic-bezier(.21,.2,.65,.1)
最近在看animation模块,其中animation-timing-function 和 transition-timing-function两个属性来控制动画速度分别提供了ease,liner,ease-in,ease-out,ease-in-out几个预设速度,还可以同过cubic-bezier来自定义速度,想要深入了解CSS3动画,实现随心所欲的动画效果,还是有必要理解下其中的原理。
CSS3动画速度的控制通过三次贝塞尔曲线函数实现,定义规则为
cubic-bezier (x1,y1,x2,y2)
原理:
看一下什么是三次贝塞尔曲线,以及这几个参数的含义:

贝塞尔曲线坐标系
贝塞尔曲线通过控制曲线上的四个点(起始点、终止点以及两个相互分离的中间点)来创造、编辑图形,绘制出一条光滑曲线并以曲线的状态来反映动画过程中速度的变化。

参数点
分别用A,B,C,D表示这四个点,其中起始点固定值为A(0,0),终止点固定为D(1,1)剩下的中间点B(x1,y1),C(x2,y2)也就是所要动态操控的两个点了,对应cubic-bezier (x1,y1,x2,y2)中的四个参数,通过改变B,C两点的坐标值来动态生成一条贝塞尔曲线表示动画中的速度变化。
规则
x的取值区间是[0,1],取值超过该区间cubic-bezier即无效,y的的取值区间没有限制[-0.5,0.5]也是可以的,但不应该超出[0,1]范围太大。
CSS3提供的几个预设速度:
ease 对应自定义cubic-bezier(.,.,.,),效果为先慢后快再慢;

ease效果
linear 对应自定义cubic-bezier(,,,),效果为匀速直线;

linear效果
ease-in 对应自定义cubic-bezier(.,,,),效果为先慢后快;

ease-in效果
ease-out 对应自定义cubic-bezier(,,.,),效果为先快后慢;

ease-out效果
ease-in-out 对应自定义cubic-bezier(.,,.,),效果为先慢后快再慢。

ease-in-out效果
用法
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>demo</title> <style>
.linear {
width: 50px;
height: 50px;
background-color: #ff0000;
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-o-transition: all 2s linear;
transition: all 2s linear;
}
.linear:hover {
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
-o-transform: translateX(100px);
transform: translateX(100px);
} .custom {
width: 50px;
height: 50px;
background-color: #00ff00;
-webkit-transition: all 2s cubic-bezier(.,-0.25,.,1.31);
-moz-transition: all 2s cubic-bezier(.,-0.25,.,1.31);
-o-transition: all 2s cubic-bezier(.,-0.25,.,1.31);
transition: all 2s cubic-bezier(.,-0.25,.,1.31);
}
.custom:hover {
-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
}
</style>
</head>
<body>
<div class="linear"></div>
<div class="custom"></div>
</body>
</html>
demo中红色方块采用预设速度liner呈现匀速直线运动,绿色方块采用自定义cubic-bezier(.94,-0.25,.32,1.31),呈现蓄力加速效果。
bezier曲线图:

CSS3 三次贝塞尔曲线(cubic-bezier)的更多相关文章
- 二次、三次贝塞尔曲线demo(演示+获取坐标点)
二次贝塞尔曲线demo: See the Pen quadraticCurveDemo by hanyanjun (@hanyanjun) on CodePen. 我的demo地址(二次) 推荐点击以 ...
- [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...
- 计算机图形学:贝塞尔曲线(Bezier Curve)
计算机图形学:贝塞尔曲线(Bezier Curve) 贝塞尔能由贝塞尔样条组合而成,也可产生更高维的贝塞尔曲面.
- 求帮助 html5三次贝塞尔曲线问题
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>can ...
- canvas 绘制三次贝塞尔曲线
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 贝塞尔曲线与CSS3动画、SVG和canvas的应用
简介 贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果. 使用贝塞尔曲线常用的两个网址如下: 缓动函数:http://www.xuanfe ...
- JS模拟CSS3动画-贝塞尔曲线
一.什么是贝塞尔曲线 1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier),贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线.如今,贝赛尔曲线是计算机图形学中相当重要的一种曲线 ...
- iOS开发 贝塞尔曲线
iOS开发 贝塞尔曲线UIBezierPath - 陌云 时间 2014-03-14 11:04:00 博客园-所有随笔区 原文 http://www.cnblogs.com/moyunmo/p/ ...
- iOS开发 贝塞尔曲线UIBezierPath
最近项目中需要用到用贝塞尔曲线去绘制路径 ,然后往路径里面填充图片,找到这篇文章挺好,记录下来 自己学习! 转至 http://blog.csdn.net/guo_hongjun1611/articl ...
随机推荐
- Fiddler状态栏
Fiddler状态栏显示了Fiddler的一些配置信息,我们也可以点击这些配置信息进行快速配置. 以下图为例: 状态栏一共显示了四项信息:1.Capturing/空:2.过滤进程类型:3.Web Se ...
- 基于Rabbit实现的RPC
最近在学习项目中的通用技术,其中一个是在项目中会经常使用的基于RabbitMQ实现的RPC.这里一共有三个点要学习,分别是:RPC是什么?RabbitMQ是什么?如何使用RabbitMQ实现RPC.奔 ...
- JavaScript IIEF 模仿块级作用域
前言 JavaScript没有块级作用域的概念.但是通过IIEF 立即执行函数我们可以实现块级作用域. function outputNumbers(count){ for (var i=0; i & ...
- 2.7 if应用:猜拳游戏
应用:猜拳游戏 <1>运行效果: <2>参考代码: import random player = input('请输入:剪刀(0) 石头(1) 布(2):') player = ...
- react-router(v4) 路由跳转后返回页面顶部问题
遇到的问题 由A页面跳转到B页面,B页面停留在A页面的位置,没有返回到顶部. 问题分析 首先分析下出现此问题的原因: 在项目中使用的是 hashHistory,它是建立在 history 之上的,当路 ...
- Accoridion折叠面板
详细操作见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- JAVA进阶4
间歇性混吃等死,持续性踌躇满志系列-------------第4天 1.静态内部类求极值 class MaxMin{ public static class Result{ //表示最大值.最小值 p ...
- 网络学习day02_OSI七层模型及数据的传输过程
title: 2018.9.2 OSI七层模型及数据的传输过程 tags: 计算机网络, OSI七层模型, 数据传输, 数据解封装 --- OSI七层模型和TCP/IP五层模型 OSI七层模型 我们说 ...
- python的request包
1,request包基本用法 import requests a=requests.get("http://www.baidu.com")print a.text #以文本形式打印 ...
- dubbo负载均衡与集群集群容错
1.负载均衡 在集群负载均衡时,Dubbo 提供了多种均衡策略,缺省为 random 随机调用. 1. 负载均衡策略 Random LoadBalance 随机,按权重设置随机概率.(默认值)在一个 ...