贝塞尔曲线工具css,cubic-bezier贝塞尔曲线css3动画工具

今天在一本叫《HTML5触摸界面设计与开发》上看到一个做弹跳球的复杂动画效果，首先加速下降，停止，然后弹起时逐渐减速。是用cubic-bezier贝塞尔曲线来完成的。所以特地去学习了一下关于cubic-bezier贝塞尔曲线。

cubic-bezier比较少用，因为PC端中，有浏览器不兼容。但是手机端中，可以使用并带来炫酷的动画及体验。

cubic-bezier是贝塞尔曲线中的绘制方法。

css3中常用的几个动画效果：

ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)

linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)

ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)

ease-out: cubic-bezier(0, 0, 0.58, 1.0)

ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

贝塞尔曲线通过四个点来定义一条曲线。这四个值描述了控制点的位置p1,p2，(x1,y1,x2,y2),值得范围在0-1之间，其他两个点永远是p0(0,0)p3(1,1)。控制点是控制图中的曲线，这些曲线会让球在弹起和下落的过程中，给予(正或负)加速度。(0,.27,.32,1)在上升过程中起作用，(1,0,0.96,0.91)在下降中起作用。

我们现在已经大概了解了一点贝塞尔曲线，接下来就看一个弹跳球的例子。

HTML部分：

CSS部分：

body{margin:;padding:;}

#ball{

background:red;

height:100px;

width:100px;

position:absolute;

top:10px;

left:20px;

border-radius:50px;

}

#floor{

position:absolute;

bottom:10px;

left:0px;

width:350px;

height:1px;

border-top:5px solid brown;

}

检测正确的制造商前缀：

(function(){

var down=false,

4 trans='transition',

5 eventName='transitionend';

if(typeof document.body.style.webkitTransition==='string'){

trans='webkitTransition';

eventName='webkitTransitionEnd';

}else if(typeof document.body.style.MozTransition==='string'){

trans='MozTransition';

}

})();

document.body.style.webkitTransition获取以webkit为前缀的transition

在WebKit引擎的浏览器中，当css3的transition动画执行结束时，触发webkitTransitionEnd事件。

下面是一个反弹函数：(这个函数写在上面自动执行的函数中)

var ball=document.getElementById('ball');

floor=document.getElementById('floor');

function bounce(){

if(down){

ball.style[trans]="Top 1s cubic-bezier(0,.27,.32,1)";

ball.style.top='10px';

down=false;

}else{

ball.style[trans]="Top 1s cubic-bezier(1,0,0.96,0.91)";

ball.style.top=(floor.offsetTop-100)+'px';

down=true;

}

}

ball.addEventListener(eventName,bounce);

bounce();

})();

11款CSS3动画工具的开发

本文展示了11个最好的和最令人惊异的CSS3动画工具,将为开发者是非常有帮助的.CSS3有设计师和开发人员之间的良好的声誉.它是在这里帮助他们创造惊人的结果. 有了这些动画工具,你可以创造一个轻松自由 ...

css3贝塞尔曲线过渡动画速率——transition-timing-function:cubic-bezier(n,n,n,n)

css3过渡动画速率用到的是三阶贝塞尔曲线,曲线有四个点,p0,p1,p2,p3 有几个属性: linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1)). ...

[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

css3动画工具

去年,我刚刚开始学习css3时候,看到了腾讯的这个工具,引起了我对css3的兴趣. 配合着书本上的知识写了一些效果,感觉不错. http://www.f2e.name/case/css3/tools. ...

Bezier贝塞尔曲线的原理、二次贝塞尔曲线的实现

Bezier曲线的原理 Bezier曲线是应用于二维图形的曲线.曲线由顶点和控制点组成,通过改变控制点坐标可以改变曲线的形状. 一次Bezier曲线公式: 一次Bezier曲线是由P0至P1的连续点, ...

css3 动画运动路径

1.cubic-bezier贝塞尔曲线CSS3动画工具 http://www.xuanfengge.com/cubic-bezier-bezier-css3-animation-tools.html ...

JS模拟CSS3动画-贝塞尔曲线

一.什么是贝塞尔曲线 1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier),贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线.如今,贝赛尔曲线是计算机图形学中相当重要的一种曲线 ...

CSS3 三次贝塞尔曲线(cubic-bezier)

例子:transition:all 1s cubic-bezier(.21,.2,.65,.1) 最近在看animation模块,其中animation-timing-function 和 trans ...

canvas基础[二]教你编写贝塞尔曲线工具

贝塞尔曲线 bezierCurveTo 在线工具 https://canvature.appspot.com/ [感觉这个好用一些] https://blogs.sitepointstatic.com ...

随机推荐

Bash:-:-获取未来40天的日期

..};do echo "$(date --date=''${i}' days ago' "+%Y%m%d")" ...

underscore.js库的浅析

Underscore并没有在原生的JavaScript对象原型中进行扩展,而是像jQuery一样,将数据封装在一个自定义对象中(下文称“Underscore对象”).生成一个Underscore对象: ...

paramiko模块

安装: # pycrypto,由于 paramiko 模块内部依赖pycrypto,所以先下载安装pycrypto (1) wget http://ftp.dlitz.net/pub/dlitz/cr ...

android Envieroment类

Constants String MEDIA_BAD_REMOVAL 在没有挂载前存储媒体已经被移除. String MEDIA_CHECKING 正在检查存储媒体. String MEDIA_MOU ...

Java项目下jar包的放置

build path:引用 web-inf/lib:固定 eclipse编译项目是根据build path的.如果不用eclipse来发布项目的话,就会找不到jar. tomcat运行时首先在它自己的 ...

Oracle查找表的外键引用关系

Oracle查找表的外键引用关系 select t1.table_name, t2.table_name as "TABLE_NAME(R)", t1.constraint_nam ...

一个很好的幻灯片效果的jquery插件--kinMaxShow

在做一些网站时,或多或少的要给网站做幻灯片效果,以前每次做这个效果,都是现成带网上找,找到的很多很杂,而且用完后就不会再理会更加不会去总结代码. 无意中找到了kinMaxShow这个插件,机会满足了我 ...

CentOS 7 部署、连接 数据库mariadb

1.安装mariadb yum -y install mariadb* 2.开启/停止 systemctl start mariadb  #启动MariaDB systemctl stop maria ...

裁剪Ubuntu内核和模块管理2

准备工作 通常要运行的第一个命令是: #cd /usr/src/linux;make mrproper 该命令确保源代码目录下没有不正确的.o文件以及文件的互相依赖.由于我们使用刚下载的完整的源程序包 ...

Oracle查看表或者视图的定义语句

查看表的定义 SELECT DBMS_METADATA.GET_DDL('TABLE','TABLE_NAME') FROM DUAL; 查看视图的定义语句 SELECT DBMS_METADATA. ...