在 javascript 函数 javascript 动画中使用两个 for 循环

Using two for loops within a javascript function javascript animation

本文关键字：javascript 两个 for 循环 动画 函数      更新时间：2023-09-26

已添加： 14-12-30 - 上午7：00（美国东部时间）此问题已解决下面我发布了一个jsfiddle的链接，您可以在其中看到成品。除了旋转加号之外，我还添加了一个显示在屏幕外的div，单击鼠标即可出现在屏幕上。这个div可以填充内容。虽然上述句子会让这个论坛上的大多数人惊呼："不呃！我主要为那些可能在未来几个月内偶然发现这篇文章的新手提供了这部分。 希望将来不需要其他人问这个问题。

http://jsfiddle.net/amolner/gqe4tpqs/31/任何人都可以出于任何目的自由使用上述代码。如果有人有任何方法可以改进上面的代码，以便将来找到这篇文章的人受益，请随时修改它。再次感谢迄今为止做出贡献的每个人。所以省去了我很多头痛。

原文：第一次点击时，一切都按预期方式工作。加号向右移动 45 度，将其变成"x"。在第二次点击时，思想出错了。在第二次单击时，我希望 x 向后移动 45 度，以便它变回"+"号。相反，它从 0 开始并向右移动 45 度。我已经在这里呆了这么久，以至于我不好意思说多久。我有一行又一行失败的代码，但我觉得以下是我最接近的代码。如果有人能帮忙，我将不胜感激。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>title</title>
        <link rel="stylesheet" href="reset.css">
    <script>
    var degrees = 0;
    function rotateAnimation(){
        for (degrees = 45; degrees > -1; degrees--){
            setTimeout(function(x){
                return function({
                    document.getElementById('thing').style.transform = "rotate("+x+"deg)";
                }
            }(degrees),-20*degrees);
        }
        for (degrees = 0; degrees < 45; degrees++){
            setTimeout(function(x){ 
                return function() {
                    document.getElementById('thing').style.transform = "rotate("+x+"deg)";
                }
            }(degrees),20*degrees);
        }
    }
    </script>
      </head>
      <body>
        <h1 onclick="rotateAnimation();" id="thing" style="cursor:pointer;position:fixed;top:0;left:0;font-size:5em;">+</h1>
     </body>
    </html>

我已经检查了不同程度的条件，即 0、-1 和 45

function rotateAnimation(){
    if(degrees==45){
    for (degrees = 45; degrees > -1; degrees--){
        setTimeout(function(x){return function(){document.getElementById('thing').style.transform = "rotate("+x+"deg)";}}(degrees),20*(45-degrees));
        }
    }
        if(degrees==0  ){
    for (degrees = 0; degrees < 45; degrees++){
        setTimeout(function(x){return function(){document.getElementById('thing').style.transform = "rotate("+x+"deg)";}}(degrees),20*degrees);
        }
    }
    else if(degrees==-1){
        degrees=0;
    }
        }

演示：http://jsfiddle.net/RahulB007/0r9ydm1x/1/

我创建了一个jsfiddle来演示这种工作。这是一个基于您现有工作组合在一起的示例，可以通过多种方式进行改进，从代码提取和使用requestAnimationFrame而不是setTimeout开始

我首先避免在每个循环中重新声明度数，以便可以保持和保持全局状态，然后添加 if 语句来检查动画的当前状态。此外，以这种方式将变量传递到setTimeout函数中不是有效的 javascript，尽管它可以在大多数浏览器中工作。我已经更改了数据的传递方式以创建有效的javascript，如下所示

var degrees = 0;
var rotateAnimation = function(){
    if (degrees == 45) {
            var spin = function() {
                setTimeout(function(){
                    var x = degrees;
                    document.getElementById('thing').style.transform = "rotate("+x+"deg)";
                    if (degrees > 0) {
                       spin(--degrees);   
                    }
                });
            }
            spin();
    } else {            
        var spin = function() {
                setTimeout(function(){
                    var x = degrees;
                    document.getElementById('thing').style.transform = "rotate("+x+"deg)";
                    if (degrees < 45) {
                       spin(++degrees);   
                    }
                });
            }
            spin();
        }
}

JSFIDDLE： http://jsfiddle.net/fmL37L5f/

我已经把它放在jsFiddle中并修复了语法错误：http://jsfiddle.net/4bj62s59/5/

<script>
    var degrees = 0;
    function rotateAnimation(){
        for (degrees = 45; degrees > -1; degrees--){
            setTimeout((function(x){
                return function(){
                    document.getElementById('thing').style.transform = "rotate("+x+"deg)";
                }
            })(degrees),-20*degrees);
        }
        for (degrees = 0; degrees < 45; degrees++){
            setTimeout((function(x){
                return function() {
                    document.getElementById('thing').style.transform = "rotate("+x+"deg)";
                }
            })(degrees),20*degrees);
        }
    }
</script>
<h1 onclick="rotateAnimation();" id="thing" style="cursor:pointer;position:fixed;top:0;left:0;font-size:5em;">+</h1>

这是一个 CSS 解决方案：http://jsfiddle.net/94v95sh0/1/使用此动画器：http://cssanimate.com/我第一次生成：端架仅旋转 45 度给它一个类名 右十字，给它一个名字 右旋我第二次生成起始框架旋转 45 度端架旋转 0 度给它一个类名，给它一个左旋转的名字

相关文章：