Question

我需要将屏幕左上方的图片设置为屏幕右下方的动画。我只能使用javascript。我做了一些研究，但每个人都使用CSS或Jquery进行动画制作，所以我无法找到问题的答案。所以我的问题是我如何确定屏幕的右下角以及如何将图片精确地设置为该点？我尝试了这个，但这只是在屏幕上进入无限。这是我的代码：

     var imgObj = null;
     var animate;

     function init(){

        imgObj = document.getElementById('myImage');
        imgObj.style.position= 'relative'; 

        imgObj.style.left = '0px'; 
        imgObj.style.top = '0px'; 
      }
        function moveRight(){

         imgObj.style.left = parseInt(imgObj.style.left) + 1 + 'px';
         animate = setTimeout(moveRight,60); // call moveRight in 60msec
         imgObj.style.top = parseInt(imgObj.style.top) + 1 + 'px';

       }

Answer 1

＆＃34;如何确定屏幕的右下角以及如何将图片精确地设置为该点的动画？＆＃34;

通过窗口对象获取显示的尺寸：

var width = window.innerWidth;
var height = window.innerHeight;

因为您通过它的左上角定位图片，所以最终位置将是

var final_top = height - img_height;
var final_left = width - img_width;

然后你使用一个简单的循环或者一个间隔计时器来递增地移动图像，直到它到达那些坐标。

Answer 2

我在这里做了一个简单的例子：

http://plnkr.co/edit/xnuBO5RRrjjnMJZjkxEu

   (function(window){
       var imgLeft = 0, imgTop = 0;
       var imgObj, screenWidth, screenHeight, finalTop, finalLeft, 
           slope, imgHeight, imgWidth;

       var animateImage = function(){
           imgObj.style.left = imgLeft < finalLeft ? imgLeft + 'px' : finalLeft + 'px';
           imgObj.style.top = imgTop < finalTop ? imgTop + 'px' : finalTop + 'px';

           if(imgLeft !== finalLeft || imgTop !== finalTop){
               requestAnimationFrame(animateImage);
           }

           imgLeft++;
           imgTop += slope;
       };

       window.onload = function(){
           imgObj = document.getElementById('image');

           screenWidth = window.innerWidth;
           screenHeight = window.innerHeight;

           imgHeight = imgObj.offsetHeight;
           imgWidth = imgObj.offsetWidth;

           slope = (screenHeight - imgHeight) / (screenWidth - imgWidth);

           finalTop = screenHeight - imgHeight;
           finalLeft = screenWidth - imgWidth;

           requestAnimationFrame(animateImage);
       };
    })(window);

就像SeanOlson所说的那样，无论高度如何，你都必须决定如何增加你的左上位置和左上位置。你可以使用时间戳和requestAnimationFrame来保持平滑，没有jutter。

这里有一个关于requestAnimationFrame的体面教程：http://creativejs.com/resources/requestanimationframe/

**第二次编辑我忘了提，如果你不知道rAF在旧浏览器中不可用。保罗爱尔兰有一个polyfill为它，但：

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

仅使用javascript在屏幕上显示图像动画

2 个答案: