Jquery UI弹跳缓动功能使弹跳减少和/或控制弹跳次数

本文介绍了Jquery UI弹跳缓动功能使弹跳减少和/或控制弹跳次数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我可以看到有多人提问这样的问题。但没有明确的答案。我还没有找到任何易于操作的解决方案，这可能是因为我问了一个更困难的问题，然后我认为我是。 我是使用jQuery UI反弹缓动效果时，将对象放入屏幕中，然后我希望它弹跳两次，就好像它是一个重物而不是非常有弹性。有谁知道如何做到这一点？这里是Bounce函数，因为它本身就是在用户界面中，任何关于变化和协调的变量的想法？我试图自己弄清楚，但我在这种功能和数学逻辑方面的能力缺乏。 原生跳出功能： 跳动：function（p）{ var pow2， bounce = 4; （p return 1 / Math.pow（4，3） while（p }， 我发现了其他反弹功能，如： for（var a = 0，b = 1，result; 1; a + = b，b / = 2）{ if （（11-6 * a-11 * p）/ 4,2）+ Math.pow（b，2）（7-4 * a）/ 11）{ return（-Math.pow ））; $ p在这两个函数中我都知道p最基本的形式是距离你的目标有多远的百分比。 有人有任何想法吗？ 我也发现这个： https://github.com/clark-pan/Bounce-Function 哪些作品如果你想添加一大堆额外的代码真的很棒，而且我甚至已经想出了如何从中获得反弹，但我宁愿制定一个自定义缓动来让我实现自己的目标。 感谢任何拥有解决方案的人。解决方案从您已经提供的源代码中可以看到，反弹缓解函数只是一组 n 不连续沿着域0到1运行，其中n是您想要的反弹次数。所有你需要做的就是设计这些函数，以便他们的y = 1截取所有相互接触，并操纵它们的最大值/顶点来模拟一个很好的衰减反弹。 做到这一点，你需要知道如何移动一个函数，如何翻转一个函数，以及如何缩放/拉伸一个函数。阅读这个网页：操纵图表。 回想一下，我们可以用分解形式写出多项式函数，以便轻松指定它们的根（y = 0截距）。让我们使用quadratics来简化事情。例如，一个函数的形式如下： f（x）=标量*（x-root1）（x-root2）+常量。由于我们希望在y = 1而不是y = 0时发生反弹，因此我们为所有函数添加常数值1。为了使我们的反弹函数具有y = 1的截取值，必须将一个函数的最右边的y = 1截取值送入下一个函数。假设我们需要四次反弹。我们的方程如下所示： pre $ f $ ：令r0 = r1在x = 0时使函数的最大值为中心 f2（x）= a2（x-r1）（xr2）+1 $ b $ f3（x）= a3（xr2） （x-r3）+1 f4（x）= a4（x-r3）（x-1）+1 // r4 = 1，因为反弹在x = 1时结束 一旦建立了这个方程组，就只需调整y = 1截距的位置（r0到r3） ，和你的标量（a1到a4）给出你想要的间隔和幅度的反弹。这是我在Apple实用程序Grapher中创建的一个示例。我强烈建议你将这些方程式插入类似的图形程序或计算器中，并使用这些值（如果仅仅是因为你可以想出一个更平滑的反弹系统，你可能想要重新创建 所以我想象你的代码可能是像 bounce（x）：x = clamp（x，0,1）如果x> = 0且x 返回f1（x） elseif x> = r2且x return f2（x） ... else return fn（x） end 其中f1，f2，...，fn是你的函数（但尽可能多地乘以事物，合并常量等）和r1，r2，...。 ..，rn是函数的y = 1截距。 注意：这是一个简化的解决方案，因为我们假设我们只需要二次平滑缓动。您可以使用更高阶的函数，例如四分法，但现在我认为如果你只需要担心每个函数的两个根就更容易了。 I can see that there are multiple people asking questions like this. But there is no clear answer. I've yet to find any solutions that are easily workable and that might be because I'm asking a much more difficult question then I think I am.I'm using the jQuery UI bounce easing effect when animating to have an object(s) drop into the screen and then I'd like it to bounce only twice as if it's a heavy object and not very bouncy. Does any one know how to do this? Here is the Bounce function as it is natively in the UI, Any ideas on what variables to change and coordinate together? I've tried to figure it out on my own, but my ablities in this type of function and math logic are lacking.Native Bounce function:Bounce: function ( p ) { var pow2, bounce = 4; while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {} return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 );},I've found other bounce functions like:for(var a = 0, b = 1, result; 1; a += b, b /= 2) { if (p >= (7 - 4 * a) / 11) { return (-Math.pow((11 - 6 * a - 11 * p) / 4, 2) + Math.pow(b, 2) ); }}In both functions I know that "p" in it's most basic form is a percentage of how far away from your target you are.Does anyone have any ideas?I've also found this:https://github.com/clark-pan/Bounce-FunctionWhich works really great if you wanted to add a whole bunch of extra code, and I've even figured out how to get the bounce I want out of it, but I'd rather make a custom easing that allows me to accomplish my goals. Than rewrite the bounce-function above with a whole bunch of extraneous code.Thanks to anyone who has a solution. 解决方案 As you can see from the source code you've already provided, bounce ease functions are just a group of n discontinuous functions along the domain 0 to 1, where n is the number of bounces you want. All you need to do is design these functions so that their y=1 intercepts all touch each other, and manipulate their maxima/apexes to imitate a nicely decaying bounce.To do this you need to know how to shift a function, how to flip a function, and how to scale/stretch a function. Read over this webpage: Manipulating Graphs.Recall that we can write out polynomial functions in factored form in order to easily assign what their roots (y=0 intercepts) will be. Let's work with quadratics to keep things simple. So for example a function will be of the form: f(x) = scalar * (x-root1)(x-root2) + constant. Since we want the bounce to occur at y=1 rather than y=0, we add a constant value of 1 to all our functions. In order to make our bounce functions have their y=1 intercepts line up, you have to feed the right-most y=1 intercept of one function into the next. Let's say we want four bounces. Our equations would look likef1(x)=a1(x+r0)(x-r1)+1 // Note: make r0 = r1 to center function's maxima at x=0f2(x)=a2(x-r1)(x-r2)+1f3(x)=a3(x-r2)(x-r3)+1f4(x)=a4(x-r3)(x-1) +1 // r4 = 1 because bounce ends at x=1Once you have set up this system of equations, it is just a matter of tuning the locations of your y=1 intercepts (r0 through r3), and your scalars (a1 through a4) to give the desired spacing and amplitudes of your bounces. Here is an example I made in the Apple utility Grapher. I highly suggest you plug these equations into a similar graphing program or calculator and play with the values (if only for the fact that you can come up with a smoother looking system of bounces. You likely want to recreate this shape).So I would imagine your code might be something likebounce(x): x = clamp(x,0,1) if x >= 0 and x < r1 then return f1(x) elseif x >= r2 and x < r3 then return f2(x) ... else return fn(x) endWhere f1, f2, ..., fn are your functions (but multiply things out as much as possible, consolidate constants, etc) and r1, r2, ..., rn are the y=1 intercepts of your functions.NOTE: This is a simplified solution, as we assume that we only want quadraticly smooth easing. You could use higher order functions, e.g. a quartic, but for now I think it is easier if you only have to worry about two roots for each function. 这篇关于Jquery UI弹跳缓动功能使弹跳减少和/或控制弹跳次数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！