JQ動畫
寶可夢開場動畫
動畫原理
利用人的視覺暫留，不同秒數改變物件位置，增加場景
題外話 : 如何判別趨勢
語言
工科 pythen ， 其他科系 R
結果人工智慧深度機器學校較夯 蟒蛇比較適用
協定
4g LTE WiMax
技術不重要
殺手集應用 application
任天堂快死掉 - > wii
技術陀螺儀
應用體感
但開創一個新的可能性
有應用後就開始重視content
遊戲就有獨占遊戲
內容會帶動硬體
押寶性的發展決策
M-2003-Taiwan
押錯寶 壓到 wimax
3g 384k 影音通話 就不是殺手級應用
但礙於很多東西，如硬體差、頻寬低
ＩＴＵ決定發展
ＩＮＴＥＬ推動４Ｇ ＷＩＭＡＸ
台灣北中南各一家電信公司建置網路環境
南部為大同電信，全島ＷＩＭＡＸ
結果只有伺服器端有ＷＩＭＡＸ，但客服端沒有這種技術
南韓壓ＬＴＥ值接押對寶
ＣＡＲＥ基地台蜂巢網路ＨＡＮＤＯＦＦ換基地台
所以移動時根本沒訊號換手速度
後來就改成暫存資料轉換等等技術輔助
日本先從無線網路開始有線網路爛
Pdc phs
但日本網路更慢，日本多貼圖傳簡訊所以
Gprs很夯 <-> 2.5g <-> 3g
根據各地區的使用習性
５Ｇ 無線網路ＷＩＦＩ整合行動通訊網路ＬＴＥ
ＷＩＦＩ無法換手
ＷＩＦＩ ５０Ｍ
ＷＩＭＡＸ １０ＫＭ
ＶＥＲＴＩＣＡＬＨＡＮＤＯＦＦ
垂直換手 異質性網路換手
無縫換手
手機上網走到某個有ＷＩＦＩ的地方時直接切換ＷＩＦＩ
資安可以靠區塊鏈但速度太慢
彼特畢區塊鏈
金融可以但即時遊戲無法
台灣大缺點 代工依賴品牌要有相關設計，技術也要跟上
但鴻海懂得買別人缺啥直接買公司買技術，得靠高層眼光好看得懂趨勢
ＸＸＸ概念股
公安 人為操作 電腦操作衝突
回到正題
場景是一層疊一層（圖層概念 還有深度
ＸＹＺ
動畫物件順序
場景變化等等
都是寫程式時要考量的
首先
用ＤＩＶ建置場景並將需要出現的演員（圖片文字等等．．）置入
此時不考慮位置會依照ＨＴＭＬ預設排列
此時要考慮
上下左右前後與規格（大小．．．）與特性（可拖動）與場景物件變化順序
設置ＤＩＶ ＩＤ 開始設計ＤＩＶ ＣＳＳ
字大小置中邊框
元件少且是死的靜態的所以我們直接幫每個物件取ＩＤ比較方便
字下ＩＤ 調整大小跟字形
背景圖ＩＤ 下 ＴＯＰ＝０
牽涉到位置的一定要打開絕對位置
ＰＯＳＩＳＴＩＯＮ＝ａｂｓｏｌｕｔｅ
但為啥不是在ｄｉｖ裡面？
因為有階層性 必須將最主層的容器設定相對位置ｒｅｌａｔｉｖｅ
不然就會去絕對位置ｗｉｎｄｏｗ
胖丁照片大通常實務上會去把她圖片直接修小而不是在裡面調整，避免佔平寬
下ｉｄ條位置下位置屬性縮小照片
皮卡丘下ｉｄ做ｃｓｓ屬性調整
設定寶貝球 這時ｄｉｖ還是靠她裡面物件去撐開
改ｃｓｓ屬性並改變鼠標顯示
雖然ｂｏｌｄ沒罩住物件但物件期時還是在ｄｉｖ裡面
因為設定是相對於ｄｉｖ的位置
．ｐｏｓｉｔｉｏｎ 每個內物件都要加
所以改成用ｊｑ來加
<script>
$('#main').children().addClass('position');
</script>
不然本來需要ｃｓｓ每個ｉｄ屬性都下
最一開始的場景完成 拿掉ｂｏｌｄ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#main{
/*border:1px solid;*/
width:610px;
margin:auto;
position:relative;
}
#title{
font-family:'Bauhaus 93';
font-size:24pt;
}
#bg{
top:100px;
}
#ding {
top: 450px;
left: 100px;
width:200px;
}
#pica {
top: 450px;
left: 250px;
width: 300px;
}
#ball {
top: 20px;
left: 250px;
width: 50px;
cursor:pointer;
}
.position {
position: absolute;
}
</style>
</head>
<body>
<div id="main">
<h1 id="title">Welcome Pokemon Go Game</h1>
<img src="animate/ball.gif" id="ball" />
<img src="animate/ding.gif" id="ding" />
<img src="animate/pica.gif" id="pica" />
<img src="animate/pokemonBG.png" id="bg" />
</div>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
$('#main').children().addClass('position');
</script>
</body>
</html>
安排動作與位置
直接改動ｃｓｓ初始位置
皮卡丘一開始在場景ｄｉｖ之外上方
標題也在場景ｄｉｖ之外左邊透明度為零
寶貝球在場景ｄｉｖ之外左下方
胖丁透明度為零
首先利用ｊｑ
將背景／胖丁／寶貝球 ｈｉｄｅ
標題也先屬性ｃｓｓ透明度０
利用ｊｑ
將標題ａｎｉｍａｔｅ從左邊到中間透明度漸漸增加
將背景ｆａｄｅｉｎ淡入
同時執行不用ｃａｌｌｂａｃｋｆｕｎｔｉｏｎ
在背景進來以後才ｃａｌｌｂａｃｋｆｕｎｔｉｏｎ
寶貝球進場ｓｈｏｗ然後ａｎｉｍａｔｅ左下往右上
ｃａｌｌｂａｃｋｆｕｎｔｉｏｎ胖丁ｆａｄｅｉｎ／ｏｕｔ淡入淡出
皮卡丘動作跟胖丁是一起的不ｃａｌｌｂａｃｋ
ａｎｉｍａｔｅ從上往下進場，ａｎｉｍａｔｅｕ縮小放大，以上
看幾秒進場跟胖丁閃的時間一樣或快或慢
此時發現深度跟設計不同
預設前後完全是開 ｄｉｖ匯入圖片時的順序 後蓋前
所以此時調整ｚ軸 （沒有絕對值只有相對值）
ｃｓｓ屬性 ｚ ｉｎｄｅｘ
可用ｊｑ更改時序
寶貝球發生ｈｏｖｅｒ時必須變大寫事件委派函式
並用ｔｈｉｓ指定自己
發現球在背景後面
所以必須將ｚ軸改大
背景音樂置入取ｉｄ來用ｊｑ控制
但（ｊｑ裏面沒有ｐｌａｙ）怎麼辦呢？
（ｊｑ裡面的方法都是用ｊｓ寫出來的）
所以最簡單的方式是用原生的ｊｓ擷取元素進行撥放
或是在ｂｏｄｙａｕｄｉｏ就直接指定ａｕｔｏｐｌａｙ而不用程式指定
接下來要讓寶貝球可點擊
並進行場景轉換（有時只是同個頁面 ｄｉｖ互相轉換）
ｊｑ事件委派
點擊寶貝球變大並移動到左下
設定場景二的內容位置隱藏
上述動畫跑完後ｃａｌｌｂａｃｋｆｕｎｔｉｏｎ轉換場景１淡出－２淡入
也可設定秒數來決定要不要ｃａｌｌｂａｃｋｆｕｎｔｉｏｎ
然後ｊｑ換歌轉ａｔｔｒ屬性換ｓｏｎｇ的ｓｒｃ
要先停原本的歌曲
在撥放新歌
不然會撥一樣的
隱藏ａｕｄｉｏ 的 ｃｓｓ屬性 骯錯配紐 控制選單
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#main{
/*border:1px solid;*/
width:610px;
margin:auto;
position:relative;
}
#main2 h1 {
text-align:center;
font-size:36pt;
}
#title{
font-family:'Bauhaus 93';
font-size:28pt;
left:-600px;
opacity:0;
}
#bg{
top:90px;
}
#ding {
top: 450px;
left: 100px;
width:200px;
}
#pica {
top: -400px;
left: 250px;
width: 300px;
z-index:10;
}
#ball {
top: 700px;
left:-300px;
width: 50px;
cursor:pointer;
}
.position {
position: absolute;
}
</style>
</head>
<body>
<audio id="bgmusic">
<source src="animate/PokemonGo.mp3" type="audio/mpeg" id="song" />
</audio>
<div id="main">
<h1 id="title">Welcome Pokemon Go Game</h1>
<img src="animate/ball.gif" id="ball" />
<img src="animate/ding.gif" id="ding" />
<img src="animate/pica.gif" id="pica" />
<img src="animate/pokemonBG.png" id="bg" />
</div>
<div id="main2">
<h1>Game Over</h1>
</div>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
$('#main').children().addClass('position');
$('#bg').hide();
$('#ding').hide();
$('#ball').hide();
$('#main2').hide();
var bgmusic = document.getElementById('bgmusic');
bgmusic.play();
$('#title').animate({ 'left': '30px', 'opacity': '1' }, 1000);
$('#bg').fadeIn(1500, function () {
$('#ball').show().animate({ 'left': '550px', 'top': '50px' }, 1000, function () {
$('#ding').fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300);
$('#pica').animate({ 'top': '390px' }, 700).animate({ 'width': '40px' }, 500).animate({ 'width': '400px' }, 500).animate({ 'width': '40px' }, 500).animate({ 'width': '400px' }, 500);
});
});
$('#ball').hover(function () {
$(this).animate({ 'width': '168px' }, 500).css({'z-index':'20'});
});
$('#ball').click(function () {
$(this).animate({ 'top': '700px', 'left': '-300px' }, 500, function () {
$('#main').fadeOut(1000);
$('#main2').fadeIn(2000);
$('#song').attr('src', 'animate/Reflection.mp3');
bgmusic.pause();
bgmusic.load();
bgmusic.play();
});
});
</script>
</body>
</html>
如果開場音樂很多首
檔名丟在陣列裡面 ｊｓ三種宣告方式
亂數隨機撥放
多寫一行程式在自動撥放那裡
ｊｓ－ｒａｎｄａｎ只會產生０～１ 包含０不包含１的數字
這邊只要產生０或１
只要乘與二無條件捨去ｆｌｏｏｒ
ｃｏｎｓｏｌｅ．ｌｏｇ（ｉ）
做測試
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#main{
/*border:1px solid;*/
width:610px;
margin:auto;
position:relative;
}
#main2 h1 {
text-align:center;
font-size:36pt;
}
#title{
font-family:'Bauhaus 93';
font-size:28pt;
left:-600px;
opacity:0;
}
#bg{
top:90px;
}
#ding {
top: 450px;
left: 100px;
width:200px;
}
#pica {
top: -400px;
left: 250px;
width: 300px;
z-index:10;
}
#ball {
top: 700px;
left:-300px;
width: 50px;
cursor:pointer;
}
.position {
position: absolute;
}
</style>
</head>
<body>
<audio id="bgmusic">
<source type="audio/mpeg" id="song" />
</audio>
<div id="main">
<h1 id="title">Welcome Pokemon Go Game</h1>
<img src="animate/ball.gif" id="ball" />
<img src="animate/ding.gif" id="ding" />
<img src="animate/pica.gif" id="pica" />
<img src="animate/pokemonBG.png" id="bg" />
</div>
<div id="main2">
<h1>Game Over</h1>
</div>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
$('#main').children().addClass('position');
$('#bg').hide();
$('#ding').hide();
$('#ball').hide();
$('#main2').hide();
var bgmusic = document.getElementById('bgmusic');
var music = new Array("PokemonGo.mp3", "PokemonGo2.mp3");
var i = Math.floor(Math.random() * 2);
console.log(i);
$('#song').attr('src', 'animate/' + music[i]);
bgmusic.load();
bgmusic.play();
$('#title').animate({ 'left': '30px', 'opacity': '1' }, 1000);
$('#bg').fadeIn(1500, function () {
$('#ball').show().animate({ 'left': '550px', 'top': '50px' }, 1000, function () {
$('#ding').fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300);
$('#pica').animate({ 'top': '390px' }, 700).animate({ 'width': '40px' }, 500).animate({ 'width': '400px' }, 500).animate({ 'width': '40px' }, 500).animate({ 'width': '400px' }, 500);
});
});
$('#ball').hover(function () {
$(this).animate({ 'width': '168px' }, 500).css({'z-index':'20'});
});
$('#ball').click(function () {
$(this).animate({ 'top': '700px', 'left': '-300px' }, 500, function () {
$('#main').fadeOut(1000);
$('#main2').fadeIn(2000);
$('#song').attr('src', 'animate/Reflection.mp3');
bgmusic.pause();
bgmusic.load();
bgmusic.play();
});
});
</script>
</body>
</html>
第四次專題報告
第五組
管理員 學生 老師
動態切換商品保留商品新鮮感
安全性帳號密碼額外表單設置
檢舉處理辨識號碼
功能欄位必須要想通，要對應到功能
能量值＜－＞限制次數
利用身份別屬性確認是 家長或學生
最高管理者功能新增
問題：
幾乎都是對功能不熟悉所以對欄位有疑問，或者增加功能
總結：
感覺系統功能詳細所以需要什麼資料庫也詳細
第一組
上次流程圖修改
功能增修
雞爪圖不用雙線表達完全參與
問題：
簽到機制是否有權限問題？
是發起人不是管理員所以不會有問題
總結：
同上一組
感覺系統功能詳細所以需要什麼資料庫也詳細
第三組
修正
問題：
過敏類型應該是多值屬性？
原來是過敏原
多值介面建議？？
匯款紀錄查詢依據？
沒ＫＥＹ變弱實體
加上編號即可
退貨機制？
一定退
但系統裡面有個退貨紀錄
結論：
簡單的進銷存系統所以較不會有邏輯上問題
第二組
問題：
退貨為什麼跟其他實體沒關係？
為何要用ＥＭＡＩＬ當帳號？
使用者體驗
比較不容易重複
會員編號是？
流水號
一般會員驗證？
啟用機制
電話為何副值？
應該是多值屬性
或者一手機一室話
管理員為何會檢舉有部分參與度？
應為管理員可以不處理
只有一個管理員？
應該改為全部參與
因為只有一個管理員為何要有編號？
錯了
檢舉館裡元編號？
錯了
運費單值？
付款方式單值？
錯了抱歉
付款方式要開表？
遞移相依就看怎處裡
結論：
真的就是知道系統ＫＮＯＷＨＯＷ，
且知道系統設計與分析，
就可以正確，不然就很混亂各講各的。
其實這些表單就是為了讓ＫＥＹ表的方便，再來就是考慮安全性，再來就是考慮正確性，所以才會需要ＥＲＭＯＤＥＬ
實體聯絡
ＥＲ－ＭＯＤＥＬ是青蛙詳細的規格
https://zh.wikipedia.org/wiki/ER%E6%A8%A1%E5%9E%8B
ＥＲ－ＤＩＡＧＲＡＭ是表示實體間關係
https://zh.wikipedia.org/wiki/ER%E6%A8%A1%E5%9E%8B
第四組
一定要配對才能加好友
管理員無法修改會員資料
問題：
好友編號／帳號／暱稱？
暱稱可以改
會員好友一對多（好友清單
會員跟好友期時是同一個實體
違規者帳號？
不就是會員帳號
處理狀態有哪些？
有處理跟未處理
違規？
程式寫得出來就自動
為什麼時間要日期跟時間的複合屬性？
期時跟功能無關可以單一欄位
貼文讚數？案過的怎統計
還是可以重複瘋狂點讚
貼文跟寵物如果有關西 中間的關聯？？
沒關係
違規類別？
要獨立一個實體定好
結論：？？？
老師結論：
條一下，開始實做，開始做專題
ＥＲＭＤ－＞資料庫－＞模擬資料－＞簡單的功能開始寫，商品上下架。
之後要報告的時間點與內容
下一次４月１９號修改後的ＥＲＭＯＤＥＬ實作的資料庫
欄位 資料型態 長度 合理性
需要出關聯圖
不用簡報值皆ＤＡＭＯＬ
４月２６號ＵＳＥＣＡＳＥ
２個半月後
程式邏輯不等於資料邏輯 不會出現在ＥＲ圖中
