光滑的jQuery般的动画GWT(Smooth jQuery-like animation in G

我玩GWT的动画类的功能。 我的目标不是创造另一个用于GWT部件/动画库。 此外，我清楚地知道，有一些做许多图书馆。 我正在试图做的是学习如何可以做到这一点，而不是如何使用一些库。 这仅仅是为了教育目的....

随着中说，我已经实现了一个简单的类，执行上的一些小部件4个不同的动画：淡入，淡出，滑入，滑出（以下jQuery的动画模型）。 请参阅下面如何，我实现它的代码。

现场演示： http://www.rodrigo-silveira.com/gwt-custom-animation/

我的问题：我如何顺利[成功]只要另一个触发停止动画，并继续目前的动画，其中旧不放过？

例如，如果中的slideIn（）是完成了一半时滑出式（）被调用时，我怎么能开始从50％widget的自然高度滑出？ 我试图保持一个成员变量总是跟踪当前的进度，所以我可以使用，在一个新的动画，但似乎无法得到它的权利。 有任何想法吗？

import com.google.gwt.animation.client.Animation;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.Element;

public class RokkoAnim extends Animation {

    private Element element;
    private int currentOp;
    private final static int FADE_OUT = 0;
    private final static int FADE_IN = 1;
    private final static int SLIDE_IN = 2;
    private final static int SLIDE_OUT = 3;


    public RokkoAnim(Element element) {
        this.element = element;
    }

    public void fadeOut(int durationMilli) {
        cancel();
        currentOp = RokkoAnim.FADE_OUT;
        run(durationMilli);
    }

    public void fadeIn(int durationMilli) {
        cancel();
        currentOp = RokkoAnim.FADE_IN;
        run(durationMilli);
    }

    public void slideIn(int durationMilli) {
        cancel();
        currentOp = RokkoAnim.SLIDE_IN;
        run(durationMilli);
    }

    public void slideOut(int durationMilli) {
        cancel();
        currentOp = RokkoAnim.SLIDE_OUT;
        run(durationMilli);
    }

    @Override
    protected void onUpdate(double progress) {
        switch (currentOp) {
        case RokkoAnim.FADE_IN:
            doFadeIn(progress);
            break;
        case RokkoAnim.FADE_OUT:
            doFadeOut(progress);
            break;
        case RokkoAnim.SLIDE_IN:
            doSlideIn(progress);
            break;
        case RokkoAnim.SLIDE_OUT:
            doSlideOut(progress);
            break;
        }
    }

    private void doFadeOut(double progress) {
        element.getStyle().setOpacity(1.0d - progress);
    }

    private void doFadeIn(double progress) {
        element.getStyle().setOpacity(progress);
    }

    private void doSlideIn(double progress) {
        double height = element.getScrollHeight();
        element.getStyle().setHeight(height * (1.0d - progress), Unit.PX);
    }

    private void doSlideOut(double progress) {
            // Hard coded value. How can I find out what
            // the element's max natural height is if it's 
            // currently set to height: 0 ?
        element.getStyle().setHeight(200 * progress, Unit.PX);
    }
}

用法

// 1. Get some widget
FlowPanel div = new FlowPanel();

// 2. Instantiate the animation, passing the widget
RokkoAnim anim = new RokkoAnim(div.getElement());

// 3. Perform the animation

// >> inside mouseover event of some widget:
anim.fadeIn(1500);

// >> inside mouseout event of some widget:
anim.fadeOut(1500);

Answer 1:

您需要根据当前值更新不透明度（相当于+=或-=分配）：

private void doFadeOut(double progress) {
    double opacity = element.getStyle().getOpacity();
    element.getStyle().setOpacity(opacity - 1.0d - progress);
}

private void doFadeIn(double progress) {
    double opacity = element.getStyle().getOpacity();
    element.getStyle().setOpacity(opacity + progress);
}

Answer 2:

1. 添加一个实例方法布尔取消您annimation类
2. 只有当不取消运行annimation。

3. 添加方法cancelAnnimation和新annimation启动时调用此方法每次。

    private bool canceled = false; public void cancelAnnimation() { canceled = true; } private void doFadeOut(double progress) { if(!canceled) { element.getStyle().setOpacity(1.0d - progress); } } ... etc. 

所以，这是你可以停止动画的方式。 但现在，你需要从当前点开始新的动画。 所以最好是再次修改类。

1. 添加两个实例变量currentProgress和偏移量（双）
2. 添加双偏移构造
3. 取消annimation时返回currentProgress。

4. 启动新的动画与第一动画的偏移。

    private bool canceled = false; private double currentProgress = 0; private double offset = 0; public RokkoAnim(Element element, double offset) { this.element = element; this.offset = offset; } public double cancelAnimation() { canceled = true; return currentProgress; } private void doFadeOut(double progress) { if(!canceled && ((progress + offset) <= 1)) { element.getStyle().setOpacity(1.0d - (progress+offset)); currentProgress = progress+offset; } } ... etc. double offset = anim1.cancelAnimation(); RokkoAnim anim2 = new RokkoAnim(div.getElement(), offset); 

Answer 3:

在和滑出我已经修改了你的类，以使用构件屏幕cordinates：

public class WidgetAnimation extends Animation {

    private Element element;
    private int currentOp;
    private int startX=-1;
    private int finalX=-1;
    private final static int FADE_OUT = 0;
    private final static int FADE_IN = 1;
    private final static int SLIDE_IN = 2;
    private final static int SLIDE_OUT = 3;


    public WidgetAnimation(Element element) {
        this.element = element;
    }

    public void fadeOut(int durationMilli) {
        cancel();
        currentOp = WidgetAnimation.FADE_OUT;
        run(durationMilli);
    }

    public void fadeIn(int durationMilli) {
        cancel();
        currentOp = WidgetAnimation.FADE_IN;
        run(durationMilli);
    }

    public void slideIn(int durationMilli) {
        cancel();
        currentOp = WidgetAnimation.SLIDE_IN;
        run(durationMilli);
    }

    public void slideOut(int durationMilli) {
        cancel();
        currentOp = WidgetAnimation.SLIDE_OUT;
        run(durationMilli);
    }

    @Override
    protected void onUpdate(double progress) {
        switch (currentOp) {
        case WidgetAnimation.FADE_IN:
            doFadeIn(progress);
            break;
        case WidgetAnimation.FADE_OUT:
            doFadeOut(progress);
            break;
        case WidgetAnimation.SLIDE_IN:
            doSlideIn(progress);
            break;
        case WidgetAnimation.SLIDE_OUT:
            doSlideOut(progress);
            break;
        }
    }

    private void doFadeOut(double progress) {
        element.getStyle().setOpacity(1.0d - progress);
    }

    private void doFadeIn(double progress) {
        element.getStyle().setOpacity(progress);
    }

    private void doSlideIn(double progress) {
        if(startX==-1){
            finalX = element.getAbsoluteLeft();
            startX = - Window.getClientWidth();
        }

        int positionX = (int) (startX + (progress * (this.finalX - startX)));

        this.element.getStyle().setLeft(positionX, Unit.PX);
    }

    private void doSlideOut(double progress) {
        if(startX==-1){
            startX = element.getAbsoluteLeft();
            finalX = - Window.getClientWidth();
        }

        int positionX = (int) (startX + (progress * (this.finalX - startX)));
        GWT.log("StartX:" + startX);
        GWT.log("finalX:" + finalX);
        GWT.log("positionX:" + positionX);
        GWT.log("progress:" + progress);

        this.element.getStyle().setLeft(positionX, Unit.PX);
    }

}

我滑出和水平，但你可以修改代码。

我希望帮助。

文章来源: Smooth jQuery-like animation in GWT