오늘은 jquery와 svg를 기반으로 한 멋진 웹 애니메이션을 여러분과 공유하겠습니다. 애니메이션 효과가 아주 멋지네요. 아래에는 재생, 느린 애니메이션 및 역방향 애니메이션 버튼도 있습니다. 효과는 매우 아름답습니다. 렌더링을 살펴보겠습니다.
구현 코드.
var 토마토 = $('#tomato'),bracketRight = $('.bracketRight'),bracketLeft = $('.bracketLeft'),tomatoLeft = $('.tomatoLeft'),tomatoRight = $('.tomatoRight') , 토마토잎 = $('.tomatoLeaves'), 문자 = $('#ihtText 경로'), $btnPlay = $('#btnPlay'), $btnSlowMo = $('#btnSlowMo'), $btnReverse = $(' #btnReverse'), tl;
tl = 새로운 TimelineMax();
tl.set([tomatoLeft], { xPercent: 23.6 });
tl.set([tomatoLeaves], { xPercent: 41 });
tl.set([토마토], {
x퍼센트: 2,
회전: 13,
변환원점: '중심 중심'
});
tl.set(토마토, { yPercent: -200 });
tl.set(bracketRight, { xPercent: 200 });
tl.set(bracketLeft, { xPercent: -200 });
tl.to([
대괄호맞습니다
대괄호왼쪽
], 0.3, {
x퍼센트: 0,
용이성: Power4.easeOut
}, 0.5).to(토마토, 0.5, {
y퍼센트: 0,
용이성: Bounce.easeOut
}).to(토마토, 0.2, {
회전: 0,
x퍼센트: -4
}).to([
토마토왼쪽,
토마토잎
], 0.2, { xPercent: 0 }, 'split').to(토마토, 0.2, {
회전: 0,
x퍼센트: 0
}, 'split').to(tomatoRight, 0.2, { xPercent: 2 }, 'split').staggerFrom(letters, 0.01, { autoAlpha: 0 }, 0.03).add('end');
$btnPlay.click(함수 () {
tl.timeScale(1).seek(0);
});
$btnSlowMo.click(함수 () {
tl.timeScale(0.2).seek(0.5);
});
$btnReverse.click(함수 () {
tl.timeScale(1).seek('end').reverse();
});
//@ sourceURL=pen.js