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

我需要从屏幕的左上角到右下角为图片设置动画。我只能使用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';

       }

“如何确定屏幕的右下角，以及如何将图片动画精确到该点？”

您可以通过窗口对象获得显示的尺寸：

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

因为您将图片定位在左上角，所以最终位置为

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

---

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

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

（功能（窗口）{
var-imgLeft=0，imgTop=0；
变量imgObj、屏幕宽度、屏幕高度、最终高度、最终高度、，
坡度、imgHeight、imgWidth；
var animateImage=函数（）{
imgObj.style.left=imgLeft

正如SeanOlson所说，要让它进入特定的角落，无论高度如何，你必须决定如何增加你的上下位置。您可以使用时间戳和requestAnimationFrame来保持平滑，不会出现抖动

这里有一个关于requestAnimationFrame的不错的教程：

**第二次编辑 我忘了提一下，以防你不知道rAF在旧浏览器中不可用。尽管如此，保罗·爱尔兰对此还是有一个很好的解释：

---

可能会帮助您，谢谢！这就解决了我确定屏幕的问题，但我仍然不知道如何用循环或间隔来设置动画，直到精确的点。很抱歉，我是js新手，正如我前面提到的，我找不到关于js动画的更多信息。这需要一些算法。您需要知道图像的大小，并决定如何设置图像的动画，或者每帧移动固定数量的像素，或者每帧移动固定数量的帧。换句话说，你是想一次移动5px，还是想在100帧内完成动画。谢谢！这是完美的，我会通过教程做进一步的调整！没问题，用坡度计算更新了答案，因此正方形将沿直线到达拐角处。如果你想变得那么具体，斜率必须在屏幕大小改变时重新计算，但是你只需要重新运行onload函数中的逻辑，这正是我所需要的！再次感谢你的帮助！

   (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);