testanim8

Benchmark created by gurami on October 22, 2014

Setup

var     doc = document.createElement('div'),
                doc1 = document.createElement('div'),
                doc2 = document.createElement('div'),
                _gd_activeAnimation = null,
                animatedProperty = '-webkit-transform',
                frame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { return window.setTimeout(callback, 1000 / 60);},
                stopFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || window.msCancelAnimationFrame || function (callback) { window.clearTimeout(callback);},
    
                scrollerObj =
                {
                    scroller:
                    {
                        el: doc
                    },
                    position:
                    {
                        scroller:
                        {
                            horizontal:0,
                            vertical:0
                        },
                        thumb:
                        {
                            horizontal:0,
                            vertical:0
                        }
                    },
                    ratio:
                    {
                        horizontal:0.5,
                        vertical:0.2
                    },
                    options:
                    {
                        mouseWheel:true,
                        mouseWheelSpeed:200,
                        duration:0.35,
                        trackSize:{vertical:'96%',horizontal:'96%'},
                        thumbSize:{vertical:null,horizontal:null},
                        visibleScrollbars:true,
                        Min:{ vertical:null,horizontal:null},
                        Max:{ vertical:null,horizontal:null},
                        enable:{horizontal:true,vertical:true},
                        /** in easing c = changeInValue,t = time(percent of animation complete),s = start value**/
                        easing:
                        {
                            easeOutSine: function(c,t,s){ return c*Math.sin(t * (Math.PI / 2)) + s },
                            easeOutQuad: function(c,t,s){ return c*((t=t-1)*t*t + 1) + s },
                            easeOutQuart: function(c,t,s){ return c*((t=t-1)*t*t*t + 1) + s },
                            easeOutQuint: function(c,t,s){ return c*((t=t-1)*t*t*t*t + 1) + s },
                            easeOutCirc: function(c,t,s){ return c*Math.sqrt(1 - (t=t-1)*t) + s }
                        }
                    },
                    thumb:
                    {
                        horizontal:{
                            el:doc1
                        },
                        vertical:{
                            el:doc2
                        }
                    },
                    Min :
                    {
                        horizontal:0,
                        vertical:0
                    },
                    Max :
                    {
                        horizontal:-2000,
                        vertical:-2000
                    }
                },
                delta =
                {
                    horizontal:-1,
                    vertical:-1
                },
                change =
                {
                    horizontal:200,
                    vertical:200
                },
                style = { horizontalLow : 'width', verticalLow : 'height',horizontalCap : 'Width',verticalCap : 'Height',horizontalXY : 'X',verticalXY : 'Y' },
                dimension = ['horizontal','vertical'];
    
        function animateScroll2(posScroller,posThumb,easing,Min,Max,ratio,scrollerStyle,thumbXStyle,thumbYStyle,change,delta,drag)
        {
            var posThumbX = posThumb.horizontal,
                    posThumbY = posThumb.vertical,
                    deltaX = delta.horizontal,
                    deltaY = delta.vertical,
                    changeX = change.horizontal,
                    changeY = change.vertical,
                    MinX = Min.horizontal,
                    MaxX = Max.horizontal,
                    MinY = Min.vertical,
                    MaxY = Max.vertical,
                    ratioX = ratio.horizontal,
                    ratioY = ratio.vertical,
                    currentPositionX = posScroller.horizontal,
                    currentPositionY = posScroller.vertical,
                    stepSizeX = 0,
                    stepSizeY = 0,
                    currentStep = 0,
                    maxStep = drag ? 1 : 60*0.35,
                    t = 0;
    
                if(_gd_activeAnimation){ stopFrame(_gd_activeAnimation); }
    
                function _step()
                {
                    t = drag ? 1 : currentStep/maxStep;
    
                    stepSizeX = easing['easeOutSine'](deltaX*changeX,t,currentPositionX);
    
                    stepSizeX >= MinX ? stepSizeX = MinX : '';
    
                    stepSizeX <= MaxX ? stepSizeX = MaxX : '';
    
                    stepSizeY = easing['easeOutSine'](deltaY*changeY,t,currentPositionY);
    
                    stepSizeY >= MinY ? stepSizeY = MinY : '';
    
                    stepSizeY <= MaxY ? stepSizeY = MaxY : '';
    
                    posScroller.horizontal = stepSizeX;
                    posScroller.vertical = stepSizeY;
    
                    if(posThumb)
                    {
                        posThumbX = -1*stepSizeX*ratioX;
    
                        posThumbY = -1*stepSizeY*ratioY;
    
                        thumbXStyle[''+animatedProperty+''] = 'translateX('+posThumbX+'px)';
                        thumbYStyle[''+animatedProperty+''] = 'translateY('+posThumbY+'px)';
                    }
    
                    scrollerStyle[''+animatedProperty+''] = 'translate('+stepSizeX+'px,'+stepSizeY+'px)';
    
                    currentStep++;
    
                    if(currentStep <= maxStep){ _gd_activeAnimation = frame(_step) }
    
                }
                _step();
        }

Test runner

new animateScroll2(scrollerObj.position.scroller,scrollerObj.position.thumb,scrollerObj.options.easing,scrollerObj.Min,

            scrollerObj.Max,scrollerObj.ratio,scrollerObj.scroller.el.style,scrollerObj.thumb.horizontal.el.style,

            scrollerObj.thumb.vertical.el.style,change,delta);

animateScroll2(scrollerObj.position.scroller,scrollerObj.position.thumb,scrollerObj.options.easing,scrollerObj.Min,

            scrollerObj.Max,scrollerObj.ratio,scrollerObj.scroller.el.style,scrollerObj.thumb.horizontal.el.style,

            scrollerObj.thumb.vertical.el.style,change,delta);

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by gurami on October 22, 2014