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中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
css3学习心得分享
Aug 19 HTML / CSS
css3圆角边框和边框阴影示例
May 05 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 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
PHP 中的类
2006/10/09 PHP
数据库中排序的对比及使用条件详解
2012/02/23 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
vue中轮训器的使用
2019/01/27 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
[00:35]可解锁地面特效
2018/12/20 DOTA
python错误处理详解
2014/09/28 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
VC++笔试题
2014/10/13 面试题
如何开启linux的ssh服务
2015/02/14 面试题
全神贯注教学反思
2014/02/03 职场文书
物理研修随笔感言
2014/02/14 职场文书
仓库主管岗位职责
2014/03/02 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
2014年电厂工作总结
2014/12/04 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
python flask框架快速入门
2021/05/14 Python