jQuery.easing - easeOutCubic - 强调轻松

本文介绍了jQuery.easing - easeOutCubic - 强调轻松的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在使用Robert的jQuery easing插件（ 如您所见，几条曲线的形状类似于（7） - easeOutCubic 前端更陡峭。以下是几个例子...... （10） - easeOutQuart （16） - easeOutExpo easeOutExpo演示 似乎是最后一个， easeOutExpo 是最陡的股票函数。通过比较上面包含的等式中的差异，我们还可以操纵 easeOutExpo 等式来进一步陡峭。 这个自定义方程式非常快，然后速度极慢...... http://jsfiddle.net/kJZxQ/11/ 比上一次更加极端...... http://jsfiddle.net/kJZxQ/12/ 上次演示的持续时间增加到6秒，以夸大效果...... http://jsfiddle.net/kJZxQ/13/ 通过比较上述演示的数学方程，您可以看到正在操纵哪个变量来增强效果并相应地进行自己的微调。 我真的想想 eas eOutExpo 更像您描述的内容。从本质上讲，它是你的 easeOutCubic 等式，但前面只有更快，最后更慢。 I'm using the jQuery easing plugin by Robert (http://gsgd.co.uk/sandbox/jquery/easing/) and I need to emphasizing or drag out the ease effect.Basically, I want the ease effect to be really quick but then slow down greatly during the ease out.I believe I can do this using jQuery.easing.easeOutCubic( null, current_time, start_value, end_value, total_time) but I can't figure out how to use it properly.How can this be achieved? 解决方案 You do not need an easing plugin to do custom easing with jQuery. You only need the source JavaScript code of the one easing function you are going to use.Here is the easeOutCubic function obtained from the jQuery UI source code. See this thread for more.$.easing.easeOutCubic = function (x, t, b, c, d) { return c*((t=t/d-1)*t*t + 1) + b;}Now you can edit the function and/or rename it...$.easing.myEasing = function (x, t, b, c, d) { return c*((t=t/d-1)*t*t + 1) + b;}(All of the following examples use a 375 pixel blue square with a slideToggle() of 3 second duration. You can alter the 3 seconds (3000 ms) duration to demonstrate the effect to your liking. I chose 3 seconds to make it slow enough to see the differences.)Then you just put it inside your jQuery, something like this perhaps...$(document).ready(function(){ $.easing.myEasing = function (x, t, b, c, d) { return c*((t=t/d-1)*t*t + 1) + b; } $("#button").click(function() { $('#myDiv').slideToggle( 3000, // <-- Animation Duration (3000 ms) 'myEasing' // <-- the Name of your easing function ); });});Here is a demo of the above code which contains the easeOutCubic function renamed as myEasing and applied to a slideToggle() cube with a 3 second duration.http://jsfiddle.net/kJZxQ/Ok, now to your issue: You said that you want "...the ease effect to be really quick but then slow down greatly during the ease out."Here is a graph of easeOutCubic:You have two options, you can manipulate the easing equation itself or we can see if some other easing function has a similar curve, but steeper (faster) until the ease out part.This demo page visually shows you all the easing curves...http://api.jqueryui.com/easings/As you can see, several curves are shaped similarly to (7)-easeOutCubic yet are steeper on the front end. Here are several examples...(10)-easeOutQuarteaseOutQuart Demo(13)-easeOutQuinteaseOutQuint Demo(16)-easeOutExpoeaseOutExpo DemoIt seems like the last one, easeOutExpo is the steepest stock function available. By comparing the differences in the equations contained above, we can also manipulate the easeOutExpo equation to steepen the curve even further.This custom equation is ridiculously fast and then slows down tremendously...http://jsfiddle.net/kJZxQ/11/Even more extreme than the last...http://jsfiddle.net/kJZxQ/12/Duration increased on last demo to 6 seconds to exaggerate the effect...http://jsfiddle.net/kJZxQ/13/By comparing the mathematical equations of the above demonstrations, you can see which variable is being manipulated to enhance the effect and make your own fine adjustments accordingly.I really think easeOutExpo is more like what you describe. Essentially, it's your easeOutCubic equation but only faster on the front and slower on the end. 这篇关于jQuery.easing - easeOutCubic - 强调轻松的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！