微电路流光动效

全篇共 1162 字。按500字/分钟阅读,预计用时 2.3 分钟。此篇想法总访问 70 次,今日访问 8 次。

实现步骤分2部分:

  1. 流光沿折线或直线运动
  2. 随机生成45度转角

THREEJS中Curve类实现可获取PATH上各点位置的基类。

THREEJS类继承脑图之Curve by 帅华君

Curve类的实例包含以下方法:

.getPoint ( t : Float, optionalTarget : Vector ) : Vector
.getPointAt ( u : Float, optionalTarget : Vector ) : Vector
.getPoints ( divisions : Integer ) : Array
.getSpacedPoints ( divisions : Integer ) : Array

RUFF开发套件电路板

从视觉上讲,微电路板上不存在曲线线路,所以这里我使用自己的方法实现获取路径上的位置。

运动的流光需要确定首尾两个点的位置,这两个沿路经一前一后移动就形成了流光的动效。把电子流动的线当作对象,那么对象中应当包含每一个拐点的位置信息以及流光当前的位置。

[
  [0, 0],
  [0, 100],
  [100, 200],
  [100, 300]
]

上方代码片段表示四个节点(包含起始、终止位置),将这些数据作为输入数据,进入内部处理。

from: {
  x: points[ i ][ 0 ],
  y: points[ i ][ 1 ],
}

to: {
  x: points[ i+1 ][ 0 ],
  y: points[ i+1 ][ 1 ],
}

将输入数据解析为为电子流对象的节点属性。

不断调整电流前后两端点位置,使用canvas绘图上下文提供的创建线性渐变上下文创建线性渐变对象,并设置前后端点的颜色值。

上方为核心代码,电子流的折线被分解为多条线段,线段转换为函数方程式,如此便可以随着点落在x轴上的值得到点落在y轴上的值,这样就能得到点的位置。当这一过程不断重复,就能得到不断变化的点的位置信息。

当然还需要定义电子流一前一后的距离,以及电子流的流速。

定义方法自动创建45度拐角电子流。

发布日期 » 2018年7月14日 周六
原创声明 » 请勿复制转载,谢谢配合。
Airglass.js核心库
JavaScript核心概念
硬件编程、Arduino
文档翻译计划
微信开发
前端脚手架
运维
可视化
生活自有“道”理
视觉设计、用户体验
陈帅华的微信二维码