Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    22
    Vote Rating
    4
    Stx.Greg is on a distinguished road

      0  

    Default ScrollTo Animation Duration Sticks

    ScrollTo Animation Duration Sticks


    REQUIRED INFORMATION

    Ext version tested:
    • Touch 2.0.1 (Commercial version)
    Browser versions tested against:
    • Safari 5.0.5
    • Mobile Safari (iOS v 5.0.1(9A405))
    DOCTYPE tested against:
    • XHTML 1.0 Transitional
    Description:
    • When scroller.scrollTo() is called with an animation containing a duration, the duration never resets to the default value. I would expect the scroller to scroll with the supplied animation but leave the scroller itself unchanged for subsequent operations.
    Steps to reproduce the problem:
    • Create an Ext.dataview.List with enough rows so it will scroll
    • Call list.getScrollable().getScroller().scrollTo(x, y, {duration: 1});
    • The list will scroll to the specified location instantaneously as expected
    • Scroll to the top or bottom of the list and then try to scroll past the end of the list
    The result that was expected:
    • The list contents should have moved back to the list bounds with the default smooth fluid animation
    The result that occurs instead:
    • The list contents snap back to the list bounds with no apparent animation
    Test Case:

    Code:
        list.getScrollable().getScroller().scrollTo(x, y, {duration: 1});


    HELPFUL INFORMATION


    Debugging already done:
    • I have noticed that once a duration is passed in to scrollTo, the duration in the Ext.util.translatable.Abstract superclass of the Ext.scroll.Scroller never reverts back to the default value.
    • This is why the list contents seem to snap back when overscrolled in the test case, it is animating with a duration of 1ms
    Possible fix:
    I have added a workaround to sencha-touch-all-debug.js to save the default duration value and reset it after a custom animation. Not sure this is the best approach, but it works for me.

    To save the default duration value, I have added the following lines to the translateAnimated function of Ext.util.translatable.Abstract
    Code:
                if(!easingX.defaultDuration)
                    easingX.defaultDuration = easingX.getDuration();
    .......
                if(!easingY.defaultDuration)
                    easingY.defaultDuration = easingY.getDuration();
    New version:
    Code:
        translateAnimated: function(x, y, animation) {
            if (Ext.isObject(x)) {
                throw new Error();
            }
    
    
            if (!Ext.isObject(animation)) {
                animation = {};
            }
    
    
            var now = Ext.Date.now(),
                easing = animation.easing,
                easingX = (typeof x == 'number') ? (animation.easingX || this.getEasingX() || easing || true) : null,
                easingY = (typeof y == 'number') ? (animation.easingY || this.getEasingY() || easing || true) : null;
    
    
            if (easingX) {
                easingX = this.factoryEasing(easingX);
                easingX.setStartTime(now);
                easingX.setStartValue(this.x);
                easingX.setEndValue(x);
    
    
                if(!easingX.defaultDuration)
                    easingX.defaultDuration = easingX.getDuration();
    
    
                if ('duration' in animation) {
                    easingX.setDuration(animation.duration);
                }
            }
    
    
            if (easingY) {
                easingY = this.factoryEasing(easingY);
                easingY.setStartTime(now);
                easingY.setStartValue(this.y);
                easingY.setEndValue(y);
    
    
                if(!easingY.defaultDuration)
                    easingY.defaultDuration = easingY.getDuration();
    
    
                if ('duration' in animation) {
                    easingY.setDuration(animation.duration);
                }
            }
    
    
            return this.animate(easingX, easingY);
        },
    To reset the default value after animating, I have added the following lines to the stopAnimation function of Ext.util.translatable.Abstract
    Code:
            var easingX = this.getEasingX();
            var easingY = this.getEasingY();
            if(easingX && easingX.defaultDuration)
                easingX.setDuration(easingX.defaultDuration);
            if(easingY && easingY.defaultDuration)
                easingY.setDuration(easingY.defaultDuration);
    New version:
    Code:
        stopAnimation: function() {
            if (!this.isAnimating) {
                return;
            }
    
    
            this.activeEasingX = null;
            this.activeEasingY = null;
    
    
            this.isAnimating = false;
    
    
            var easingX = this.getEasingX();
            var easingY = this.getEasingY();
            if(easingX && easingX.defaultDuration)
                easingX.setDuration(easingX.defaultDuration);
            if(easingY && easingY.defaultDuration)
                easingY.setDuration(easingY.defaultDuration);
    
    
            clearInterval(this.animationTimer);
            this.fireEvent('animationend', this, this.x, this.y);
        },
    Operating System:
    • Windows 7
    • iOS v 5.0.1(9A405)

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the report

    Code:
    var y    = 0,
        anim = {
            duration : 2000
        };
    
    new Ext.dataview.List({
        fullscreen : true,
        itemTpl    : '{text}',
        store      : {
            fields  : ['text'],
            data    : [
                { text : 1  },
                { text : 2  },
                { text : 3  },
                { text : 4  },
                { text : 5  },
                { text : 6  },
                { text : 7  },
                { text : 8  },
                { text : 9  },
                { text : 10 },
                { text : 11 },
                { text : 12 },
                { text : 13 },
                { text : 14 },
                { text : 15 },
                { text : 16 },
                { text : 17 },
                { text : 18 },
                { text : 19 },
                { text : 20 }
            ]
        },
        items : [
            {
                xtype  : 'toolbar',
                docked : 'top',
                items  : [
                    {
                        text    : 'Scroll',
                        ui      : 'action',
                        handler : function(button) {
                            var list     = button.up('list'),
                                scroller = list.getScrollable().getScroller();
    
                            y += 100;
    
                            console.log(anim);
    
                            scroller.scrollTo(0, y, anim);
    
                            if (anim) {
                                anim = false;
    
                                console.warn('The next time you scroll, it should use default duration');
                            }
                        }
                    }
                ]
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1