在 javascript 中使用 requestAnimationFrame 时没有动画

Question

I want to rotate an image, but I am not getting any image rotation.我想旋转图像，但没有得到任何图像旋转。 How to fix this?如何解决这个问题？

HTML file: HTML文件：

<html>
<head>
    <title>javascript</title>
</head>
<body>

    <p style="text-align: center" >
        <img src="kalam.jpg" style="position: relative">
    </p>

    <script type="text/javascript" src="code.js">
    </script>
</body>
</html>

code.js:代码.js：

var kalam = document.querySelector ("img") ;
var angle = 0 , lastTime = null ;
function animate ( time ) {
    if ( lastTime != null )
        angle += ( time - lastTime ) * 0.001;
    lastTime = time ;
    kalam.style.top = ( Math.sin ( angle ) * 20) + " px ";
    kalam.style.left = ( Math.cos ( angle ) * 200) + " px ";
    requestAnimationFrame ( animate ) ;
}
requestAnimationFrame ( animate );

Answer 1

The only problem is that your css says " px" instead of "px" because you can't have a space before you declare what unit of measure your css property is using.唯一的问题是您的 css 显示" px"而不是"px"因为在声明 css 属性使用的度量单位之前不能有空格。

Demo on JSBin JSBin 上的演示

 var kalam = document.querySelector("img") ; var angle = 0 , lastTime = null ; function animate ( time ) { if ( lastTime != null ) angle += ( time - lastTime ) * 0.001; lastTime = time ; kalam.style.top = ( Math.sin ( angle ) * 40) + "px "; kalam.style.left = ( Math.cos ( angle ) * 90) + "px "; requestAnimationFrame ( animate ) ; } requestAnimationFrame ( animate );

 <img src="http://static.jsbin.com/images/dave.min.svg" style="position:absolute;margin:40px 0 0 100px;max-height:90px">

在 javascript 中使用 requestAnimationFrame 时没有动画

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-11-21 07:16:08

在 javascript 中使用 requestAnimationFrame 时没有动画

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-11-21 07:16:08

解决方案1
1 已采纳 2015-11-21 07:16:08