<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title> Sprite Sheet Animation</title>
<style>
body {
font-size: 12px;
}
section {
width: 500px;
text-align: center;
}
/* star */
.star {
/* 如果爲橫向的雪碧圖 則 height 爲圖片分辨率的高，反之若爲縱向雪碧圖 則 width 爲圖片分辨率的寬*/
/* 這裏爲橫向圖 1800*60 所以height:60px ，寬的話隨意設定只要能把圖片顯示出來都是可以的*/
width: 60px;
height: 60px;
box-shadow: 0 0 5px 0 #939393;
/*這些都是爲了顯眼設置 不是必須的 */
margin: 10px auto;
/*這些都是爲了顯眼設置 不是必須的 */
background: url(./image/stars.png);
}
@keyframes star {
0% {
background-position: 0;
}
100% {
/*這裏的1740是用分辨率的寬高相減得到 */
background-position: -1740px;
}
/* to {background-position:100%;} */
}
#starcss {
/*star是keyframes動畫名稱 第一個時間是完成動畫花費的時間第二是延遲多少秒開始動畫 然後是無限循環，normal是正常順序播放 （reverse爲反向）*/
animation: star 2000ms steps(29, end) 0ms infinite normal;
/* 這個動畫中的 steps(29, end) 29指的是雪碧圖裏面圖與圖的間隔，必須爲正整數，必選，把動畫分割的段數， 即 a.b.c（a|b|c） 之中有兩個點（或者|），分爲兩段*/
/* 用css 需要知道間段數 ：29 */
}
/* 地鼠 */
.ds {
width: 400px;
height: 430px;
margin: 10px auto;
background: url(./image/Mouse.png);
}
@keyframes mouse {
from {
background-position: 0;
}
to {
/*這裏的9890是用分辨率的寬高相減得到 */
background-position: -9890px;
}
/* to {background-position:100%;} 一樣*/
}
#ds {
/*star是keyframes動畫名稱 第一個時間是完成動畫花費的時間第二是延遲多少秒開始動畫 然後是無限循環，normal是正常順序播放 （reverse爲反向）*/
/* animation: mouse 2000ms steps(23, end) 0ms infinite normal; */
/* 用css 需要知道間段數 ：23 */
}
/* light */
.light {
position: relative;
width: 614px;
height: 161px;
background: url(./image/LOGO_05.png) no-repeat;
}
@keyframes light {
from {
background-position-y: 0;
}
to {
background-position-y: 100%;
}
}
.lighta {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(./image/light.png) no-repeat;
background-position: 0 0;
background-size: 100% auto;
/*star是keyframes動畫名稱 第一個時間是完成動畫花費的時間第二是延遲多少秒開始動畫 然後是無限循環，normal是正常順序播放 （reverse爲反向）*/
animation: light 1450ms steps(23, end) 0ms infinite normal;
/* 用css 需要知道間段數 ：23 */
}
</style>
</head>
<body>
<!-- 星星js控制的 -->
<section>
<!-- <div class="star" id="starjs"></div>
<div>星星js控制的</div> -->
<!-- <span>
<button id="cssPlay">播放/暫停</button>
<button id="cssSlowDown">-減速-</button>
<button id="cssSpeedUp">+加速+</button>
<button id="cssReverse">切換播放順序</button>
</span> -->
</section>
<script>
let css = document.getElementById('starjs');
// let cssPlay = document.getElementById('cssPlay');
// let cssSlowDown = document.getElementById('cssSlowDown');
// let cssSpeedUp = document.getElementById('cssSpeedUp');
// let cssReverse = document.getElementById('cssReverse');
let xPos = 0;
let interval = 33.333333; //100 是3s
let direction = -1; // -1: forward, 1: reverse
function cstarnimate() {
// //需要知道圖片分辨率的高，寬
css.style.backgroundPosition = direction * (xPos += 60) % 1800 + 'px';
}
function resetInterval() {
clearInterval(timer);
timer = setInterval(cstarnimate, interval);
}
/* Initial timer setup */
// let timer = setInterval(cstarnimate, interval);
// cssPlay.addEventListener('click', function() {
// if(timer) {
// clearInterval(timer);
// timer = undefined;
// } else {
// timer = setInterval(cstarnimate, interval);
// }
// });
// cssSlowDown.addEventListener('click', function() {
// if(interval + 10 >= 200) interval = 200;
// else interval += 10;
// resetInterval();
// });
// cssSpeedUp.addEventListener('click', function() {
// if(interval - 10 <= 20) interval = 20;
// else interval -= 10;
// resetInterval();
// });
// cssReverse.addEventListener('click', function() {
// if(direction === 1) direction = -1;
// else direction = 1;
// resetInterval();
// });
</script>
<section>--------</section>
<!-- 星星css animation 寫的 -->
<section>
<div class="star" id="starcss"></div>
<div>星星css animation 寫的</div>
<!-- <span>
<button id="starcssPlay">播放/暫停</button>
<button id="starcssSlowDown">-減速-</button>
<button id="starcssSpeedUp">+加速+</button>
<button id="starcssReverse">切換播放順序</button>
</span> -->
</section>
<script>
// var starcss = document.getElementById('starcss');
// let starcssPlay = document.getElementById('starcssPlay');
// let starcssSlowDown = document.getElementById('starcssSlowDown');
// let starcssSpeedUp = document.getElementById('starcssSpeedUp');
// let starcssReverse = document.getElementById('starcssReverse');
// starcssPlay.addEventListener('click', function() {
// if(getComputedStyle(starcss).animationPlayState === 'running') {
// starcss.style.animationPlayState = 'paused';
// } else {
// starcss.style.animationPlayState = 'running';
// }
// });
// starcssSlowDown.addEventListener('click', function() {
// let duration = +getComputedStyle(starcss).animationDuration.slice(0, -1);
// if(duration + 0.3 >= 6) duration = 6;
// else duration += 0.3;
// starcss.style.animationDuration = duration + 's';
// });
// starcssSpeedUp.addEventListener('click', function() {
// let duration = +getComputedStyle(starcss).animationDuration.slice(0, -1);
// if(duration - 0.3 <= 0.6) duration = 0.6;
// else duration -= 0.3;
// starcss.style.animationDuration = duration + 's';
// });
// starcssReverse.addEventListener('click', function() {
// if(getComputedStyle(starcss).animationDirection === 'normal') {
// starcss.style.animationDirection = 'reverse';
// } else {
// starcss.style.animationDirection = 'normal';
// }
// });
</script>
<section>--------</section>
<!-- 地鼠 css 和js 分別都有-->
<section>
<div class="ds" id="ds"></div>
<div>地鼠</div>
</section>
<script>
// 用js 不需要知道間段數
var ds = document.getElementById('ds');
var xPos4 = 0;
var interval4 = 50; //100 是3s 週期定時器，什麼時間開始執行
var direction4 = -1; // -1: forward, 1: reverse 負數爲正 從左往右播放
function cstarnimate() {
//橫向雪碧圖 高分辨率寬430px
// 求餘的好處是 不會出現小數，而且利用的是加法 ， 最初的初始位置是430 ，然後一直累加 860 ,
// 求餘之後 860% 10320 = 860 , 2580% 10320 = 2580 ... 最後 10320%10320 = 0， 這些都是倍數關係， 10750%10320 = 430，往後的結果都是重複的
// 不想要數字那麼大也可以加個判斷
if (xPos4 == 10320) xPos4 = 0; //可以重新歸0， 初始位置
xPos4 = xPos4 + 430; //需要知道圖片分辨率的高
ds.style.backgroundPosition = direction4 * xPos4 % 10320 + 'px';
}
var timer4 = null;
function resetInterval() {
clearInterval(timer4);
timer4 = setInterval(cstarnimate, interval4);
}
/* Initial timer setup */
timer4 = setInterval(cstarnimate, interval4);
</script>
<section>--------</section>
<!-- css animation流光字 -->
<section>
<div class="light">
<div class="lighta"></div>
</div>
<div>流光字</div>
</section>
</body>
</html>
