@kivilin88888 写道:
想做个小游戏,在考虑技能的动画时 没什么头绪,
接着无意中看到了文档里面的绘制系统,觉得眼前一亮,于是考虑用绘图系统来制作一种极简风格的技能效果:用线条一笔画出技能的轮廓,比如龙卷风的特效,就是一笔画出长短不一的折线,技能释放完后再将折线原路一笔返回消失。 。。于是在各种线索指引下,翻了yoyo老师的github 翻了greensock 翻了raphael 翻了line coocoo的动画。。。最终决定敬而远之。。
好吧 我就只想做个不规则线条绘制的动画。。
然后翻到了vivus的js动画库 非常棒 就是我想要的
然而整个库的核心却是 动态地修改svg节点的某个css style 这个属性和虚线的绘制有关。。接着想去翻这个属性实现的源码 然而不知道去哪找2333
无奈之下 又回去看yoyo老师dash-line的实现源码
并且开始静下来思考如何实现不规则线条绘制动画
我们拿在手上的输入是两个:svg的pathstring 和动画持续时间 目标是用动画表现线条绘制过程。
对于规则的线段比如直线 矩形 圆 用各个顶点间的距离和动画时间就可以得出每帧应该lineTo到哪个位置
困难就在于 如何得出贝塞尔曲线在每帧应该如何画到贝塞尔曲线上,一开始我考虑的是移动贝塞尔曲线的end point 可是一个难题是second control point在哪才能保持贝塞尔曲线不会偏离原来轨迹。
至此陷入僵局。。。
直到我看到yoyo老师用lineTo的方式绘制贝塞尔曲线,才改变了思路:用动画表现贝塞尔曲线可以通过求出贝塞尔曲线上离散的点,再在每帧直接lineTo以直待曲 拟合贝塞尔曲线。
而实际上 贝塞尔曲线的参数方程就可以直接求得贝塞尔曲线上离散的点。。
帖子: 2
参与者: 1