- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Snap.svg为 13 个 SVG 制作动画。所有 SVG 都从一个点开始,然后通过其他几个动画(通过回调)进行动画处理。下面用代码描述了我的动画的一个简化示例:
var reset = function(person) {
person.attr({transform: 't0,0', opacity: 0});
animatePerson(person);
};
var animatePerson = function(person) {
person.animate({opacity: 1}, 300, null,function() {
person.animate({transform: 't100,20'}, 1000, null, function() {
person.animate({opacity: 0}, 300, null, function() {
reset(person);
});
});
});
};
var people = [Snap('#Person_1'), Snap('#Person_2'), Snap('#Person_3'), Snap('#Person_4'), Snap('#Person_5')];
我的第一次尝试是映射数组并为第一个动画设置超时,如下所示:
people.map(function(person, index) {
setTimeout(function() {
animatePerson(person);
}, (300*index));
});
但是这不起作用,因为 SVG 在循环时会开始相互重叠/超越。然后我尝试将超时设置为动画完整“一圈”所花费的时间长度,并将其除以 SVG 的总数,如下所示:
people.map(function(person, index) {
setTimeout(function() {
animatePerson(person);
}, (1600/people.length));
});
在 Snap.svg 或 JavaScript 中有没有一种方法可以使用回调和/或超时让动画循环,或者我离开这里?
这是我所指的完整动画的图像:
最佳答案
我这样做的一种方法是编写一个小函数,接收一个元素和一组预设动画,然后通过回调依次处理它们,如下所示...
编辑:稍作修改以便能够为每个动画包含不同的元素,下面的 example2 链接也包括包含每次调用的函数的选项。
function nextFrame ( frameArray, whichFrame ) {
if( whichFrame >= frameArray.length ) { return }
frameArray[ whichFrame ].el.animate(
frameArray[ whichFrame ].animation,
frameArray[ whichFrame ].dur,
frameArray[ whichFrame ].easing,
nextFrame.bind(null, frameArray, whichFrame + 1 )
);
}
然后你可以给它传递一个动画数组,像这样......
var myFrames = [
{ el: g, animation: { transform: 'r360,150,150' }, dur: 1000, easing: mina.bounce },
{ el: r, animation: { transform: 't100,-100s2,3' }, dur: 1000, easing: mina.bounce },
{ el: r, animation: { transform: 't100,100' }, dur: 1000, easing: mina.bounce },
{ el: g, animation: { transform: 's2,1' }, dur: 1000, easing: mina.bounce },
{ el: r, animation: { transform: 's1,2' }, dur: 1000, easing: mina.bounce },
{ el: c, animation: { transform: 's1,1' }, dur: 1000, easing: mina.bounce }];
然后你可以调用它
nextFrame( el, myFrames, 0 );
example (点击那里运行)
example 2 (这允许您包含要调用的函数及其一部分)
关于JavaScript 动画 : Handling Complex Animations That Use Callbacks & Loop,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31122570/
我想使用foreach 来等待线程终止。但是,出现以下错误,没有实现。请告诉我。 cannot move out of `*handle` which is behind a shared refer
如果在TypoScript中未配置给定的typeNum,则TYPO3将抛出Exception/CMS/1294587217。 背景:从另一个系统迁移到TYPO3后,我们遇到了许多此类异常,因为在那里使
我需要一个带有 2 个 handle 的 slider ,一个可拖动,另一个固定。我正在使用 Jquery UI slider 。这是我到目前为止尝试过的:http://jsfiddle.net/8K
给定文件的HANDLE(例如C:\\FolderA\\file.txt),我想要一个函数,该函数会将HANDLE返回到包含的目录(在前面的示例中,它将是C:\\FolderA的HANDLE)。例如:
我想通过Automic在Unix中检查文件。如果该文件不存在,则应切换主机并检查文件是否存在。 问题是,我现在不执行错误处理。 每当脚本对象正在处理并且找不到文件时,skript都会中止。我在skri
鉴于: fruitid('Apple', 'Granny Smith', 1). fruitid('Apple', 'Cox', 2). fruitid('Pear', 'Bartlett', 3).
我有一个基于Spring的Wicket应用程序。 有一个池化的数据源bean。 现在,当MySQL死了时,我得到了带有堆栈跟踪的默认Wicket错误页面。 我想处理这种情况,只允许某些页面完全显示(静
我希望能够一次查询多个句柄,其中表格具有相同的格式,例如: 句柄:8000,8001,8003表:foo 想要做这样的事情: x:hopen `8000`8001`8003 x select from
我对在Swift 3中引发自定义异常有些困惑。 在C++中,我可以执行此操作以立即停止方法中的进程,抛出错误并进行处理,而无需进一步进行操作。 void foo() { try {
我一直在阅读MSDN开发人员COM指南。但是this page上的代码令人困惑。在此处复制: The following code sample shows the recommended way o
我有一个计划的批处理文件每天都会启动的过程。如果有错误,我需要内置错误处理才能重启进程。所有这些在大多数情况下都有效,但是我每个月都会收到一次超时错误,所以这是不可避免的。该进程不会将错误级别输出到b
我正在尝试从 chartlyrics API 获取歌词。我编写了一个可以运行但不能在循环内运行的 R 函数。我的脚本是: library(httr) library(RCurl) library(XM
在libuv事件循环中调用prepare handle callback和check handle callback的原因是什么? 最佳答案 I/O 操作发生在这两者之间,因此您可能希望在阻塞 I/O
我正在尝试在 R 中安装 BTYplus 包。 devtools::install_github("mplatzer/BTYDplus", dependencies=TRUE) library(BTY
我有一个Arduino,可以使用pySerialTransfer库通过串行与Mac正常通信,并且可以运行数小时。然后是某种形式的串行中断-尽管一夜间发生时我一直无法确定原因,但只要从笔记本电脑上拔下A
我是hooks和async/await的新手。我正在尝试处理Axios调用中的错误,并且不确定如何使用then/catch或try/catch处理我的API调用中的错误。 在基于类的React中,我将
我正在尝试向脚本中添加一些内容,以便让我知道我复制的文件是否已被完全复制。 基本上,我要压缩一堆文件,然后将它们发送到网络上的映射驱动器。然后,一旦文件被成功复制,我将脚本删除原始位置的文件。该脚本可
我有一个圆形 slider ,其中绘制了一条贝塞尔弧,一个圆弧在 slider 的起点和终点有两个 handle ,圆弧是在圆形 slider 中绘制的。 借助开始和结束 handle ,我可以沿着圆
删除 NULL 指针是安全的。 int* p = NULL; delete p; // ok, secure 句柄是什么? HANDLE h = NULL; CloseHandle(h
如果您没有在 dojo.connect 期间返回的“句柄”,您如何删除 dojo 连接事件? 我的示例涉及将一组事件动态分配给一组对象。 (为简单起见,事件是 onclick 和 ondblclick
我是一名优秀的程序员,十分优秀!