如何关注YUI驱动的动画关闭屏幕或中心视口项目？ [英] How to follow YUI driven animation off screen or center viewport on item?

问题描述

我使用从YUI3 文档示例中修改的代码来动画

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'.

有没有一个YUI燃料的方式这样做？

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

推荐答案

你可以这样做，基本上只是确保视口总是跟踪一个对象上 canvas 通过考虑与页面相关的画布坐标。

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

这篇关于如何关注YUI驱动的动画关闭屏幕或中心视口项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！