通过jQuery控制动画-持续时间(由用户输入)

Question

问题：没有通过jQuery直接控制CSS3关键帧动画的持续时间的方法。

Link：https://codepen.io/Refath/pen/yoZxMr

可信的/失败的尝试：我尝试过$(“.parent”).css(“动画-持续时间”，newimg)之类的东西，但这是行不通的。还有一种方法是添加/减去具有动画持续时间属性的类，由事件控制(即单击“完成”按钮)。

Context：在我的web应用程序https://codepen.io/Refath/pen/yoZxMr中，我有一个“速度”设置，如果鼠标悬停在左边的粘性侧边栏上，就可以找到它。

目标：用户应该能够在文本字段中插入一个值。单击“已完成”，将触发一个事件，将旋转轮的动画持续时间更改为该值，使其旋转得更快/更慢。不幸的是，下面从父类中添加和减去子类的方法不适用于我的代码。

此外，控制台中没有出现错误，这似乎与下面所示的jQuery代码有关，因此，这可能是一个格式化问题。任何帮助都是非常感谢的，谢谢。

用于该功能的当前jQuery：

​

$('.speedSave').click(function() {
    var el = $('.parent').addClass('custom');
    setTimeout(function() {
        el.removeClass('custom');
    }, 1000);
	var newimg = $(this).val();
           		        	$(".parent").css("animation-duration", newimg);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​

Answer 1

我认为您可以通过GSAP更好地用TweenMax实现您想要的结果。

下面是一个工作示例(运行代码段)。

如果用户没有在输入字段上设置任何内容，它也会有退路。

​

$(document).ready(function(){
  TweenMax.to('#spinner', 10, { 
    rotation: 360,
    repeat: -1,
    ease: Linear.easeNone,
    });
});

$(document).on('click', '#button', function(){

  var duration = parseInt( $('#duration').val() );
  if ( isNaN( duration ) ) 
    { duration = 1 }

  TweenMax.to('#box', duration, { 
    rotation: '+=360',  
    ease: Power3.easeInOut });
})

#spinner {
  display: inline-block;
}
#box {
  width: 30px;
  height: 30px;
  background-color: royalblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spinner">
  <div id="box"></div>
</div>

Add  fast spin duration (seconds):
<input type="text" name="duration" id="duration">
<button id="button">Rotate</button>

​

Answer 2

为此，我将使用GreenSock (TweenMax)。https://greensock.com

我用gsap修改了你的例子，如果你改变速度输入中的秒数，它会改变转速。

这是它的js：

var rotationSpeed = 3,
        TimeLine = new TimelineMax({repeat:-1});

$('.speedSave').click(function() {
    rotationSpeed = $(".speedtext").val();
    TimeLine.duration(rotationSpeed);
});

TimeLine.to(".rcc", rotationSpeed, {
    rotation:-360,
    transformOrigin:"center",
    ease: Power0.easeNone,
    force3D: true,
});

TimeLine.to(".parent", rotationSpeed, {
    rotation:360,
    transformOrigin:"center",
    ease: Power0.easeNone,
    force3D: true,
}, "-=" + rotationSpeed);

下面是修改后的示例：https://codepen.io/lyimmi/pen/brzQZY/