GWT动画最终值不受尊重 [英] GWT Animation final value is not respected

问题描述

我有一个FlowPanel，我试图像iPhone导航一样来回移动。 （有关如何执行此操作的原始问题，请参见这篇文章）

所以我让它与下面显示的代码工作。我说工作引号是因为我发现我的滚动器的最终位置并不精确，滚动时总是发生变化。

GWT.log始终表示实际值我正在寻找，所以例如下面的调用scrollTo，我的GWT.log说：

ScrollStart：0 scrollStop： - 246

但是当我实际分析fireBug中的元素时，它的css左边的位置永远不会是-246px。有时它的偏移量高达10px，因此我的面板在完成之前就停止了滚动。

最糟糕的部分是，此导航会反复进行动画，所以后续点击可以真的把它扔掉了，我需要像素完美的定位，否则整个事情看起来不起来。

我甚至不知道从哪里开始调试，已经完成了。任何提示都会被赞赏。

编辑：附加日志记录信息：

在onUpdate内记录显示：

 更新：进度：0.09319577524960648职位：-22.926160711403195 
更新：进度：0.1328387452821571职位：-32.67833133941065 
更新：进度：0.609071620698271职位：-149.83161869177468 
更新：进度：0.7269952498697734职位：-178.84083146796425 
更新：进度：0.9852532367342712职位：-242.37229623663072 
 AnimationComplete：final scrollStart / scrollStop：0 / -246 
  

为什么会以0.98％结尾？

调用动画的代码

  scroller = new Scroller（）; 
 scroller.scrollTo（-246,400）; 
  

动画代码

  public class Scroller extends Animation {
 
 private FlowPanel scroller; 
 private final Element e; 
 
 public Sc​​roller（）{
 scroller = new FlowPanel（）; 
 e = scroller.getElement（）; 
 
 
 public void scrollTo（int position，int milliseconds）{
 
 scrollStart = e.getOffsetLeft（）; 
 scrollStop = position; 
 
 GWT.log（ScrollStart：+ scrollStart +scrollStop：+ scrollStop）; 
运行（毫秒）; 
} 
 
 @Override 
 protected void onUpdate（double progress）{
 double position = scrollStart +（progress *（scrollStop  -  scrollStart））; 
 e.getStyle（）。setLeft（position，Style.Unit.PX）; 
} 
} 
  

解决方案

onComplete 在动画完成时被调用（并且在开始之前调用 onStart ），所以如果您想要在动画完成100％时采取行动：

 公共类Scroller扩展动画{
 ... 
 
 @Override 
 protected void onComplete（）{
 e.getStyle（）。setLeft（scrollStop，Style.Unit.PX）; 
 
 
  

编辑 ，这些文档并不是很清楚，onComplete是动画完成时所谓的。 Javadoc说 Animation.onUpdate 是：

当动画应该是
更新时调用。进度值为
，介于0.0到1.0之间，包含
（除非您重写
interpolate（double）方法以提供
更宽范围的值）。您可以将
覆盖onStart（）和onComplete（）以
执行安装并拆除
程序。

调用这些方法的代码是唯一表明只有在动画已经启动但尚未完成时调用onUpdate的情况 - 也就是说，当进度值> 0但< 1。

I have a FlowPanel that I'm trying to animate back and forth like an iphone nav. (See this post for my original question on how to do this)

So I have it "working" with the code shown below. I say working in quotes because I'm finding that my final position of my scroller is not precise and always changes when scrolling.

The GWT.log always says the actual values I'm looking for, so for instance with the call below to scrollTo, my GWT.log says:

ScrollStart: 0 scrollStop: -246

But when I actually analyze the element in fireBug, its css, left position is never exactly -246px. Sometimes it's off by as much as 10px so my panel has just stopped scrolling before being finished.

The worst part is that this nav animates back and forth, so subsequent clicks can really throw it off, and I need pixel perfect positioning otherwise the whole things looks off.

I don't even know where to start with debugging this other than what I've already done. Any tips are appreciated.

EDIT: Additional logging information:
Logging inside the onUpdate shows this:

Updating: progress: 0.09319577524960648 position: -22.926160711403195
Updating: progress: 0.1328387452821571 position: -32.67833133941065
Updating: progress: 0.609071620698271 position: -149.83161869177468
Updating: progress: 0.7269952498697734 position: -178.84083146796425
Updating: progress: 0.9852532367342712 position: -242.37229623663072
AnimationComplete: final scrollStart/scrollStop: 0/-246

Why does it end at 0.98 % ???

Code to call animation

scroller = new Scroller();
scroller.scrollTo(-246,400);

Animation Code

public class Scroller extends Animation {

    private FlowPanel scroller;
    private final Element e;

    public Scroller(){
        scroller = new FlowPanel();
        e = scroller.getElement();
    }

    public void scrollTo(int position, int milliseconds) {

        scrollStart = e.getOffsetLeft();
        scrollStop = position;

        GWT.log("ScrollStart: " + scrollStart + " scrollStop: " + scrollStop);
        run(milliseconds);
    }

    @Override
    protected void onUpdate(double progress) {
        double position = scrollStart + (progress * (scrollStop - scrollStart));
        e.getStyle().setLeft(position, Style.Unit.PX);
    }
}

解决方案

onComplete gets called when the animation is finished (and onStart gets called before it starts), so override that if you want to take an action when the animation is 100% done:

public class Scroller extends Animation {
      ...

      @Override
      protected void onComplete() {
        e.getStyle().setLeft(scrollStop, Style.Unit.PX);
      }
}

Edit As brad notes, the docs aren't very clear that onComplete is what's called when the animation is finished. The Javadoc says Animation.onUpdate is:

Called when the animation should be updated. The value of progress is between 0.0 and 1.0 inclusively (unless you override the interpolate(double) method to provide a wider range of values). You can override onStart() and onComplete() to perform setup and tear down procedures.

The code that calls these methods is the only thing that makes clear that onUpdate is only called when the animation has started but not yet finished - that is, when the progress value is > 0 but < 1.

这篇关于GWT动画最终值不受尊重的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！