Анимировать спрайт с помощью jquery - PullRequest
Новая
       2

Анимировать спрайт с помощью jquery

0 голосов
/ 02 марта 2012

Кто-нибудь знает лучший подход к анимации спрайта с помощью jquery. Есть 3 этапа изображения, которые мне нужно постепенно трансформировать при наведении мыши и, в конечном итоге, приземлиться на последний, пока мышь не отключится.

Вот изображение:

enter image description here

Спасибо!

Ответы [ 3 ]

1 голос
/ 02 марта 2012

Я пробовал что-то, используя CSS3 переход и анимация (это работает только в современном браузере, см. caniuse )

вы можете увидеть мойпример скрипта здесь: http://jsfiddle.net/fcalderan/hfs22/
Основные преимущества:

  • Не требуется JavaScript, это 100% чистый CSS;
  • Нет необходимости загружать изображения;
  • Плавная анимация.

HTML - это просто <div><span></span></div>​: я пытался избежать внутреннего диапазона в пользу псевдоэлементов: в Chrome, к сожалению, переходы не работают должным образом при применении к таким элементам (см. Ошибкуhttp://code.google.com/p/chromium/issues/detail?id=54699)

CSS 

div {
   height: 100px;
   width : 100px;
   -webkit-border-radius: 100px;
   -msie-border-radius: 100px;
   -moz-border-radius: 100px;
   border-radius: 100px;

   -webkit-box-sizing: border-box; 
   -moz-box-sizing: border-box;
   box-sizing: border-box;

   border  : 20px red solid;    
   cursor  : pointer;

}

div span {

   -webkit-transform: rotate(45deg);
   -msie-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);

   display  : block;
   margin     : 10px 0 0 -20px;
   background : #fff;
   width    : 102px;
   height   : 40px;

   -webkit-transition: all 2s ease;
   -msie-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -o-transition: all 2s ease;
   transition: all 2s ease;


}

div:hover {
   -webkit-animation : rotation 2s ease;
   -msie-animation : rotation 2s ease;
   -moz-animation : rotation 2s ease;
   -o-animation : rotation 2s ease;
   animation : rotation 2s ease;
}

div:hover span {
   height : 0;
   margin-top : 30px;
}

@-moz-keyframes rotation   {
     0%     { -moz-transform: rotate(45deg); }
     100%   { -moz-transform: rotate(-135deg); }
}

@-webkit-keyframes rotation   {
     0%     { -webkit-transform: rotate(45deg); }
     100%   { -webkit-transform: rotate(-135deg); }
}

@-msie-keyframes rotation   {
     0%     { -msie-transform: rotate(45deg); }
     100%   { -msie-transform: rotate(-135deg); }
}

@-o-keyframes rotation   {
     0%     { -o-transform: rotate(45deg); }
     100%   { -o-transform: rotate(-135deg); }
}


@keyframes rotation   {
     0%     { transform: rotate(45deg); }
     100%   { transform: rotate(-135deg); }
}
0 голосов
/ 02 марта 2012

Это будет выглядеть намного лучше, чем выбранный вами ответ:

См. Мой пример

Под ним идентичное статическое изображение.Если вы можете сделать белые части этого изображения прозрачными в фотошопе или что-то в этом роде, у вас будет действительно хороший эффект плавного закрытия.

0 голосов
/ 02 марта 2012

вот быстрый набросок

http://jsfiddle.net/VEuyH/1/

вам просто нужно настроить изображение для анимации, я установил фон для переключения -151px каждый кадр, вы также можете настроить время задержки наслаждайся;)

...