Question

我目前有以下工作fiddle

var moveAnim = Raphael.animation({ progress: 1 }, 5000, 'bounce').repeat(Infinity);

我沿着一条线设置一个圆圈。

我也想让圈子同时闪现，但我似乎找不到办法来做到这一点？

我考虑过将圆圈添加到一个集合并将其他动画应用于此但我无法看到这个：

有什么想法吗？

Answer 1

这是一个黑客，我没有试图隐藏它，但它可以做得更好。

根据你想要如何设置闪光灯的动画，会出现一些问题。主要的问题是在同一个对象上有2个同步动画，因为拉斐尔不这样做（据我所知）。如果要为备用属性设置动画而不是相同属性，则更容易。如果要为比例设置动画以指示闪光，则需要将比例变换附加到路径变换字符串（'t，s'）的末尾。

此处示例，只使用不透明度属性。

最好的方法可能是包含一些能够计算出时间并在动画函数中手动修改属性的东西（paper.customAttributes.progress）。但是，这可能需要更长的时间。

另一种选择可能是在屏幕上为另一个对象制作动画，为您完成所有计算。感觉有点难看，但应该有用。

所以早些时候我们在屏幕外创建一个虚拟对象......

var dummy = paper.circle(-100,-100,10).attr({ opacity: 0 });

在进度功能中，您可以将实际圆圈不透明度设置为与屏幕外的不透明度相同。

this.attr('opacity', dummy.attr('opacity'));

我们稍后会触发虚拟动画

dummy.animate(flashingAnim);

jsfiddle

如上所述，我认为有更简洁的方法，但可能涉及你单独编写一个小的线性动画功能，但这可能有助于性能不是一个问题，你不介意在dom中的额外元素。

Answer 2

我想出的另一种解决方案是循环回调。循环回调的声音听起来很难听，但我想这就是动画是什么？

看起来您可以将多个动画附加到元素上！这是一个an example

function animateIn() {
        flashingCircle.animate({ fill: '#f00' }, 1000, animateOut);
    }
    function animateOut() {
        flashingCircle.animate({ fill: '#fff' }, 1000, animateIn);
    }
    animateIn();

RaphaelJS多个动画相同的元素

2 个答案: