JavaScript/DHTML/canvas中的简单文本动画_Javascript_Animation_Canvas_Dhtml

JavaScript/DHTML/canvas中的简单文本动画

javascript animation canvas

JavaScript/DHTML/canvas中的简单文本动画,javascript,animation,canvas,dhtml,Javascript,Animation,Canvas,Dhtml,假设我有一些文字如下：做这个，做那个然后这个，然后那个我使用CSS添加阴影我还可以使用CSS在“Dothis”后面添加黄色光晕，如下所述：我想要的是一个重复的动画： 1秒：让“做这个”发光，其他一切都是阴影 1秒：让“做那个”发光，其他一切都是阴影 1秒：使“然后这个”发光，其他一切都是阴影 1秒：使“然后那个”发光，其他一切都是阴影这应该在无休止的循环中重复如何编写此动画？请随意使用： <!DOCTYPE html> <html>

假设我有一些文字如下：

做这个，做那个

然后这个，然后那个

我使用CSS添加阴影

我还可以使用CSS在“Dothis”后面添加黄色光晕，如下所述：

我想要的是一个重复的动画：

1秒：让“做这个”发光，其他一切都是阴影
1秒：让“做那个”发光，其他一切都是阴影
1秒：使“然后这个”发光，其他一切都是阴影
1秒：使“然后那个”发光，其他一切都是阴影这应该在无休止的循环中重复

如何编写此动画？

请随意使用：

    <!DOCTYPE html>
    <html>
      <head>
        <title>Jevgenis Animation</title>
        <script type="text/javascript">
          var c = -1;
          var els = new Array("el1", "el2", "el3", "el4");
          function nextEffect() {
            for(i = 0; i <= 3; i++)
              document.getElementById(els[i]).style.textShadow = "2px 2px #FF3333";
            c = c >= els.length - 1 ? 0 : c + 1;
            var e = document.getElementById(els[c]);
            e.style.textShadow = "0 0 3px #FF3333";
          }
        </script>
        <style type="text/css">
          .shadow { text-shadow: 2px 2px #FF3333 }
        </style>
      </head>
      <body onload="setInterval('nextEffect()', 1000);">
        <span id="el1" class="shadow">do this</span>
        <span id="el2" class="shadow">do that</span>
        <span id="el3" class="shadow">then this</span>
        <span id="el4" class="shadow">then that</span>
      </body>
    </html>

我是这样做的：

您可以创建一个变量

var animStep=0

，然后使用自重复功能，如

ANIMATE

检查并增加

animStep

，该功能用于跟踪动画状态

考虑以下伪代码：

Animate 4 Frames{
    Frame 1: Do this glows, and everything else has a shadow
    Frame 2: Do that glows, and everything else has a shadow
    Frame 3: Then this glows, and everything else has a shadow
    Frame 4: Then that glows, and everything else has a shadow
}

现在让我们将其转换为实际代码，这很简单：

var animStep = 0;
ANIMATE = function(){
    if(animStep == 0){
        //First frame -- where 'Do this' glows, everything else has shadow
    }else if(animStep == 1){
        //Second frame -- where 'Do that' glows
    }else if(animStep == 2){
        //Third frame -- where 'then this' glows
    }else if(animStep == 3){
        //Last frame -- where 'then that' glows
    }
    animStep++;
    animStep = animStep == 4 ? 0 : animStep
    setTimeout(ANIMATE,1000);
}
ANIMATE();

这将使它充满活力，你只需要告诉它该做什么

我举了一个类似的例子

var animStep = 0;
ANIMATE = function(){
    if(animStep == 0){
        //First frame -- where 'Do this' glows, everything else has shadow
    }else if(animStep == 1){
        //Second frame -- where 'Do that' glows
    }else if(animStep == 2){
        //Third frame -- where 'then this' glows
    }else if(animStep == 3){
        //Last frame -- where 'then that' glows
    }
    animStep++;
    animStep = animStep == 4 ? 0 : animStep
    setTimeout(ANIMATE,1000);
}
ANIMATE();