простая текстовая анимация на JavaScript / DHTML / canvas - PullRequest
Новая
       20

простая текстовая анимация на JavaScript / DHTML / canvas

0 голосов
/ 26 сентября 2010

Допустим, у меня есть такой текст:

сделай это, сделай это,

тогда это, тогда это

Я использую CSS, чтобы добавить тень.

Я также могу использовать CSS, чтобы добавить желтое свечение за «сделать это», как описано здесь: http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/

Мне нужна повторяющаяся анимация:

  • 1 секунда: заставьте свечение "сделать это", все остальное - тень
  • 1 секунда: заставить "делать это" светиться, все остальное - тень
  • 1 секунда: заставьте свечение «тогда это», все остальное - тень
  • 1 секунда: заставьте светиться "тогда это", все остальное - тень Это должно повторяться на бесконечном цикле.

Как мне написать эту анимацию?

Ответы [ 2 ]

1 голос
/ 26 сентября 2010

Не стесняйтесь использовать: 

    <!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>

Протестировано, отлично работает в FF, Opera, Chrome, Safari.

Для IE вам, вероятно, следует реализовать нечто подобное: 

el1 { filter:
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=45)
progid:DXImageTransform.Microsoft.Glow(Color=#bbbbbb,Strength=2)
progid:DXImageTransform.Microsoft.blur(pixelradius=5, enabled='true')}
0 голосов
/ 12 января 2013

Вот как я подошел к этому:

Вы можете создать переменную 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();

Это сделает егоодушевленный, ты просто должен сказать ему, что делать.

Я сделал пример здесь , который делает нечто подобное

...