Я играю с классом GWT Animation как упражнение. Моя цель - не создавать еще одну библиотеку виджета/анимации для GWT. Кроме того, я хорошо знаю, что есть много библиотек, которые это делают. То, что я пытаюсь сделать, это узнать, как это можно сделать, а не как использовать некоторую библиотеку. Это только для образовательных целей....
С учетом сказанного я реализовал простой класс, который выполняет 4 разных анимации на некоторых виджетах: затухает, исчезает, скользит и выворачивается (после анимационной модели jQuery). См. Код ниже, как я его реализовал.
LIVE DEMO: 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 max natural height is if it
// 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);