canvas 实现光线沿不规则路径运动

canvas 实现光线沿不规则路径运动

此文章为原创,请勿转载
1.svg实现
2.canvas实现
3.坑点

svg让动画沿着不规则路径运动

查阅svg文档后发现,svg动画运动有两种实现方式,且都非常简单,但对于100%实现设计师给出的效果有很大的距离

使用offset-path偏移路径和offset-roate偏移角度让元素沿着不规则路径走

	
	
	
		offset-path/offset-roate
	
	
	
		

路径偏移

角度偏移

此种方式的限制是滚动元素无法随路径进行没有规律的变化

使用stroke-dasharray和stroke-dashoffset让路径边线动起来

stroke-dasharray:设置shap和text 边框虚线的实线长度与实线之间的间隔(虚线长度)
stroke-dashoffser:设置边框线条相对于默认位置的偏移(正值:向左,负值:向右)

	
	
	
		stroke-dasharray/stroke-dashoffser
	
	
	
	

设置stroke-dasharray

storke-dasharray设置为80 ,此时实线和实线间隔一样 storke-dasharray设置为80 320,此时实线和是实线间隔的1/4

设置stroke-dashoffset让边线相对于初始位置发生偏移

通过设置stroke-dasharray 和 stroke-dashoffset让边线动起来

此种方式通过边框偏移的效果可以设置跟随路径的滚线条,但是无法设置线条的光线效果,即实线的阴影和实线的渐变效果(渐变区域需随着偏移路径的变化而变化)

canvas实现线条延不规则路径运动

线条实现

对于不规则路径,如果直接用画线条的方式实现光线,需要计算每一个开始点和结束点的位置,中间还可能存在转折点,计算起来非常麻烦,不可取
故这边采取canvas组合图形的模式,取线条和一个图形重叠部分(类似于灯罩)来实现光线效果
组合前
canvas 实现光线沿不规则路径运动_第1张图片
组合后
canvas 实现光线沿不规则路径运动_第2张图片

	
	
	
		canvas实现不规则路径光效
	
	
	
		

让线条动起来

当我们实现好线条剩下就需要让线条动起来,由于线条是通过灯罩的方式来实现的,让线条运动只需要让灯罩动起来就好
canvas 实现光线沿不规则路径运动_第3张图片

	
	
	
		canvas实现不规则路径光效
	
	
	
		

这种实现方式也有一定的条件限制,那就是路径可大体抽象成为一个有一定规律的图型或者线条,比如上面demo中路径可抽象成为一个矩形的两边,或者是2条连接的直线
我们必须从没有具体规则的路径中抽象出一个大体的规则,不同路径规则不同
上面的例子就是将不规则路径抽象成了一个直角的规则路径
canvas 实现光线沿不规则路径运动_第4张图片

可优化点

这边找到了2个可优化的点
1.时间方向上: 为了让动画消耗较小,代码中的定时器已经用的是requestAnimationFrame, 但是由于光线的特殊性(自带模糊效果),为了性能更加,尝试了2次requestAnimationFrame调用一次绘图的方式,效果较前者未有明显区别
2.绘图方向上: 从上图可发现,灯罩每次只圈出路径的一部分,故绘图中不需要每次都绘制全部路径,只需要找出灯罩前后的路径点,将这一段路径绘制出来就好

坑点

在完成这个动动画效果之后遇到一个至今原因不明的bug,随着屏幕放置时间的变长,动画越来越慢,打开任务管理器,未见内存泄漏或者cpu使用率过高。打开performance,发现页面调帧严重,屏幕帧数越来越低,单个Frame CPU time越来越长,范围来看,script和render和paint耗时未发生线性变化,只有system时间越来越来长,越来越长,期望能被大佬告知原因
一开始
canvas 实现光线沿不规则路径运动_第5张图片

到后来
canvas 实现光线沿不规则路径运动_第6张图片

解决的办法较为...,光线每循环一个周期,我销毁了之前的canvas并新建了canvas,上层规避了system time不知道为什么越来越长的问题
chrome版本:80.0.3987.163(正式版本) (64 位)

你可能感兴趣的:(canvas 实现光线沿不规则路径运动)