Javascript anime.js：如何反转svg变形

我试图设置

方向：'reverse'

和

timeline.reverse（）

，但它不起作用。如果我设置了

循环：true

，则可以在循环中看到反向动画。但我想通过一个按钮来触发它。这是一个和

函数doFunction（）{
变量路径=[
{id:#path309'，d:'m 55.184523127.42857 34.962798139.6183 43.46726120.24702 z'，
{id:'路径311'，d:'m 54.389347121.02185-10.922087，-0.77483 11.717263,7.18155 z'}
];
var timeline=anime.timeline（{autoplay:true，direction:'alternate'，loop:false}）；
forEach（函数（路径、索引）{
时间线
.添加({
目标：path.id，
d:{
值：path.d，
持续时间：1000，
放松：'轻松外四'
},
偏移量：1000+10*索引
});
});
}

---

使用

timeline.reverse（）

可以反转要设置动画的时间线的方向

我将时间线放置在一个包含范围内，因此您不必在每次单击时重建时间线，只需在单击发生时将其反转即可

我还使用事件侦听器绑定函数，而不是html内联事件侦听器

使用

animejs

v2.2.0非常重要，因为

offset

和

timeline

方面的API在较新版本中已更改，因此此示例在较新版本中无法正常工作

以下是纯JavaScript示例：

/**
*我们从一个作用域函数开始，将时间线存储在那里
*/
+功能（按钮）{
/**
*一个知道我们是否需要调用reverse的标志，我们不应该在第一次单击时调用
*/
var firstRun=true；
变量路径=[
{id:#path309'，d:'m 55.184523127.42857 34.962798139.6183 43.46726120.24702 z'，
{id:'路径311'，d:'m 54.389347121.02185-10.922087，-0.77483 11.717263,7.18155 z'}
];
/**
*禁用自动播放，我们不想越狱。
*如果是，请删除firstRun变量，如果是，请检查。
*/ 
var timeline=anime.timeline（{autoplay:false，direction:'alternate'，loop:false}）；
forEach（函数（路径、索引）{
时间线
.添加({
目标：path.id，
d:{
值：path.d，
持续时间：1000，
/**
*我更改了你选择的转换，因为延迟
*您的转换之前导致了几乎秒的延迟
*它开始制作动画。
*/
放松：“放松外正弦”
},
偏移量：1000+10*索引
});
});
/**
*正在收听单击按钮的声音
*/
addEventListener（'click'，function（）{
/**
*如果动画已运行，请反转时间线
*/
如果（！firstRun）{
timeline.reverse（）；
}    
/**
*播放动画！
*/ 
timeline.play（）；
/**
*我们已经运行了一次。是时候让时间线反转了。
*/
firstRun=false；
});
}（document.getElementById（“clickMe”）

谢谢您的回答。我试图用vue.js重现这一点，但不幸的是，
timeline.reverse（）
无法缓解，它只是跳回。你能看一下吗？是的，问题是你每次都要重建时间表。您只需构建一次时间线。然后行动起来。你不记得状态，你做了反转或者别的什么，但这不是它的工作原理，你每次开始反转后都需要反转，因为时间线的状态是如何改变的。我来看看如何修改你的钢笔，使它能正常工作。但您应该在原始问题中添加一点，即您希望它与vue一起使用，即使核心概念保持不变。@saitam我在我的答案中添加了一个新的片段，以说明如何使用我在vue.js中的答案中提到的概念。您可以在