登录  /  注册

贝塞尔曲线的应用详解

零下一度
发布: 2017-06-29 11:30:20
原创
4506人浏览过

简介

贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果。

使用贝塞尔曲线常用的两个网址如下:

缓动函数:

cubic-bezier:

如何用贝塞尔曲线画曲线

一个标准的3次贝塞尔曲线需要4个点:起始点、终止点(也称锚点)以及两个相互分离的中间点。

无论SVG, Canvas还是CSS3动画,都牵扯到这4个点。

SVG和贝塞尔曲线的结合

svg可缩放矢量图形(Scalable Vector Graphics)、二维、XML标记,类似下面:

<svg>
  <path></path></svg>
登录后复制

SVG的代码不具体展开(说开了可以连载好几篇),提一下其中一个path的标签,可以绘制任意的路径,自然也包括和贝塞尔搞基。

三次贝塞尔曲线指令:C x1 y1, x2 y2, x y两个控制点(x1,y1)和(x2,y2)(x,y)代表曲线的终点。字母C表示特定动作与行为,这里需要大写,表示标准三次方贝塞尔曲线。

看看下面一些描述贝塞尔曲线的代码(片段),大家可以好好地感受下(其中字母M表示特定动作moveTo, 指将绘图的起点移动到此处)。

<svg>
  <path></path>
  <path></path>
  <path></path>
  <path></path>
  <path></path>
  <path></path>
  <path></path>
  <path></path>
  <path></path></svg>
登录后复制

曲线效果类似下面这张图:

可以看到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代码:

<div></div><div></div>
登录后复制

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:

<path></path>
登录后复制

CSS3贝塞尔起点是0,0; 终点是1, 1;

cubic-bezier(x1,y1, x2,y2)
登录后复制

以上就是贝塞尔曲线的应用详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号