贝塞尔曲线与CSS3动画、SVG和canvas的应用
简介
贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果。
使用贝塞尔曲线常用的两个网址如下:
缓动函数:http://www.xuanfengge.com/easeing/easeing/
cubic-bezier:http://cubic-bezier.com/
如何用贝塞尔曲线画曲线
一个标准的3次贝塞尔曲线需要4
个点:起始点、终止点(也称锚点)以及两个相互分离的中间点。
无论SVG, Canvas还是CSS3动画,都牵扯到这4个点。
SVG和贝塞尔曲线的结合
svg可缩放矢量图形(Scalable Vector Graphics)、二维、XML标记,类似下面:
<svg width="160px" height="160px"><path d="M10 80 ..." /> </svg>
SVG的代码不具体展开(说开了可以连载好几篇),提一下其中一个path
的标签,可以绘制任意的路径,自然也包括和贝塞尔搞基。
三次贝塞尔曲线指令:C x1 y1, x2 y2, x y
两个控制点(x1,y1)
和(x2,y2)
,(x,y)
代表曲线的终点。字母C
表示特定动作与行为,这里需要大写,表示标准三次方贝塞尔曲线。
看看下面一些描述贝塞尔曲线的代码(片段),大家可以好好地感受下(其中字母M
表示特定动作moveTo
, 指将绘图的起点移动到此处)。
<svg width="190px" height="160px"><path d="M10 10 C 20 20, 40 20, 50 10" stroke="3" fill="none"/><path d="M70 10 C 70 20, 120 20, 120 10" stroke="3" fill="none"/><path d="M130 10 C 120 20, 180 20, 170 10" stroke="3" fill="none"/><path d="M10 60 C 20 80, 40 80, 50 60" stroke="3" fill="none"/><path d="M70 60 C 70 80, 110 80, 110 60" stroke="3" fill="none"/><path d="M130 60 C 120 80, 180 80, 170 60" stroke="3" fill="none"/><path d="M10 110 C 20 140, 40 140, 50 110" stroke="3" fill="none"/><path d="M70 110 C 70 140, 110 140, 110 110" stroke="3" fill="none"/><path d="M130 110 C 120 140, 180 140, 170 110" stroke="3" fill="none"/> </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 id="ball"></div> <div id="floor"></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 d="M0 0 C x1 y1, x2, y2, 1 1"/>
CSS3贝塞尔起点是0,0
; 终点是1, 1
;
cubic-bezier(x1,y1, x2,y2)
参考地址:贝塞尔曲线与CSS3动画、SVG和canvas的基情
转载于:https://www.cnblogs.com/moqiutao/p/7089436.html
贝塞尔曲线与CSS3动画、SVG和canvas的应用相关推荐
- 贝塞尔曲线与CSS3动画、SVG和canvas的基情
一.甚忙,短言之 最近谷歌那谁谁因为自己的相好被老大抢了,就去小米了!狗血的三角关系要比烂掉的TVB神剧好看多了. 但这只是小菜,贝塞尔曲线才是很角色,因为有外国血统,因此,和CSS3动画.SVG以及 ...
- 贝塞尔曲线是什么?如何用 Canvas 绘制三阶贝塞尔曲线?
大家好,我是前端西瓜哥. 今天谈谈贝塞尔曲线是什么以及它的原理,并说说如何用 Canvas 技术绘制一条三阶贝塞尔曲线. 贝塞尔曲线是什么? 贝塞尔曲线,是通过几个简单的参数描述一条曲线的一种参数曲线 ...
- 贝塞尔曲线工具css,贝塞尔曲线以及css动画 | Soo Smart!
参考文档:http://www.cnblogs.com/dolphinX/p/4087817.html CSS3的动画:http://www.w3school.com.cn/css3/css3_ani ...
- Android 利用二阶贝塞尔曲线自定义弧形动画
我们先看效果 实现思路 我的思路是给自定义view(蓝色圆圈)设置值动画,值动画的估值器自定义为二阶贝塞尔曲线的估值器,至于什么二阶贝塞尔曲线,网上有很多教程,大家百度一下吧. 代码 这个项目就不贴出 ...
- 贝塞尔曲线下的动画效果
最近有一个需求是这样的:点赞后变化的数字从VIew的底部上浮到label的text的对应的需要改变的数字位置,替换该数字.(也就是说,如果点赞前该数字是158,点赞后变成159,那么从View底部飘上 ...
- 贝塞尔曲线之购物车动画效果
Question 贝塞尔曲线是什么? 贝塞尔曲线可以做什么? 怎么做? What is it ? 贝塞尔曲线在百度定义是贝塞尔曲线(Bézier curve),又称 贝兹 曲线或贝济埃曲线,是应用于二 ...
- 使用贝塞尔曲线设计飞升动画
在游戏中,资源的获取或者奖励的获得,都会有一个简单的动画,以提高用户体验. 引擎cocos creator 语言JavaScript 需求 1.在资源点开始要做个简单的出现的动画,之后停顿很短时间,让 ...
- css3动画+svg实现水球进度条
背景
- CSS3动画那么强,requestAnimationFrame还有毛线用--摘抄
CSS3动画那么强,requestAnimationFrame还有毛线用? 这篇文章发布于 2013年09月30日,星期一,19:12,归类于 web综合. 阅读 197124 次, 今日 84 次 ...
最新文章
- 全面综述:图像特征提取与匹配技术
- 给定二叉树先序、中序遍历序列,求后序遍历
- 通俗易懂解释知识图谱
- 什么是野指针和内存泄露?如何避免野指针
- python 文件时间戳_调整目录文件时间戳脚本 python
- Nginx(三):反向代理
- failed to open stream :HTTP request failed 解决方法
- 2019-5-6作业
- 基于移动最小二乘的图像变形
- hive map 转string_Hive之SELECT语句的实用技巧 (一) | 每日五分钟学大数据
- 数论入门整理(updating)
- python sphinx_Python Sphinx 生成简洁大方的文档
- 基于html5贪吃蛇小游戏,H5 canvas实现贪吃蛇小游戏
- 5G NR 系统消息
- B站付费视频使up主掉粉过万
- CGB 2107 2021.8.18 笔记
- 给电脑重装系统后Win11如何重置记事本?
- Picker 选择器
- 【大厂算法系列】学数据结构与算法有用吗?时间与空间复杂度的定义与计算
- 瓜子二手车逃离行业“不可能三角”?
热门文章
- (转)Android 使用com.j256.ormlite
- 基于jQuery的图片异步加载和预加载实例
- 利用OpenCV的imread将RGB图像转化为灰度图像
- 如何解决 未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0” 提供程序
- lamp 独立mysql_lamp or lnmp 环境搭建之独立安装mysql数据库
- 01H5-fe-html5-005插入音频
- 大数据处理平台与案例
- 关于版本号:alpha、beta、rc、stable
- 当城市实现完全自动驾驶,车该怎么开?人该怎么走?
- 全方位讲解硬件防火墙的选择