문제

일부 이미지에 시차 효과를 적용하고 있으며 저는 완화를 신청하고 싶습니다.시차의 논리는 매우 간단합니다. 이미지가 창의 중심에서이를 1 배로 표현하는 거리를 계산하고 0은 화면의 중간이고 0은 바닥입니다.나는 또한 이것을 화면의 상단 절반에 적용하여 -1이 맨 위로 될 것입니다.

이상적으로, 여기에 일부 기능을 꽂고 싶습니다 ( http://gsgd.co.uk/sandbox/jquery/easing/jquery.eassion.1.3.js ) 똑바로 in. 그래서 'easeoutsine'을 사용하고 싶다고 가정합니다 :

// t: current time, b: begInnIng value, c: change In value, d: duration function (x, t, b, c, d) { return c * Math.sin(t/d * (Math.PI/2)) + b; }

어떤 가치를 통과합니까?나는 이것이 지속 시간 기반 애니메이션이 아닌이기 때문에 가장 확실한 것은 D (기간)임을 생각합니다.이 방정식은 심지어 적합합니까?

참고 : 라이브러리를 사용하고 싶지 않아, 이것은 순수한 JS입니다.

도움이 되었습니까?

해결책

나 자신을 알아 냈습니다.모든 코드를 게시하지 않고 여기에 GIST가 있습니다.

function easeInQuart(t, b, c, d) {
  return c*(t/=d)*t*t*t + b;
}

var deltaY // The distance the element is from the bottom of
           // the screen expressed as a factor of 1

var origY // The original position
var distanceY // The distance it can move
var y = easeInQuart(deltaY, origY, distanceY, 1); 
.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top