Jquery UI 바운스 이완 기능으로 바운스 횟수를 줄이고 바운스 횟수를 조절할 수 있습니다.

Question

이렇게 여러 가지 질문을하는 사람이 있습니다. 그러나 분명한 대답은 없습니다. 나는 쉽게 해결할 수있는 솔루션을 아직 찾지 못했고 그 이유는 훨씬 어려운 질문을 던지고 있기 때문일 수도 있습니다.

오브젝트를 화면에 떨어 뜨리도록 애니 메이팅 할 때 jQuery UI 바운스 이징 효과를 사용하고 있는데 무거운 물체와 매우 탄력이없는 것처럼 바운스하고 싶습니다. 어느 누구도이 일을하는 방법을 알고 있습니까? UI에 기본적으로있는 바운스 기능은 무엇입니까? 어떤 변수를 변경하고 함께 조정할 것인지에 대한 아이디어가 있습니까? 나는 스스로 알아 내려고 애썼지 만, 이런 유형의 함수와 수학 논리에서의 나의 ablities는 부족하다.

기본 바운스 기능 : 그것은 가장 기본적인 형태의에서 "P는"방법의 비율이다 내가 아는 두 기능에서

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)); 
    } 
} 

:

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); 
}, 

내가 좋아하는 다른 바운스 기능을 발견했습니다 너는 너의 목표에서 멀리 떨어져있다.

누구에게 아이디어가 있습니까?

나는이를 발견했습니다 당신이 추가 코드의 전체 무리를 추가하고자한다면 정말 좋은 작품, 나는 심지어 내가 원하는 반송하는 방법을 알아 냈어요

https://github.com/clark-pan/Bounce-Function

그것에서 벗어나지 만, 나는 내 목표를 성취 할 수있는 관습적인 완화를 만들기를 원합니다. 위의 바운스 기능을 전체 코드와 함께 재 작성하는 것보다.

해결책이있는 사람 덕분입니다.

Answer 1

이미 제공 한 소스 코드에서 알 수 있듯이 바운스 용이함 기능은 도메인 0-1에 따라 n 개의 불연속 기능을 가진 그룹이며 여기에서 n은 원하는 바운스 수입니다. 당신이해야 할 일은 y = 1 인터셉터가 모두 서로 닿도록 이들 함수를 설계하고 멋지게 부식하는 바운스를 모방하기 위해 최대/정점을 조작하는 것입니다.

이렇게하려면 함수를 이동하는 방법, 함수를 뒤집는 방법 및 함수의 크기를 조절/늘리는 방법을 알아야합니다. 이 웹 페이지 (Manipulating Graphs)를 읽으십시오.

우리는 뿌리 (y = 0 절편)가 무엇인지를 쉽게 할당하기 위해 인자 화 된 형태로 다항식 함수를 작성할 수 있다는 것을 상기하십시오. 일을 간단하게하기 위해 이차원으로 작업합시다. 예를 들어 함수의 형식은 f(x) = scalar * (x-root1)(x-root2) + constant입니다. 바운스가 y = 0이 아닌 y = 1에서 발생하기를 원하기 때문에 모든 함수에 상수 값 1을 추가합니다. 바운스 함수의 y = 1 인터셉트 라인을 만들려면 한 함수의 가장 오른쪽 y = 1 인터셉트를 다음에 전달해야합니다. 네 번 반송을 원한다고 가정 해 봅시다. 당신이 방정식이 시스템을 설정 한 후에 우리의 방정식

f1(x)=a1(x+r0)(x-r1)+1 // Note: make r0 = r1 to center function's maxima at x=0 
f2(x)=a2(x-r1)(x-r2)+1 
f3(x)=a3(x-r2)(x-r3)+1 
f4(x)=a4(x-r3)(x-1) +1 // r4 = 1 because bounce ends at x=1 

과 같을 것이다, 당신의 Y = 1 차단 (R3를 통해 R0)의 위치를 ​​조정의 문제이며, A4 통해 스칼라 (A1)를 사용하여 반송의 원하는 간격과 진폭을 제공합니다. 다음은 Apple 유틸리티 Grapher에서 만든 예입니다. 나는이 방정식을 유사한 그래프 프로그램이나 계산기에 연결하고 값을 가지고 놀 것을 제안합니다. (더 부드럽게 보이는 바운스 시스템을 생각해 낼 수있는 경우에만 this 모양을 다시 만들고 싶을 것입니다.)

그래서 난 당신의 코드가

bounce(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) 
    end 

F1, F2, ..., FN 당신의 함수입니다

같은 수 있습니다 상상 (그러나 가능한 한 많은 일을 곱 것, 통합 상수 등)이고 r1, r2, ..., rn은 함수의 y = 1 절편입니다.

참고 :이 방법은 단순한 이퀄라이징을 원한다고 가정하므로 단순화 된 솔루션입니다. 고차 함수를 사용할 수 있습니다 (예 : quartic이지만, 지금 당장은 각 기능에 대해 두 가지 뿌리에 대해서만 걱정하면된다고 생각합니다.