얕 은 것 에서 깊 은 것 으로 - javascript 애니메이션 원리 해석 (1)
5067 단어 JavaScript
핵심 애니메이션 의 핵심 원 리 는 복잡 하지 않 습 니 다. 이렇게 몇 줄 의 코드 만 있 습 니 다.
var fx = function (ontween, onend, duration) {
var pos, runTime,
startTime = + new Date,
timer = setInterval(function () {
runTime = + new Date - startTime;
pos = runTime / duration;
if (pos >= 1) {
clearInterval(timer);
onend(pos);
} else {
ontween(pos);
};
}, 13);
};
애니메이션 시간 (duration) 을 N 부 로 나 누 어 주기 적 으로 리 셋 함 수 를 실행 합 니 다. 그 다음 에 우 리 는 요소 의 CSS 값 을 조작 할 수 있 습 니 다.데모 코드:
<div id="fx" style="width:150px;height:150px;background:#36C;"></div>
<script>
// DEMO
document.getElementById('fx').onclick = function () {
var from = 150; //
var to = 500; //
var elemStyle = this.style;
function ontween (pos) {
elemStyle.height = from + (to - from) * pos + 'px';
};
function onend (pos) {
ontween(pos);
};
fx(ontween, onend, 400);
};
</script>
상기 코드 와 결합 하여 간단 한 고도 증가 애니메이션 을 실현 하 였 는데 매우 간단 하지 않 습 니까?fx 함 수 는 애니메이션 의 진 도 를 제어 하 는 추상 적 인 층 일 뿐 DOM 과 아무런 관계 가 없다 는 것 을 알 수 있다.포장 기 상기 코드 는 하나의 스타일 애니메이션 만 실현 할 수 있 습 니 다. 여러 스타일 애니메이션 에 대해 함수 포장 fx 엔진 을 쓸 수 있 고 완 성 된 리 셋 함수 와 애니메이션 시간 을 지원 합 니 다.
var animate = function (elem, css, duration, callback) {
function ontween (pos) {
var obj, val, form, to, name, unit,
i = 0, len = css.length;
for (; i < len; i++) {
obj = css[i];
from = obj[0];
to = obj[1];
name = obj[2];
unit = obj[3];
val = from + (to - from) * pos;
elem.style[name] = val + unit;
};
};
function onend (pos) {
ontween(pos);
callback.call(elem);
};
fx(ontween, onend, duration);
};
데모 코드:
<div id="fx" style="width:150px;height:150px;position:absolute;top:20px;left:20px;
background:#36C;color:#FFF;text-align:center; line-height:150px;font-size:12px">FX</div>
<script>
// DEMO
document.getElementById('fx').onclick = function () {
animate(this, [
[150, 500, 'width', 'px'],
[150, 300, 'height', 'px'],
[150, 300, 'lineHeight', 'px'],
[20, 60, 'top', 'px'],
[20, 350, 'left', 'px'],
[12, 36, 'fontSize', 'px']
], 400, function () {
this.innerHTML = 'FX {BY TANGBIN}';
});
};
</script>
fx 함 수 는 한 자동차의 엔진 과 같 고 animate 함 수 는 운전 실 입 니 다. 우 리 는 가능 한 한 엔진 을 더욱 강하 게 합 니 다 (진도 제어, 성능, 확장 성 을 중시 합 니 다). 운전 실 을 더욱 편안하게 합 니 다 (DOM 표현 층, 인터페이스 우아 함 을 중시 합 니 다).주소
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.