Блог

Я студент из Южной Кореи, изучающий программирование jquery mobile. и я хочу создать мобильное веб-приложение! Я делал анимацию игрового автомата с началом движения встряхивания. И я сделал это с помощью кода CSS. Но для запуска этой анимации мне пришлось использовать ‘js’. Итак, я хочу изменить (jquery animate code) из этого «css»

 <script>
window.onload = function() {
var myShakeEvent = new Shake({
threshold: 15
});
myShakeEvent.start();
window.addEventListener('shake', shakeEventDidOccur, false);
function shakeEventDidOccur () {
$('#lot').animate({

~~~here i want to input the animation.~~

}, 5000, function() {

});
}
};
  

~~~ и это анимация css.~~

 <div data-role="main" class="lot">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>


<style>
*{ padding: 38px;
margin:1px;
overflow: hidden;
}                               
.lot{
max-height: 880px;
max-width: 270px;

}
#a { 
background-size:contain;
background-image: url(b1.jpg);
background-position: top;
background-repeat:repeat-x;    
animation: animatedBackground 5s ease;
animation-iteration-count: 1;
animation-direction: alternate;
}   
#b { 
background-size:contain;
background-image: url(b2.jpg);
background-position: top;
background-repeat:repeat-x;    
animation: animatedBackground2 5s ease;
animation-iteration-count: 1;
animation-direction: alternate;
}   
#c { 
background-size:contain;
background-image: url(b3.jpg);
background-position: top;
background-repeat:repeat-x;    
animation: animatedBackground3 5s ease;
animation-iteration-count: 1;
animation-direction: alternate;
}   
@keyframes animatedBackground {
from { background-position: 0 0; }
50% { background-position: 5000px 0; }
to { background-position: 0 0; }
}
@keyframes animatedBackground2 {
from { background-position: 0 0; }
50% { background-position: -5000% 0; }
to { background-position: 0 0; }
}
@keyframes animatedBackground3 {
from { background-position: 0 0; }
50% { background-position: 4000% 0; }
to { background-position: 0 0; }
}
</style>
  

Анимация CSS и анимация jQuery — это две разные вещи.

Поскольку у вас уже определены ключевые кадры анимации CSS, все, что вам нужно сделать, это просто применить animation свойство.

Предполагая, что shakeEventDidOccur это функция для быстрого запуска или применения анимации.

Обратите внимание, что animation свойство переносится в отдельный блок CSS, где, когда .lot есть класс .startAnimation , каждый из блоков теперь будет иметь animation свойство, в котором начнется анимация.

 function shakeEventDidOccur () {
  $('#lot').addClass('startAnimation');
}  

 #a { 
  background-size: contain;
  background-image: url(b1.jpg);
  background-position: top;
  background-repeat: repeat-x;
  animation-iteration-count: 1;
  animation-direction: alternate;
}   
#b { 
  background-size: contain;
  background-image: url(b2.jpg);
  background-position: top;
  background-repeat: repeat-x;
  animation-iteration-count: 1;
  animation-direction: alternate;
}   
#c { 
  background-size: contain;
  background-image: url(b3.jpg);
  background-position: top;
  background-repeat: repeat-x;
  animation-iteration-count: 1;
  animation-direction: alternate;
}   
@keyframes animatedBackground {
  from { background-position: 0 0; }
  50% { background-position: 5000px 0; }
  to { background-position: 0 0; }
}
@keyframes animatedBackground2 {
  from { background-position: 0 0; }
  50% { background-position: -5000% 0; }
  to { background-position: 0 0; }
}
@keyframes animatedBackground3 {
  from { background-position: 0 0; }
  50% { background-position: 4000% 0; }
  to { background-position: 0 0; }
}

.lot.startAnimation #a {
  animation: animatedBackground 5s ease;
}
.lot.startAnimation #b {
  animation: animatedBackground2 5s ease;
}
.lot.startAnimation #c {
  animation: animatedBackground3 5s ease;
}