在GWT中平滑的jQuery类动画

我正在玩GWT的Animation类作为练习。我的目标不是为GWT创建另一个小部件/动画库。此外，我很清楚，有很多图书馆这样做。我要做的是学习如何做到这一点，而不是如何使用一些图书馆。这只是教育目的….

就这样说，我实现了一个简单的类，在一些小部件上执行4种不同的动画：淡入淡出，滑入和滑出(在jQuery的动画模型之后)。请参阅下面的代码，了解我如何实现它。

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

我的问题：一旦触发了另一个动画，怎么能顺利地[和成功]停止动画，并继续保留旧的动画呢？

例如，如果slideIn()在slideOut()被调用的一半时，如何从窗口小部件的50％的自然高度开始滑出？我尝试保留一个始终跟踪当前进度的成员变量，所以我可以在一个新的动画中使用它，但似乎不能正确。有任何想法吗？

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);

解决方法

您需要根据当前值更新不透明度(等效于=或 – =赋值)：

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);
}

在GWT中平滑的jQuery类动画

解决方法

猜你在找的jQuery相关文章