今天在一本叫《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. ...