关键词：
【中文标题】FabricJS：延迟重复动画【英文标题】：FabricJS: Repeating an animation with a delay 【发布时间】：2017-12-04 08:38:28 【问题描述】：所以我正在使用 Fabric JS 为圆圈设置动画，如下所示：
var clickedPulse = new fabric.Circle(
radius: 5,
fill: 'rgba(0,0,0,0)',
stroke: 'rgba(0,0,0,0.7)',
strokeWidth: 3,
left: options.e.layerX,
top: options.e.layerY,
selectable: false,
hasBorders: false,
hasControls: false,
originX: 'center',
originY: 'center'
)
canvas.add(clickedPulse);
clickedPulse.animate(
radius: 100,
opacity: 0
,
onChange: canvas.renderAll.bind(canvas),
duration: 700,
onComplete: function()
clickedPulse.remove();
canvas.renderAll();
);
这对我来说很好 - 它为 1 个圆圈设置动画，增加它的半径并降低它的不透明度，直到它最终消失。
我想要的：是 3 个圆圈，都做相同的动画，只是每个圆圈彼此延迟 - 最终效果就像从中心点向外移动的 3 个涟漪。
如何最好地使用 Fabric JS 实现这一目标？我考虑过只是重复相同的动画，但每次都使用 setTimeout 来延迟它。我可以使用更好的方法吗？
【问题讨论】：
【参考方案1】：setTimeout 应该是您动画的最佳解决方案，但您也可以检查 fiddle，它只是更改持续时间和半径。
for (var i = 1; i < 4; i++)
var clickedPulse = new fabric.Circle(
radius: 5,
fill: 'rgba(0,0,0,0)',
stroke: 'rgba(0,0,0,' + (1 - i / 4) + ')',
strokeWidth: 5,
left: 150,
top: 150,
selectable: false,
hasBorders: false,
hasControls: false,
originX: 'center',
originY: 'center'
)
canvas.add(clickedPulse);
clickedPulse.animate(
radius: 100 - i*15,
opacity: 0
,
onChange: canvas.renderAll.bind(canvas),
duration: 600 + i*200,
onComplete: function()
clickedPulse.remove();
canvas.renderAll();
);
【讨论】：
延迟按钮动画CSS [重复]
】延迟按钮动画CSS[重复]【英文标题】：delayedbuttonanimationCSS[duplicate]【发布时间】：2019-08-1515:04:56【问题描述】：我希望在打字动画完成后显示“输入”按钮。如果我在动画之前设置display:none，即使在动画完成后也不会显示。我... 查看详情
更改触摸延迟：fabricjs 中的长按
】更改触摸延迟：fabricjs中的长按【英文标题】：changedelayfortouch:longpressinfabricjs【发布时间】：2019-12-1615:43:30【问题描述】：我将更改fabric.js中longpress的延迟（使用eventjs构建），但没有改变。我做错了什么？canvas.on(\'touch:longpress... 查看详情
在 UIView 动画循环中重复延迟？
】在UIView动画循环中重复延迟？【英文标题】：RepeatthedelayinaUIViewanimationloop?【发布时间】：2013-06-0507:10:05【问题描述】：我正在尝试对视图不透明度进行自定义动画，如下所示：延迟5秒；（视图将保持不透明5秒）从不透明度值... 查看详情
添加或删除对象时如何添加动画 - Fabricjs
】添加或删除对象时如何添加动画-Fabricjs【英文标题】：Howtoaddanimationwhenaddingorremovinganobject-Fabricjs【发布时间】：2017-06-1314:12:50【问题描述】：我将FabricJS用于我的图像处理库。我想知道如何将动画添加到画布中/从画布中删除的... 查看详情
带有pageSnap的FabricJS奇怪的线条动画
】带有pageSnap的FabricJS奇怪的线条动画【英文标题】：FabricJSweirdlineanimationwithpageSnap【发布时间】：2017-01-1508:13:33【问题描述】：我正在使用FabricJS创建JS线条动画并使用PageSnapJS创建捕捉部分。但是，线条动画行为是非常随机的。... 查看详情
jQuery排队动画序列有延迟；需要重复
】jQuery排队动画序列有延迟；需要重复【英文标题】：Jqueryqueuedanimationsequencewithdelay;needtorepeat【发布时间】：2012-09-2423:07:54【问题描述】：我需要下面的代码，它会为一系列图像设置动画，运行然后无限期地重复。目前它在页面... 查看详情
FabricJS动画：鼠标：向上和：向下期间画布上的选定对象
】FabricJS动画：鼠标：向上和：向下期间画布上的选定对象【英文标题】：FabricJSanimating:selectedobjectoncanvasduringmouse:upand:down【发布时间】：2017-09-1405:39:34【问题描述】：我正在尝试使用FabricJS在任何对象被选中时为其设置动画。Sow... 查看详情
延迟 SwiftUI 中的重复动画，在完整的自动反转重复周期之间
】延迟SwiftUI中的重复动画，在完整的自动反转重复周期之间【英文标题】：DelayarepeatinganimationinSwiftUIwithbetweenfullautoreverserepeatcycles【发布时间】：2020-12-3015:57:51【问题描述】：我正在使用SwiftUI构建一个AppleWatch应用，它可以读取... 查看详情
FabricJS：始终在画布上居中对象
】FabricJS：始终在画布上居中对象【英文标题】：FabricJS:AlwaysCenterObjectonCanvas【发布时间】：2013-06-2015:31:05【问题描述】：是否可以在fabricjs画布上始终将对象居中？背景：我正在构建一个web工具，可以很容易地使用fabricjs创建复... 查看详情
重复 CAAnimation 之前的延迟
】重复CAAnimation之前的延迟【英文标题】：DelaybeforerepeatingaCAAnimation【发布时间】：2013-10-2322:10:46【问题描述】：你有一个简单的核心动画：NSString*keyPath2=@"anchorPoint.y";CAKeyframeAnimation*kfa2=[CAKeyframeAnimationanimationWithKeyPath:keyPath2];[kfa2... 查看详情
在Java中延迟一个循环以获得动画效果
】在Java中延迟一个循环以获得动画效果【英文标题】：DelayaloopinJavaforanimationeffect【发布时间】：2013-03-0217:58:45【问题描述】：我知道这是一个重复的问题。但是，没有答案帮助我解决了我的问题。我正在Vaadin做一个项目。因为... 查看详情
使用随机坐标重复 UIAnimation
...:28:57【问题描述】：我正在尝试创建一个动画，以给定的延迟将屏幕上的圆圈移动到随机点。然而，我的问题是当我打电话重复动画时。它将我的圆圈移回原点，并以完全相同的坐标重复该精确动画。有没有办法让我制作一个每... 查看详情
jQuery.animate() 似乎将持续时间参数作为延迟 [重复]
】jQuery.animate()似乎将持续时间参数作为延迟[重复]【英文标题】：jQuery.animate()seemstotakedurationparameterasadelay[duplicate]【发布时间】：2015-07-2420:37:46【问题描述】：我在让我的动画与jQuery一起工作时遇到了最大的麻烦。我的目标是将... 查看详情
将背景图像动画到另一个 - CSS/JQuery [重复]
...题描述】：我的HEADER元素有一个背景图像，我需要在3秒延迟后将其换成另一个图像，我在互联网上找遍了，我找不到解决方案！我已经尝试过CSS3和Jquery，但我无法让它工作。由于网站的构建方式，它必须是发生变化 查看详情
UIKeyboardWillHideNotification 动画延迟
】UIKeyboardWillHideNotification动画延迟【英文标题】：UIKeyboardWillHideNotificationdelayinanimation【发布时间】：2016-08-0111:04:37【问题描述】：我已经注册了两个UIKeyboardNotifications（keyboardWillShow和keyboardWillHide）并且都被触发了。当文本字段... 查看详情
背景图像导致动画 popViewController 延迟/滞后
】背景图像导致动画popViewController延迟/滞后【英文标题】：BackgroundImagecausinganimatedpopViewControllerdelay/lag【发布时间】：2020-10-3019:13:24【问题描述】：弹出视图控制器时动画出现延迟。我收到延迟的原因是因为我有背景图片。overrid... 查看详情
动画没有延迟？
】动画没有延迟？【英文标题】：Animatewithoutlag?【发布时间】：2013-04-2822:34:33【问题描述】：我目前正在使用以下代码为视图之间的过渡设置动画，当在此过程中调用refreshTheServers方法时，整个应用程序会冻结，刷新服务器，然... 查看详情
添加延迟动画时，UIView 动画不起作用
】添加延迟动画时，UIView动画不起作用【英文标题】：UIViewanimationsdonotworkwhenadelayedanimationisadded【发布时间】：2013-05-2317:29:30【问题描述】：我试图移动UILabel两次，但我的行为很奇怪。这是我的第一个动画：-(IBAction)doAnimation:(id)... 查看详情