时间戳

首页 > 解决方案 > 通过范围滑块更改 @keyframes 中的关键帧选择器

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

问题描述

我是 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 的边缘从正常变为反向。

我怎样才能做到这一点？我已经尝试了一些东西，也许只需要稍微修改一下。

提前致谢。

标签： javascriptcssbuttonslidercss-animations

解决方案

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

此外，这里有一个关于动态关键帧的项目，请查看此链接。

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

推荐阅读