跳到主要内容

2 篇博文 含有标签「动画」

查看所有标签

解析 ECharts 设计:UniversalTransition 动画

· 阅读需 12 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2023-11-11 21:56:00

ECharts 的 UniversalTransition 动画提供了一些复杂场景下过渡动画的解决方案,这类场景的难点在于让不规则图形或者不同形状的图形之间如何完成一个比较流畅的过渡动画,在业内比较熟知的类似技术则是 SVG Morph 动画。

查看以下 ECharts 官方示例:

从贝塞尔曲线的计算感受数学建模的魅力

· 阅读需 8 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2022-05-03 20:38:00

最近在做前端可视化相关的东西,在完成动画效果时,遇到一个不是很好处理的问题,需要让一个元素在画布上以曲线的轨迹进行运动。因为动画这块之前基本也没有怎么接触过,做的也都是简单的线性动画效果,所以碰到这个需求点的时候觉得是有点难度的。

其实,要真的实现按照一定曲线轨迹运动的效果倒也不难,毕竟圆、椭圆方程在平时做布局计算的时候用的也挺多的。但是,用圆或者椭圆计算曲线相当于是找了个特殊场景,不具备通用性;另一方面,说到曲线的绘制,贝塞尔曲线是绕不开的,这也是非常值得考虑的方案。