<div id="box1" class="box w-[50px] h-[50px] bg-blue-600 rounded-lg"></div>
<hr class="my-3"/>
<button id="play" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">播放</button>
|
<button id="stop" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">暫停</button>
|
<button id="reverse" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">反轉</button>
|
<button id="speedUp" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">動畫加速</button>
|
<button id="slowDown" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">動畫減速</button>
|
<button id="restart" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">重新開始</button>
|
<button id="seek" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">跳轉到特定秒數</button>
|
<button id="progress" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">當前動畫進度(1 代表結束)</button>
|
<button id="timeScale" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">當前動畫速度</button>
|
<button id="kill" class="p-4 bg-sky-400 rounded-lg hover:bg-sky-800 hover:text-white">殺死動畫(按下後動畫即失效)</button>
const tween = gsap.to('#box1', {
duration: 10,
x: 500,
ease: 'bounce.out',
});
document.getElementById('play').addEventListener('click', () => {
tween.play();
});
document.getElementById('stop').addEventListener('click', () => {
tween.pause();
});
document.getElementById('reverse').addEventListener('click', () => {
tween.reverse();
});
document.getElementById('speedUp').addEventListener('click', () => {
tween.timeScale(2);
});
document.getElementById('slowDown').addEventListener('click', () => {
tween.timeScale(0.5);
});
document.getElementById('restart').addEventListener('click', () => {
tween.restart();
});
document.getElementById('seek').addEventListener('click', () => {
tween.seek(2);
});
document.getElementById('progress').addEventListener('click', () => {
console.log(tween.progress());
});
document.getElementById('timeScale').addEventListener('click', () => {
console.log(tween.timeScale());
});
document.getElementById('kill').addEventListener('click', () => {
tween.kill();
});
This Pen doesn't use any external CSS resources.