canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动


Posted in HTML / CSS onJanuary 10, 2018

写在最前

在之前的这篇文章中我们提到了对于贝塞尔公式的运用。本次分享一下如何推导贝塞尔公式以及附一个简单的?即小球跟随曲线轨迹运动。

效果预览

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

在本例中生成的曲线由以上文章中的源码提供。

贝塞尔曲线公式推导

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

上面这张图是贝塞尔曲线的完整公式,看起来一脸懵逼=。=,因为这是N阶的推导公式,本次我们以一二阶贝塞尔公式的推导来理解一下这个推导公式的由来。先来看下网上流传已久的几张贝塞尔动图:

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

在这三张图中最重要的部分是我们需要理解变量t。t的取值范围是0-1。从上面的gif中也可以看出来似乎曲线的绘制过程就是t从0到1的过程。嗯其实就是这样的。t的真实含义是什么呢?

在p0p1、p1p2、p2p3等等的起点到控制点再到终点的连线中,每段连线都被分割成了两部分(仔细看动图中的黑色、绿色、蓝色圆点),各段连线中两部分的比值都是相同的,比值范围是0到1,而这个比值就是t

来看下面的一阶贝塞尔曲线示意图:

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

pt是p0p1上的任意一点,p0pt / ptp1 = t。从而我们可以引出下面的推导

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

此时t为时间,v为速度。我们可以看做从p0到p1的距离等于固定速度乘以固定时间

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

故到p上某一点的时间为固定的速度乘以某个时间值。同时固定的速度已经已经可以表示为上面的推导公式。此时等式右边就形成了t(0,1) / t;即相当于某个时间值 / 固定时间值,即产生了我们一开始所强调的变量t,其取值范围为[0,1]。从而下面的等式也就比较好理解了。

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

至此一阶贝塞尔曲线我们已经推到了出来,其中变量为起点、终点与比值t。

那么二阶公式如何从一阶过渡过去呢?

来看下面这张图:

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

其中Pp(t)的经过路径就是我们所求的二阶贝塞尔曲线,那么其实我们也可以将其从一阶进行演变:

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

我们先将pa、pb两个点所连线段当做一阶曲线,之后再由两端一阶曲线分别表示pa、pb,最后就得到了我们的二阶曲线公式。仔细观察就能发现这和我们最初的完整公式是相同的:

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

其中n选择不同数值时就可以得出不同阶的曲线公式。同时从上面的推导过程也可以知道,不论是几阶曲线,我们都可以完全由一阶来表示,而这个“表示”的过程就是我们在上面看到的形成动画中那些辅助线。故可以感受下作者自己写的曲线形成动画中的效果,每段辅助线均由一阶曲线形成:

canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

相关地址

物体跟随复杂曲线轨迹运动

当我们知道曲线的公式有何而来之后,如何让小球沿着曲线运动就很好理解了。我们生成的每段曲线都是可以用公式表示出来的,也正因如此我们就可以得到每个t值时的曲线坐标点。从而知道物体的绘制坐标。

//核心逻辑
LinearGradient.prototype.drawBall = function() {
    var self = this
    var item = ctrlNodesArr[ctrlDrawIndex] 
    //存储了各段曲线的控制点
    //各段曲线均为三阶贝塞尔,故下面计算x,y值代入到了三阶公式中
    var ctrlAx = item.cAx,//各个控制点
        ctrlAy = item.cAy,
        ctrlBx = item.cBx,
        ctrlBy = item.cBy,
    ...
    if(item.t > 1) {
        ctrlDrawIndex++ //当一段曲线的t>1说明曲线已经走到头
    }else {
        self.ctx.clearRect(0, 0, self.width, self.height)
        item.t += 0.05
        var ballX = ox * Math.pow((1 - item.t), 3) + 3 * ctrlAx * item.t * Math.pow((1 - item.t), 2) + 3 * ctrlBx * Math.pow(item.t, 2) * (1 - item.t) + x * Math.pow(item.t, 3)
        var ballY = oy * Math.pow((1 - item.t), 3) + 3 * ctrlAy * item.t * Math.pow((1 - item.t), 2) + 3 * ctrlBy * Math.pow(item.t, 2) * (1 - item.t) + y * Math.pow(item.t, 3)
        //代入三阶贝塞尔曲线公式算出小球的坐标值
        self.ctx.beginPath()
        self.ctx.arc(ballX, ballY, 5, 0, Math.PI * 2, false)
        self.ctx.fill()
    }
    if(ctrlDrawIndex !== ctrlNodesArr.length) {
        window.requestAnimationFrame(newMap.drawBall.bind(self))
    }
}

最后

demo地址:这里✨✨

源码地址:欢迎star

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3模拟jq点击事件的实例代码
Jul 06 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
html+css实现文字折叠特效实例
Jun 02 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 HTML / CSS
CSS的calc函数用法小结
Jun 25 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 #HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 #HTML / CSS
H5混合开发app如何升级的方法
Jan 10 #HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
Jan 09 #HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 #HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 #HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 #HTML / CSS
You might like
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
js实现表格数据搜索
2020/08/09 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
python plotly画柱状图代码实例
2019/12/13 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
python编写实现抽奖器
2020/09/10 Python
中软Java笔试题
2012/11/11 面试题
药学专业个人自我评价
2013/11/11 职场文书
《乞巧》教学反思
2014/02/27 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
大专生求职信
2014/06/29 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
英语读书笔记
2015/07/02 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书