TMALL에 쇼핑 카트에 제품을 추가하기위한 포물선 애니메이션이 있으며, 사용자에게 운영이 성공적이며 장바구니의 위치를 알려줍니다. 비즈니스에서도 비슷한 효과가 필요합니다. 구현 프로세스 메모를 기록하고 데모를 시작하십시오.
처음에는 포물선 기능을 사용하여 그렇게 생각하지 않았으며, 그런 기능이 있다는 것을 잊었습니다. 나는 포물선이 본질적으로 오른쪽과 위쪽 방향으로 속도가 있다고 생각했으며 (위의 데모까지) 오른쪽 속도는 균일하고, 상향 방향으로의 속도가 감소한 다음 역 방향이 증가한다고 생각했습니다. 요소의 왼쪽 및 상단 값은 시간이 지남에 따라 변하고 요소의 움직임 궤적은 포물선입니다. 이 아이디어는 보편적이지 않으며 구현은 비교적 복잡하므로 포기했습니다.
나중에, 나는 Zhang Xinxu의 포물선 기능의 구현과 바보의 부두의 개선을 언급하고 갑자기 그것을 깨달았습니다.
아이디어를 다시 볼 것입니다. 포물선 함수 y = a*x*x + b*x + c, 여기서 a는 0, a, b 및 c와 같지 않습니다. X와 Y는 포물선이 통과하는 포물선의 좌표입니다. a는 a> 0 위쪽의 개구부와 <0의 아래쪽으로 개구부가있는 포물선의 개방 방향을 결정합니다. TMALL의 포물선 오프닝은 하향이라는 것이 분명하며 A는 개구부의 크기를 결정합니다. 값이 작을수록 개구부가 클수록 포물선이 부드럽고 그 반대도 마찬가지입니다. 따라서 A의 값은 사용자 정의 될 수 있으며, 이는 두 좌표 (시작점 및 엔드 포인트 앉아있는 것, 즉 왼쪽 및 상단 값)를 아는 것과 동일합니다. 알려지지 않은 두 가지 숫자를 찾으면 중학교의 수학, 이진 2 차 방정식을 사용하는 방법을 배울 수 있습니다.
y1 = a*x1*x1 + b*x1 + c
y2 = a*x2*x2 + b*x2 + c
A는 알려져 있으며, 두 개의 알려진 좌표를 대체하면 [X1, Y1] [X2, Y2]는 B와 C의 값을 초래할 수 있으며 X와 Y의 상응하는 관계가 존재한다.
포물선 개구부가 위 또는 아래쪽인지 여부에 관계없이, 수평 방향으로 이동하는 요소의 속도는 변하지 않아도됩니다. 즉, 왼쪽 값은 일정한 속도로 변합니다. 포물선 이동 시간 t를 설정할 수 있습니다. 수평 방향의 요소의 속도는 speedx = (x2 -x1)/t입니다. 30ms마다 실행되는 타이머를 설정하십시오. 타이머가 실행될 때마다 왼쪽 값은 현재 x = speedx *입니다. 타이머가 실행되었습니다. 함수 y = a*x*x + b*x + c를 대체하여 최고 값을 얻습니다. 이 모든 계산은 출발점 좌표를 원점으로 변환하는 데 기초하기 때문에 (종점은 또한 그에 따라 번역됩니다), 움직이는 요소의 왼쪽/상단 값을 설정할 때, 시작점 요소의 초기 왼쪽/상단 값을 추가해야합니다. 자세한 내용은 F12의 데모 코드를 확인하십시오.
메인 코드 :
/** * js 포물선 애니메이션 * @param {[object]} origin [start element] * @param {[object]} target [target point element] [target point element] * @param {[object]} 요소 [move] * @param {[number]} a [parabola radian] * @param {[number]} time [@param {function}} 포물선 실행이 완료됩니다] */ var parabola = function (config) {var b = 0, interval = 15, timer = null, x1, x2, y2, originx, originy, diffx, diffy; this.config = config || {}; // start point this.origin = $ (this.config.origin) || null; // 종말점 this.target = $ (this.config.target) || null; // 동작 요소 this.element = $ (this.config.element) || null; // radian this.a = this.config.a || 0.004; // 이동 시간 (MS) this.Time = this.config.time || 1000; this.init = function () {x1 = this.origin.offset (). 왼쪽; y1 = this.origin.offset (). 상단; x2 = this.target.offset (). 왼쪽; y2 = this.target.offset (). 상단; originx = x1; originy = y1; diffx = x2-x1; diffy = y2-y1, speedx = diffx/this.time; // 포물선 함수에 따라 y = a*x*x + b*x + c에 따라 포물선의 시작점은 좌표 원점 [0, 0]으로 번역되고 그에 따라 그에 따라 번역됩니다. 그런 다음 포물선은 원점 [0, 0]을 통과하고 c = 0을 얻습니다. // 종점이 번역 된 후, y2 -y1 = a*(x2 -x1)*(x2 -x1) + b*(x2 -x1) // diffy = a*diffx*diffx + b*diffx; // 상수 B의 값은 b = (diffy -this.a*diffx*diffx)/diffx를 찾을 수 있습니다. this.element.css ({왼쪽 : x1, top : y1}) 이것을 반환합니다. } // 애니메이션 메소드를 결정하십시오 .movestyle = function () {var movestyle = 'position', trectDiv = document.createElement ( 'div'); if (testdiv의 '자리 표시 자') {[ '', 'ms', 'moz', 'webkit']. foreach (function (pre) {var transform = pre + (pre? 't': 't') + 'ransform'; if (treaddiv.style) {movestyle = transfer;}})} return movestryle; } this.move = function () {var start = new date (). gettime (), movestyle = this.movestyle (), _this = this; timer = setInterVal (function () {if (new date (). gettime () - start> _this.time) {clearinterval (timer); _this.element.css ({left : x2, top : y2}) _this.config.callback === 'function'&& _this.config. } x = speedx*(gettime () - 시작) y = _this.a*x*x+b*x; window.requestanimationframe (_this.element [0] .Style [movestyle] = 'translate ('+x+'px,'+y+'px)'; } this.init (); }위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.