Изменить селектор ключевых кадров в @keyframes с помощью ползунка диапазона - PullRequest
Новая
       11

Изменить селектор ключевых кадров в @keyframes с помощью ползунка диапазона

0 голосов
/ 20 сентября 2018

Я новичок в CSS, HTML и Java Script / jQuery.Я на самом деле не кодирую, но я нашел решение для моей проблемы с простой анимацией CSS.Я не знал, что у анимации @keyframes все еще есть некоторые сложные вещи.

Я пытаюсь с давних времен кодировать динамические @keyframes.Я искал несколько тем для моей проблемы.Некоторые из них звучат похоже на мой, но я просто не могу применить его в своем коде, он не работает ..

Я получил следующий код ниже во фрагменте кода.Отредактировано 

var supportedFlag = $.keyframe.isSupported();
$.keyframe.debug = true;
var start = temp;
var start_100 = temp + 100;
var start_200 = start_100 + 100;

<script type='text/javascript'>

$(document).ready(function(){
    $('.arrow21').resetKeyframe(function() {
      switch (animation) {
        case 'normal':
        $('.arrow21').animate({
        name: 'arrow21-move',
        '0%': start,
        '25%': start_100,
        '75%': start_200;,
        '100%': start
        });
    });
});

function play(animation) {
$('.arrow21').playKeyframe({
      switch (animation) {
        if document.getElementById("pha").value < 180 then
            case 'normal':
            name: 'arrow21-move',
            duration: "4s",
            timingFunction: 'linear',
            iterationCount: '100',
            direction: 'normal',
            fillMode: 'forwards',

});
break;
        else
            case 'reverse':
            $('.arrow21').playKeyframe({
            name: 'arrow21-move',
            duration: "4s",
            timingFunction: 'linear',
            iterationCount: '100',
            direction: 'reverse',
            fillMode: 'forwards',
          });


function pause() {
    $('.arrow21').pauseKeyframe();
}

function resume() {
    $('.arrow21').resumeKeyframe();
}


/* phase */
function myFunction() {
         x = parseInt(document.getElementById("pha").value);
         document.getElementsByClassName('arrow21')[0].style.left = x;
         document.getElementsByClassName('arrow21')[0].style.top = 460 + (80 * Math.sin(0.0111 * (x-20)));
         temp = 460 + (80 * Math.sin(0.0111 * (x-20)));
         document.getElementById("print1").innerHTML = Math.round((x - 181) / 2.78);
         document.getElementById("print4").innerHTML = 460 + (80 * Math.sin(0.0111 * (x-20)));
}

/* amplitude */
function myFunction2() {
         y = parseInt(document.getElementById("amp").value);
         document.getElementsByClassName('arrow21')[0].style.height = y;
         document.getElementById("print2").innerHTML = y;
         document.getElementsByClassName('arrow22')[0].style.height = y;
         document.getElementById("ball").style.top = y + 100;
}

/* phase2 */
function myFunction3() {
         z = parseInt(document.getElementById("pha2").value);
         document.getElementsByClassName('arrow22')[0].style.left = z;
         document.getElementById("print3").innerHTML = Math.round((z - 181) / 2.78);;
}
body {background-color: wight;}

h1 {color: black;
    text-align: center;
    font-family: LM Roman 12;}

p  {font-family: LM Roman 12;
    font-size: 20px;}

.toggle{
	position: absolute;
	margin: -120px 150px;
  width: 300px;
	color: white;
	text-align: center;
	text-shadow: 0 1px 0 rgba(0,0,0,.5);
	font-size: 2.5em;
	cursor: pointer;
  z-index: 5;
}
.toggle:after {
         position: absolute;
	       display: block;
	       padding: 10px 0;
         width: 300px;
	       border: 1px solid #76011b;
	       border-radius: 8px;
	       background: green;
	       content: "Start";
         z-index: 5;
}
.toggle:checked:after {
                       background: red;
                       content: "Stop";
}


.toggle:checked ~ #up-triangle1 {
                -webkit-animation-name: up-triangle; /* Safari 4.0 - 8.0 */
                -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
                animation-name: up-triangle;
                animation-duration: 2s;
                animation-direction: forward;
                animation-iteration-count: 100;
                animation-timing-function: linear;

}

.toggle:checked ~ #down-triangle1 {
                -webkit-animation-name: down-triangle; /* Safari 4.0 - 8.0 */
                -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
                animation-name: down-triangle;
                animation-duration: 2s;
                animation-direction: forward;
                animation-iteration-count: 100;
                animation-timing-function: linear;
}

.toggle:checked ~ #rectangle1 {
                 -webkit-animation-name: rectangle; /* Safari 4.0 - 8.0 */
                 -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
                 animation-name: rectangle;
                 animation-duration: 2s;
                 animation-direction: forward;
                 animation-iteration-count: 100;
                 animation-timing-function: linear;
}

.toggle:checked ~ .arrow21 {
                  -webkit-animation-name: arrow21; /* Safari 4.0 - 8.0 */
                  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
                  animation-name: arrow21;
                  animation-duration: 2s;
                  animation-direction: normal;
                  animation-iteration-count: 100;
                  animation-timing-function: linear;
}

.toggle:checked ~ .arrow22 {
                  -webkit-animation-name: arrow22; /* Safari 4.0 - 8.0 */
                  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
                  animation-name: arrow22;
                  animation-duration: 2s;
                  animation-direction: reverse;
                  animation-iteration-count: 100;
                  animation-timing-function: linear;
}

.toggle:checked ~ #ball {
                  -webkit-animation-name: ball; /* Safari 4.0 - 8.0 */
                  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
                  animation-name: ball;
                  animation-duration: 10s;
                  animation-direction: reverse;
                  animation-iteration-count: 100;
                  animation-timing-function: linear;
}

#up-triangle1 {
   position: absolute;
   top: 320px;
   left: 168.5px;
   width: 0;
   height: 0;
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
   border-bottom: 45px solid #01ADAB;
}

@keyframes up-triangle {
           0% {top:320px;}
           25% {top:420px;}
           75% {top:220px;}
           100% {top:320px;}
}

#down-triangle1 {
   position: absolute;
   top: 607px;
   left: 168.5px;
   width: 0;
   height: 0;
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
   border-top: 45px solid #01ADAB;
}

@keyframes down-triangle {
    0% {top:607px;}
    25% {top:707px;}
    75% {top:507px;}
    100% {top:607px;}
}

#rectangle1 {
   position: absolute;
   top: 365px;
   left: 181px;
   height: 242px;
   width: 5px;
   background-color: #01ADAB;
}

@keyframes rectangle {
    0% {top:365px;}
    25% {top:465px;}
    75% {top:265px;}
    100% {top:365px;}
}

.arrow21 {
   position: absolute;
   top: 540px;
   left: 181px;
   height: 332px;  /* 332 */
   width: 5px;
   background-color: #80D0CF;
}

@keyframes arow21 {
    0% {top:320px;}
    25% {top:420px;}
    75% {top:220px;}
    100% {top:320px;}
}

.arrow22 {
   position: absolute;
   top: 320px;
   left: 681px;
   height: 332px;
   width: 5px;
   background-color: #80D0CF;
}

@keyframes arrow22 {
    0% {top:320px;}
    25% {top:420px;}
    75% {top:220px;}
    100% {top:320px;}
}

#print1 {
    position: absolute;
    top: 111px;
    left: 182px;
    width: 50px;
    height: 10px;
}

#print2 {
    position: absolute;
    top: 58px;
    left: 110px;
    width: 50px;
    height: 10px;
}

#print3 {
    position: absolute;
    top: 151px;
    left: 182px;
    width: 50px;
    height: 10px;
}

#print4 {
    position: absolute;
    top: 170px;
    left: 200px;
    width: 50px;
    height: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>My Code</h1>
<hr>
<form>
  <span style="display:inline-block; height: 20px;"></span>
  <b><font size="4">amplitude:</font></b><br>
  <input type="range" id="amp" name="amplitude" oninput="myFunction2()"
  placeholder="0" min="156" max="484" value="320" step="1">
  <br>
  <span style="display:inline-block; height:20px;"></span>
  <b><font size="4">phase:</font></b><br>
  <input type="range" id="pha" oninput="myFunction()"
  name="phase" min="181" max="681" value="181" step="1">
  <br>
  <span style="display:inline-block; height:20px;"></span>
  <b><font size="4">phase2:</font></b><br>
  <input type="range" id="pha2" oninput="myFunction3()"
  name="phase2" min="681" max="1181" value="781" step="1">
</form>


<p id="print1"></p>
<p id="print2"></p>
<p id="print3"></p>
<p id="print4"></p>
<input class="toggle" type="checkbox">
<div id="up-triangle1"></div>
<div id="down-triangle1"></div>
<div id="rectangle1"></div>
<div class="arrow21"></div>
<div class="arrow22"></div>

</body>

Анимация с кнопкой «Пуск» (флажок) у меня работает нормально.Это также должна быть кнопка возобновления, чтобы продолжить анимацию, если она однажды началась.Формы движутся в правильном направлении.Я мог изменить фазу и амплитуду во время анимации в моем редакторе.В фрагменте кода это не работает.Но это не основная проблема.

Моя проблема в том, что я не знаю, как я могу получить текущее значение из амплитуды и применить его в качестве начального условия к фигуре.Это динамическое значение из-за ползунка диапазона.Это значение изменяет верхнюю позицию фигуры.Анимация должна начинаться с этого текущего значения, показанного в print1.

Примерно так:

From:

Значение амплитуды: Начальное значение: 320. 

@keyframes arrow21 {
    0% {top:320px;} /* start position */
    25% {top:420px;} /* moving 100px down */
    75% {top:220px;} /* moving 100px up */
    100% {top:320px;} /* end position */
}

К

Значение амплитуды: 400. 

@keyframes arrow21 {
    0% {top:400px;} /* start position */
    25% {top:500px;} /* moving 100px down */
    75% {top:300px;} /* moving 100px up */
    100% {top:400px;} /* end position */
}

Поэтому, если вы измените значение, анимация должна измениться либо и начать с того же значения, где находится ползунок диапазона.Мне нужна обновленная анимация, поэтому, если анимация работает и амплитуда изменяется, она должна быть обновлена ​​напрямую.(или после нажатия кнопки «Пуск / Стоп») Это должно быть возможно для каждого значения, установленного в диапазоне.Также анимация должна измениться с нормальной на обратную на краю 180 от фазового диапазона.

Как я могу добиться этого?Я уже что-то пробовал, может быть, это просто нужно немного изменить.

Заранее спасибо.

1 Ответ

0 голосов
/ 20 сентября 2018

Как правило, @keyframes негибкие, так как обычно они жестко запрограммированы.Существует полезная библиотека ключевых слов JavaScript Rekapi , которую вы можете проверить.

Кроме того, вот проект на динамических ключевых кадрах, проверьте эту ссылку .

Надеюсь, это поможет решить вашу проблему.

...