通过使用paper.js,我想创建一个跟随对象移动的曲线变形动画。这种变形应该只是一个简单的变化,就像在CorelDraw中移动路径手柄一样,但是它应该跟随移动的对象。
这是到目前为止我所做的工作:
http://jsbin.com/luwosiniga/1/edit?js,output
主要问题在于:
var sigm_location = sigmoid_path.getNearestLocation(imi_logo.position);
sigm_location.segment.handleIn.x = 20;
即,我可以看到段点手柄已移动,但是路径形状保持不变,并且它也仅对第一个段执行此操作。控制台输出中的值(对于handleIn.x)为20。有什么建议吗?
另外,如果可以采用其他任何技术,那真是太好了……
最佳答案
我入侵了您创建的jsbin,并发现了一些问题。
我认为主要问题是sigmoid_path.smooth()
行。如果您评论说线条变形;平滑路径消除了变形。也许通过平滑路径开始每个事件,然后使线条变形。看起来,调整相邻线段的手柄可能会产生更令人愉悦的变形。
我相信您也想使用sigmoid_path.add(newPoint)
而不是lineTo
,因为您一次要添加一个细分。
如果您想看一下,我的修订版本就在这里:jsbin.com/sukolimavu/2/edit
一个小注意-在经过曲线的长度后,我关闭了onFrame处理程序-它有助于处理代码时的性能。
关于javascript - paper.js中的线条变形,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29435943/