如何使用圣拉斐尔.animateWith（） [英] How to use Raphael .animateWith()

问题描述

有没有人使用 .animateWith（）在拉斐尔成功保持快速动画同步？这是记录不完整。图书馆的创建者具有视频演示但没有code，我可以找到。

Has anyone used .animateWith() in Raphael to successfully keep fast animations in sync? It is poorly documented. The library's creator has a video demonstration but no code I can find.

我有一个JavaScript节拍器，它由一个线（节拍器的手臂）和形状的权重梯形，最终将上下移动来表示节奏。我有一个工作小提琴这里和有问题的线路有：

I have a Javascript metronome that consists of a line (the arm of the metronome) and a trapezoidal shaped "weight" that will eventually move up and down to signify tempo. I have a working fiddle here, and the lines in question are:

        var ticktock = Raphael.animation({
            "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: function() { tick(this, repeats, done); }},
            "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: function() { tick(this, repeats, done); }}
        }, interval).repeat(repeats / 2);
        arm.animate(ticktock);
        weight.animateWith(arm, ticktock, ticktock);    

如果您检查出的小提琴，给它一个高节奏和大约20蜱，你应该看到手臂背后的重量滞后。 （请再试了几次，如果不是 - 墨菲定律等），我认为这是precisely什么animateWith（）prevented。也许我用它不正确。

If you check out the fiddle and give it a high tempo and about 20 ticks, you should see the weight lag behind the arm. (Please try it a few times if not -- Murphy's Law etc.) I thought this was precisely what animateWith() prevented. Maybe I am using it incorrectly.

如果你看一下在.animateWith的拉斐尔源（）功能，你看它同步每个动画的。开始参数，FWIW。

If you look at the Raphael source for the .animateWith() function, you see it syncs the .start param of each animation, FWIW.

推荐答案

从拉斐尔文档：

参数

的元素的 - [对象]元素以

element - [object] element to sync with

的动画的 - [对象]用动画

anim - [object] animation to sync with

的动画的 - [对象]动画对象，见Raphael.animation

animation - [object] animation object, see Raphael.animation

所以，我认为你的code只需要分开的动画的并传递到第二个参数为 .animateWith（）：

So I think your code just need to separate the animation and pass that into second parameter for .animateWith():

的动画的部分仅仅是：

{
    "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: animationDone },
    "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: animationDone }
} 

所以，你可以这样做：

So you can do this:

var animationDone = function() { 
    tick(this, repeats, done); 
};

var ticktockAnimationParam = {
    "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: animationDone },
    "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: animationDone }
};
var ticktock = Raphael.animation(ticktockAnimationParam, interval).repeat(repeats / 2);
arm.animate(ticktock);
weight.animateWith(arm, ticktockAnimationParam, ticktock);    

请参阅小提琴： http://jsfiddle.net/wDwsW/7/

据透露，我搬到外面的回调函数，而不是使用匿名函数。

Fyi , I moved the callback function outside, instead of using anonymous functions.

这篇关于如何使用圣拉斐尔.animateWith（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！