CSS3 贝塞尔曲线实现
cubic-bezier 曲线是 css3 动画的一个重要基石。另一个为 steps (ease 等都是 cubic-bezier 的特殊形式),css3 中的 cubic_bezier 曲线限制了首尾两控制点的位置,通过调整中间两控制点的位置可以灵活得到常用的动画效果,同时 canvas 也进行了相应的支持,也存在相应的工具可以根据想要的曲线得到对应 cubic bezier 曲线的控制点参数。
而 ie(6-9) 却没有相应的支持,为了能在各个平台得到一致的动画效果,则不可避免要在 ie 上通过定时器沿着指定控制点参数的 cubic bezier 曲线来手动更新动画对象的数值.
模拟实现
公式
cubic-bezier 公式不是简单的 y= x 公式,而是引入了第三个变量 t,由于动画中关键在于计算比例,即在总时间的某个时间点百分比得到相应的值相对于最终值的比例,那么只需要得到 0,1 区间的曲线即可。 而 [x,y] -> [0,1] 内的曲线则是通过 t 在 0,1 内连续变化而得到:
其中 P0, P1 ,P2, P3 都为两维 xy 向量
将向量拆开表示即为:
- y= (1-t)^3*p0y + 3*(1-t)^2*t*p1y + 3*(1-t)*t^2p2y + t^3p3y
- x= (1-t)^3*p0x + 3*(1-t)^2*t*p1x + 3*(1-t)*t^2p2x + t^3p3x
而 css3 所用的 cubic bezier 已经限定死 p0 = (0,0) , p3= (1,1) ,因此公式可简化为
- var ax = 3 * p1x - 3 * p2x + 1,
- bx = 3 * p2x - 6 * p1x,
- cx = 3 * p1x;
- var ay = 3 * p1y - 3 * p2y + 1,
- by = 3 * p2y - 6 * p1y,
- cy = 3 * p1y;
- y= ((ay * t + by) * t + cy ) * t
- x= ((ax * t + bx) * t + cx ) * t
为了提高效率以及减少计算精度丢失公式进一步经过了 Horner 's method 变化。
计算
css3 中某个限定了特定控制参数的 cubic -bezier 曲线如下所示:
动画所做的事情就是把 x 轴当做时间比例,根据曲线得到 y 轴对应的值,并更新到动画对象中去.
即转化为以下问题:如何根据上述公式在已知 x 的情况下如何得到 y.
求 t
首先需要根据公式
- var ax = 3 * p1x - 3 * p2x + 1,
- bx = 3 * p2x - 6 * p1x,
- cx = 3 * p1x;
- x= ((ax * t + bx) * t + cx ) * t
在已知 x 的情况下求 t,即经典的多项式求参问题,首先可以通过 newton method 尝试求出 t 的值,若不行(可能性很小)则可通过可靠但慢速的二分法求值.
求 y
上步得到 t 后则可以带入另一个 y 公式求得最终值 y
- var ay = 3 * p1y - 3 * p2y + 1,
- by = 3 * p2y - 6 * p1y,
- cy = 3 * p1y;
- y= ((ay * t + by) * t + cy ) * t
上述解法也是源自 webkit webcore c++ 原生实现.
使用对比
在传入动画的 easing 设置时,可以传入 css3 cubic-bezier 的语法格式或者直接传入特定的曲线设置(ease-in ease-out).
- $('#xx').animate({
- left:500
- },{
- duration: 2,
- easing: 'cubic-bezier(1,0.22,0,0.84)' // 'ease-in'
- });
效果对比:
通过对比即可发现,ease-out 和以前 js 实现的简单二次曲线 easeOut 还是有明显的不同,并且 js 实现和 css3 原生几乎效果完全一样(效率可能稍微低了些),更多自带曲线对比可见:
CSS3 贝塞尔曲线实现的更多相关文章
- css3贝塞尔曲线过渡动画速率——transition-timing-function:cubic-bezier(n,n,n,n)
css3过渡动画速率用到的是三阶贝塞尔曲线,曲线有四个点,p0,p1,p2,p3 有几个属性: linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1)). ...
- css3贝塞尔曲线
http://yisibl.github.io/cubic-bezier/#.17,.67,.94,.53 前言 在了解 cubic-bezier 之前,你需要对 CSS3 中的动画效果有所认识,它是 ...
- cubic-bezier贝塞尔曲线css3动画工具
今天在一本叫<HTML5触摸界面设计与开发>上看到一个做弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速.是用cubic-bezier贝塞尔曲线来完成的.所以特地去学习了一下关 ...
- CSS3 三次贝塞尔曲线(cubic-bezier)
例子:transition:all 1s cubic-bezier(.21,.2,.65,.1) 最近在看animation模块,其中animation-timing-function 和 trans ...
- 贝塞尔曲线与CSS3动画、SVG和canvas的应用
简介 贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果. 使用贝塞尔曲线常用的两个网址如下: 缓动函数:http://www.xuanfe ...
- JS模拟CSS3动画-贝塞尔曲线
一.什么是贝塞尔曲线 1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier),贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线.如今,贝赛尔曲线是计算机图形学中相当重要的一种曲线 ...
- css3动画贝塞尔曲线cubic-bezier,css3动画的五种情况
当大家开始做css3动画的时候,了解贝塞尔曲线就成了不可或缺的.“贝赛尔曲线”是由法国数学家Pierre Bézier所发明,由此为计算机矢量图形学奠定了基础.它的主要意义在于无论是直线或曲线都能在数 ...
- 深度掌握SVG路径path的贝塞尔曲线指令
一.数字.公式.函数.变量,哦,NO! 又又一次说起贝塞尔曲线(英语:Bézier curve,维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完 ...
- 贝塞尔曲线(cubic bezier)
对于css3的Transitions,网上很多介绍,相信大家都比较了解,这里用最简单的方式介绍下: transition语法:transition:<transition-property> ...
随机推荐
- Hadoop权威指南: InputFormat,RecordReader,OutputFormat和RecordWriter
InputFormat和RecordReader Hadoop提出了InputFormat的概念 org.apache.hadoop.mapreduce包里的InputFormat抽象类提供了如下列代 ...
- ubuntu下配置Apache
ubuntu下配置Apache Apache的默认文档根目录是在Ubuntu上的/var/www目录 配置文件是/ etc/apache2/apache2.conf配置存储在的子目录在/etc/apa ...
- mac下导出kindle单词本的单词
平常都是用kindle来看电子书,偶尔也会看上一些英文书籍,不可避免的会遇到不少陌生的单词,而kindle专门针对这种需求,做了不少优化,可以直接在kindle上面查阅单词,甚至可以背单词.但是毕竟不 ...
- 未来手机Alo即将问世!全息投影手机的新高峰!全息3d 网
文章来源:网络 编辑:大熊 [摘要]全息投影手机很早就开始炒,网络上的概念机也是丛出不穷,那么这款出自法国的概念机又是多么的奇葩?全息 3d 网带你一探究竟. 据外媒报道,在不久将来语 ...
- 蓝桥网试题 java 入门训练 Fibonacci数列
---------------------------------------------------------------------------------------------------- ...
- 学习计划——巩固基础+进阶练习
时间:2016/3/23---24 内容:如何用CSS进行网页布局 课程复习 目标:完成一个demo+完成一篇学习心得博客 时间:2016/3/25---26 内容:网页布局基础 课程复习 目标: ...
- 【noip 2009】 乌龟棋 记忆化搜索&动规
题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游戏要求玩家控制一个乌龟棋子从起 ...
- Linux编程之从零开始搭建RPC分布式系统
我一毕业进公司就接触到了RPC,主要是使用前辈们搭建好的RPC框架以及封装好的RPC函数进行业务开发,虽说使用RPC框架开发已经近半年了,但一直想知道如何从零开始搭建起这么一个好用的分布式通信系统框架 ...
- Android SQLite总结
SQLite在Android一般应用中还是比较常用,早期的时候碰到过不少坑,其中最烦的就是多线程并发读写问题,今天正好整理一下,做个笔记,也欢迎指正.讨论和补充. 一.查询优化 1.wal模式 开启w ...
- tomcat的配置
配置tomcat需要 先下载JDK JDE配置环境http://jingyan.baidu.com/article/870c6fc33e62bcb03fe4be90.htmlXML配置 路径——> ...