动画一条线答案

【问题标题】：Animating a line动画一条线
【发布时间】：2015-04-22 22:14:36
【问题描述】：

我有一个线对象，我正在尝试使用 TimelineLite 制作动画。由于时间轴函数中的第一个参数是元素，我将如何使用 line 对象来做到这一点？

function animatedLine(name, x1, y1, x2, y2, stroke, width, duration){
    this.name = name;
    this.x1 = x1;
    this.x2 = x2;
    this.y1 = y1;
    this.y2 = y2;
    this.stroke = stroke;
    this.width = width;
    this.duration = duration;
}
var line1 = new animatedLine("R01", 0, 0, 0, 100, "black", 3, 3);

所以基本上，这条线的起点是 x1，y1。或者，({"left": x1, "top": y1}) 如何使线条垂直动画，使高度等于y2 的值，而线条的宽度等于width 的值？

【问题讨论】：

真的不清楚您要做什么。您如何尝试将线条动画化为图像？请提供一个小提琴示例。
我假设这是一个 SVG？我怀疑你是否可以使用 JS 为实际用作 img 元素的 SVG 设置动画……但我很想看看你是否可以。
废话。对不起，我说的是线条，不是图像。我正在更新问题。
@Paulie_D 实际上，它是 Canvas，而不是 SVG。

标签： jquery css gsap

【解决方案1】：

几天前我发布了类似的回复：https://stackoverflow.com/a/29703593/3344111。

不确定这是否是您正在寻找的东西。

塔希尔。

【讨论】：

我正在使用 TimelineLite，但我希望有一种方法可以不使用 GreenSock。
好吧 TimelineLite 在这种情况下什么也不做，只是分别从 x1 和 y1 到 x2 和 y2 进行 destX 和 destY。正如您在 render 方法中看到的那样，Canvas 仍在渲染整个内容。因此，可以用您控制上述变量的进度来替换 GSAP。但是您将失去ease，变量将随着这些变量前进。除非您也想编写自定义程序以简化自己。顺便说一句，你为什么不想再使用 TimelineLite 了？
我认为 TimelineLite 和所有 GSAP 产品都很棒。我只是想自己学习如何做这些事情。
他们当然是有原因的。但如果你真的想深入挖掘，我认为这些与画布相关的动画东西的一个很好的起点是Keith Peters 的Coding Math 视频教程系列。
是的，就像我说的，我真的很喜欢 GSAP 的产品，并且使用这样的框架没有任何问题。我只是想通过自己学习如何做来扩展我的知识库和技能。谢谢你的链接，我去看看。