通过范围滑块更改@keyframes中的关键帧选择器

时间：2018-09-20 07:59:40

标签： javascript css button slider css-animations

我是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上显示的当前值开始。

赞：

发件人：

振幅值：起始值：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 :(得分：0)

通常，@keyframes不灵活，因为它们通常是硬编码的。 您可以检查一个有用的JavaScript关键帧库Rekapi。

除了这里是有关动态关键帧的项目，请检查此link。

希望这将有助于解决您的问题。

相关问题
最新问题