php 贝瑟尔曲线,贝塞尔曲线的应用详解
简介
贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果。
使用贝塞尔曲线常用的两个网址如下:
缓动函数:
cubic-bezier:
如何用贝塞尔曲线画曲线
一个标准的3次贝塞尔曲线需要4个点:起始点、终止点(也称锚点)以及两个相互分离的中间点。
无论SVG, Canvas还是CSS3动画,都牵扯到这4个点。
SVG和贝塞尔曲线的结合
svg可缩放矢量图形(Scalable Vector Graphics)、二维、XML标记,类似下面:
SVG的代码不具体展开(说开了可以连载好几篇),提一下其中一个path的标签,可以绘制任意的路径,自然也包括和贝塞尔搞基。
三次贝塞尔曲线指令:C x1 y1, x2 y2, x y两个控制点(x1,y1)和(x2,y2),(x,y)代表曲线的终点。字母C表示特定动作与行为,这里需要大写,表示标准三次方贝塞尔曲线。
看看下面一些描述贝塞尔曲线的代码(片段),大家可以好好地感受下(其中字母M表示特定动作moveTo, 指将绘图的起点移动到此处)。
曲线效果类似下面这张图:
可以看到M后面的起点,加C后面3个点,构成了贝赛尔曲线的4个点。
Canvas与贝塞尔曲线的结合
其中Canvas有个bezierCurveTo()方法,代码如下:
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
开始点:moveTo(20,20)
控制点 1:bezierCurveTo(20,100,200,100,200,20)
控制点 2:bezierCurveTo(20,100,200,100,200,20)
结束点: bezierCurveTo(20,100,200,100,200,20)
CSS3动画与贝塞尔曲线的结合
用法如下:
transition:cubic-bezier(.25,.1,.25,1)
其中.25,.1这个坐标对于起点连接的那个锚点;.25,1这个坐标对于终点头上那根天线顶端那个点。
有人会疑问,CSS3动画那个cubic-bezier值好像只有两个点诶~~
那是因为CSS3动画贝塞尔曲线的起点和终点已经固定了,分别是(0,0)和(1,1)。
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)
实现一个弹球的效果:
html代码:
css代码:
body{margin:0;padding:0;}#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;
}
js代码:
;(function(){
var down=false,
trans='transition',
eventName='transitionend'; if(typeof document.body.style.webkitTransition==='string'){
trans='webkitTransition';
eventName='webkitTransitionEnd';
}else if(typeof document.body.style.MozTransition==='string'){
trans='MozTransition';
}var ball=document.getElementById('ball');var 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();
})();
说明:document.body.style.webkitTransition获取以webkit为前缀的transition
在WebKit引擎的浏览器中,当css3的transition动画执行结束时,触发webkitTransitionEnd事件。
实现效果如图所示:
下载地址:《CSS3动画:小球弹跳动画》
总结
canvas:
ctx.moveTo(0,0);
ctx.bezierCurveTo(x1,y1,x2,y2,1,1);
SVG:
CSS3贝塞尔起点是0,0; 终点是1, 1;
cubic-bezier(x1,y1, x2,y2)
php 贝瑟尔曲线,贝塞尔曲线的应用详解相关推荐
- 验证曲线( validation curve)是什么?如何绘制验证曲线( validation curve)?验证曲线( validation curve)详解及实践
验证曲线( validation curve)是什么?如何绘制验证曲线( validation curve)?验证曲线( validation curve)详解及实践 验证曲线( validation ...
- WPF将点列连接成光滑曲线——贝塞尔曲线
背景 最近在写一个游戏场景编辑器,虽然很水,但是还是遇到了不少问题.连接离散个点列成为光滑曲线就是一个问题.主要是为了通过关键点产生2D的赛道场景.总之马路不可能是直线相连的,当然需要曲线光滑相连.现 ...
- 技术分享 | 一条神奇的曲线——贝塞尔曲线在前端的应用
源宝导读:在前端的开发中我们经常会遇到利用贝塞尔曲线帮助我们完成前端的动画和图形绘制,但是对其中的一些参数配置是一头雾水.本文将从贝塞尔曲线的原理讲起,由浅入深剖析一阶到多阶贝塞尔的实现原理,最后从三 ...
- 曲线相似度衡量——曲线距离计算Fréchet distance详解与python计算
弗朗明歇距离(Fréchet distance)论文可以参考: 理论推导 Eiter, Thomas, and Heikki Mannila. "Computing discrete Fré ...
- 【Android UI】贝塞尔曲线 ③ ( 贝塞尔曲线关键点坐标记录 | 二阶贝塞尔曲线示例 )
文章目录 一.贝塞尔曲线关键点坐标记录 二.二阶贝塞尔曲线示例 三.代码示例 贝塞尔曲线参考 : https://github.com/venshine/BezierMaker 一.贝塞尔曲线关键点坐 ...
- mtk 电池曲线_mtk 电池驱动流程详解
mtk 电池驱动流程详解 充电算法,充9S停1S 电池温度高于50,充电器电压为>6.5V 停止充电, 充电电压最大值是6500mV 最小值是4400mV 3.4V为开机电压,电压大于3.4V才 ...
- python 贝塞尔曲线,贝塞尔曲线原理分析及其Android的实现
本文主要内容为贝塞尔曲线原理解析并用 SurfaceView 实现其展示动画 关于SurfaceView 的使用,大家可以看我的上一篇文章 Android:SurfaceView 的使用(附代码模板) ...
- 【Android UI】贝塞尔曲线 ⑥ ( 贝塞尔曲线递归算法原理 | 贝塞尔曲线递归算法实现 )
文章目录 一.贝塞尔曲线递归算法 二.贝塞尔曲线递归算法实现 贝塞尔曲线参考 : https://github.com/venshine/BezierMaker 一.贝塞尔曲线递归算法 一阶贝塞尔曲线 ...
- Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效 特效预览图 什么是贝塞尔曲线? 百度百科: 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图 ...
最新文章
- python爬虫系列之数据的存储(二):csv库的使用
- C# 外接(网口)双摄像头视频获取
- uniapp 刷新后数据都没有了_环境温度传感器都没有连接,竟然还会有数据?
- eclipse svn新增文件不显示在文件列表,只有修改文件可以提交!
- 12002.i2ctools工具
- Redis学习(5)-常用命令
- PHP文件系统-文件路径操作和权限
- 学生HTML个人网页作业作品——湘菜美食网页设计作品(12页) 美食网站设计与实现
- 高通X12平台XO信号干扰灵敏度的解决方案
- iOS和Android和H5交互WebViewJavascriptBridge
- Java中识别二维码并且提高二维码的识别率
- MIUI系统获取短信权限问题
- 【Python黑科技】几行代码绘制gif动图(保姆级图文+实现代码)
- 齐供应TAPPI四碘化5,10,15,20-四(对-N,N,N三甲基苯胺基)卟啉敏化的钛酸盐纳米管(TAPPI-TNTs)高效的可见光催化剂岳
- 微服务理念与Spring Cloud入门-----父工程与API子工程的创建教程
- python pls_【建模应用】PLS偏最小二乘回归原理与应用
- 百度阿波罗获雅析功能安全产品认证证书
- python 数据交互_Python用户交互以及数据类型
- 城市与区域密度模型(人口密度)
- 虚拟化技术 hyper-v