Tween.js 애니메이션에 대한 자세한 소개
- 零下一度원래의
- 2017-06-26 13:34:382350검색
1. 신청 및 전화 사용법.
먼저 본 블로그 포스팅과 관련없는 신청 및 전화 사용법에 대해 말씀드리겠습니다. 실제로 Apply와 Call의 사용법은 동일하지만 매개변수가 다릅니다. Apply는 배열인 반면 호출은 열거형과 유사하게 개별적으로 전달됩니다.
1. Liezi는 인수를 표준 배열로 변환하며 푸시 및 기타 방법을 사용할 수 있습니다.
function test(){//arguments.push(5); //arguments.push is not a function console.log(arguments)var arg = Array.prototype.slice.apply(arguments,[]); // var arg = Array.prototype.slice.call(arguments,'');console.log(arg); //[1,2,3,4]arg.push(5); // [1,2,3,4,5]}
test(1,2,3,4);2. 인수의 매개변수를 배열에 직접 푸시하는 방법은 무엇입니까? (신청도 도와주세요)
function test(){var arg = [];
Array.prototype.push.apply(arg,arguments);
console.log(arg); // [1,2,3,4] 是不是发现要把一个数组//插入到另外一个数组的后面不用for循环了，也不用contact了呢？//其实apply 和call还是有多用法，比如继承。其实主要是把//前面对象的方法赋给后面对象而已。比如 object.apply(object1,arg)//把object的方法赋给 object1。而 arg是参数。}
test(1,2,3,4);이번화는 여기서 끝입니다. 다음은 tween.js에 대해 주로 설명합니다
2. Tween.js에 대하여
1. Tween.js는 다양한 클래식 애니메이션 알고리즘을 포함하는 JS 리소스입니다. 실제로 jQuery.easing.js와 더 유사합니다. 주요 메소드 이름도 동일합니다. 압축하지 않은 코드는 800줄에 불과합니다. 
에는 주로 다음이 포함됩니다.
Linear: 선형 균일 모션 효과
-
Quadratic: 2차 여유(t^2); ic
: 세 번째로 완화 거듭제곱(t^3); - Quartic
: 4제곱(t^4)
- Quintic
: 5제곱(t^5) ;
- Sinusoidal
: 사인곡선 이징(sin(t));
- Exponential
: 지수 곡선 이징(2^t)
- Circular
: 원형 곡선 이징(sqrt( 1-t^2));
- Elastic
: 지수적으로 감소하는 정현파 이징
- Back
: 범위를 넘는 3차 이징((s+ 1)*t^3 – s*t^2)
- Bounce
: 기하급수적으로 감소하는 반동 완화.
각 효과는 다음과 같은 세 가지 완화 방법으로 나뉩니다. -
easeIn
: 0부터 가속, 즉 먼저 느리게 한 다음 빠르게
- easeOut
: 감속 0으로, 즉 처음에는 빠르게, 그 다음에는 느리게
- easeInOut
: 완화는 전반부에 0부터 시작하여 후반부에 0으로 감속됩니다.
-
이러한 모든 여유 알고리즘은 다음 네 가지 매개변수
t,b,c,d, 그 의미는 다음과 같습니다/* * t: current time（当前时间）； * b: beginning value（初始值）； * c: change in value（变化量）； * d: duration（持续时间）。 */
2.console.log(TWEEN);
easeIn 또는 easeOut 중 어느 것이 더 빠르고 느린지 기억하지 못하는 친구들이 많습니다. 저의 독특한 사악한 표기법을 다시 한 번 가르쳐 드리겠습니다. OOXX. 들어갈 때(easeIn) 처음에는 느리다가 들어갈 때(easeOut)로 갈수록 빨라집니다. 아주 빠르게 시작됐지만 막 나오려다가 떠나기 꺼려지자 속도가 느려졌다. 이는 여기에 있는 애니메이션 효과와 완전히 일치합니다. console.log(TWEEN)
easeIn和easeOut哪个先快，哪个先慢一直记不清楚，我这里再给大家传授一遍我独门的邪恶记法，想想我们第一次OOXX，是不是进去(easeIn)的时候都是先慢，等进去了就快了；然后出来(easeOut)的时候，开始很快，都要出来了恋恋不舍速度就慢了。跟我们这里的动画效果是完全匹配的。所有的这些缓动算法都离不开下面4个参数，t, b, c, d
TWEEN에는 수많은 메소드와 객체가 탑재되어 있음을 알 수 있습니다. 하나씩 파헤쳐 보면 구체적인 용도를 알게 될 것입니다.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#target{width: 100px;height: 100px;background: red;}</style></head><body><div id="target"></div></body><script src="tween.js?1.1.11"></script><script src="index.js?1.1.11"></script></html>
var position;var target;var tween, tweenBack;
init();
animate();function init() {
position = {x: 100, y: 100, rotation: 0};
target = document.getElementById('target');
tween = new TWEEN.Tween(position)
.to({x: 700, y: 200, rotation: 359}, 2000)
.delay(1000)
.easing(TWEEN.Easing.Elastic.InOut)
.onUpdate(update);
tweenBack = new TWEEN.Tween(position)
.to({x: 100, y: 100, rotation: 0}, 3000)
.easing(TWEEN.Easing.Elastic.InOut)
.onUpdate(update);
tween.chain(tweenBack);
tweenBack.chain(tween);
tween.start();
}function animate( time ) {
requestAnimationFrame( animate );
TWEEN.update( time );
}function update() {
target.style.webkitTransform = 'translate('+position.x+ 'px'+','+ position.y + 'px' +')' + 'rotate(' + Math.floor(position.rotation) + 'deg)';//target.style.webkitTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';
// target.style.MozTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';}
각 API는 추적할 소스 코드에 해당합니다. 사용법만 알아두세요. 소스코드를 비교하면 800줄이 조금 넘습니다.
4. 모션 기능
(function() {var lastTime = 0;var vendors = ['ms', 'moz', 'webkit', 'o'];for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
} if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {var currTime = new Date().getTime();var timeToCall = Math.max(0, 16 - (currTime - lastTime));var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;return id;
}; if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
5. 사람의 삶에는 작은 길, 우회로, 큰 길, 울퉁불퉁한 진흙길이 많습니다. 아무튼 제 고향은 울퉁불퉁한 진흙길로 가득 차 있습니다. 제가 첫 번째 웹사이트를 접한 지 거의 6년이 되었습니다. 시간은 너무나 빨리 흐르고, 삶의 궤적도 빠르게 변합니다. 울퉁불퉁한 진흙길에서 밝은 길을 찾으려면 후퇴할 생각 없이 앞으로 나아가야 합니다. 한 분야에서 얼마나 멀리 갈 수 있는지는 얼마나 오랫동안 지속할 수 있는지에 달려 있습니다. 어떤 사람들은 한 분야에서 10,000시간 동안 끈기 있게 노력하면 이 분야의 달인이라고 말합니다. 10000/24? 400일이 넘은 것 같습니다. 잠자는 시간, 일하는 시간, 게임하는 시간은 제외됩니다. 10,000시간에 도달하려면 4~6년이 걸릴 것으로 추정된다. 또한 모두 행복한 하루 되시고 모든 일이 잘되길 바랍니다.
위 내용은 Tween.js 애니메이션에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!