How to follow YUI driven animation off screen or center viewport on item?

问题

I'm using code adapted from the YUI3 documentation example to animate a graphic along a curved path.

The full canvas size is intentionally pretty huge - definitely larger than most screens - so the graphic will run out of viewport space pretty quickly and animate off the screen.

Instead, I'd like browser viewport to follow or centre on the image so that it stays 'in shot'.

Is there a YUI fuelled way of doing this? Or something simpler?

回答1:

You could do something like this, basically just makes sure the viewport is always tracking an object on the canvas by taking into account the canvas coordinates in relation to the page.

function track(x,y, offsetX, offsetY){
    var trackX = x - (canvas.offsetLeft + offsetX);
        trackY = y - (canvas.offsetTop + offsetY);

    window.scrollTo(trackX, trackY);

}

Live Demo

​

来源：https://stackoverflow.com/questions/12392455/how-to-follow-yui-driven-animation-off-screen-or-center-viewport-on-item