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混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
css中:last-child不生效的解决方法
Aug 05 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遍历文件夹与子目录的函数代码
2011/09/26 PHP
php下获取http状态的实现代码
2014/05/09 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
jqTransform美化表单
2015/10/10 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
老生常谈python中的重载
2018/11/11 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
营业员演讲稿
2013/12/30 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
单位工作证明
2014/10/07 职场文书
合同审查法律意见书
2015/06/04 职场文书
单位收入证明范本
2015/06/18 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书