--- slideOptions: transition: slide --- # 動畫+RWD+Git ###### tags: `課程` --- ## 動畫 ---- ### 怎麼在前端加上動畫? ---- 有幾種方法 1. CSS transition 2. CSS animation 3. 3rd Library ---- ### 1. CSS transition ---- ### transition(轉換)是什麼 > 對**指定的css style**，在不同的值、狀態之間做轉換 e.g, 顏色、字體大小、width/height 的轉換 ---- ### transition property * transition-property: css style名稱 * transition-duration: 持續時間 * [transition-timing-function](https://wcc723.github.io/css/2013/08/24/css-transtion-speed/): transition播放時的加速方式 * transition-delay: 延遲多久才開始動畫 ---- ### transition範例 [Example URL](https://codepen.io/flyotlin/pen/gOmKqxz) ``` h1 { background-color: white; transition-property: background-color; transition-duration: 2s; transition-timing-function: linear; /* transition-delay: 2s; */ } h1:hover { background-color: grey; } ``` ---- ### 也可以寫成 ``` h1 { transition: background-color 1s linear; } ``` ---- ### [transition產生的event](https://codepen.io/flyotlin/pen/zYZmGwQ) * transitionstart * transitionend * transitioncancel ---- ### transition event範例 ``` let h1 = document.querySelector("h1") h1.addEventListener("transitionstart", () => { console.log("transition starts!") }) ``` ---- ### 使用CSS transition讓你的JS變得更流暢 http://jsfiddle.net/RwtHn/5/ ---- ### 2. CSS animation ---- ### CSS animation是什麼? > 用CSS實現[酷炫的動畫](https://www.oxxostudio.tw/demo/201803/css-animation-demo-05.html)，並透過keyframe控制動畫 效能比JS寫的動畫來得好 ---- ### keyframes(關鍵影格) 定義動畫中的各個狀態、轉變過程 透過百分比指定該時間點的CSS style為何 ``` @keyframes cool_animation { 0% { // css style here } 100% { // another css style here } } ``` ---- ### animation property * animation-name: keyframes(動畫)的名稱 * animation-duration: 持續時間 * animation-iteration-count: 動畫重複幾次 * animation-timing-function: 動畫播放時的加速方式 ---- ### animation範例 [Example URL](https://codepen.io/flyotlin/pen/qBrKNzw) ---- ### animation產生的event * animationstart * animationend ---- ## animation event範例 ``` let div = document.querySelector("div") div.addEventListener("animationstart", () => { console.log("ani start!") }) div.addEventListener("animationend", () => { console.log("ani end!") }) ``` ---- ### [JS動態改變keyframes規則](https://codepen.io/flyotlin/pen/KKWeJKb) ``` // CSS @keyframes font { from { font-size: 50px; } } ``` ``` // JS let keyframes = document.styleSheets[0].cssRules[1]; keyframes.appendRule('to{font-size:100px;}') ``` ---- ### 3. transition vs. animation ---- | transition | animation | |:--------------------:|:----------------------:| | 適合簡單的動畫 | 適合比較複雜的動畫 | | 只有兩個狀態間的轉換 | 用keyframes自訂多個狀態 | | 需要初始條件觸發 | 可以自動開始 | | | | ---- ### 4. 3rd library ---- ### 各種好用的Library * Animate.css * Anime.js * Velocity.js --- ## RWD ---- ### 什麼是RWD? > 針對不同螢幕大小、不同裝置，調整css style、功能，提供適合的網頁 ---- ### 如何用CSS實現RWD? ---- ### media query ``` @media 裝置、擺放、width/height、一些條件 { // css style body { // styles here } div { // other styles here } } ``` ---- ### 限制width/height ``` @media (max-width: 480px) { } @media (max-width: 767px) { } @media (min-width: 768px) and (max-width: 979px) { } @media (min-width: 980px) { } @media (min-width: 1200px) { } ``` ---- ![](https://blog.hinablue.me/content/images/2014/Nov/responsive-reference.png ) ---- ### Tips * 注意@media_qeury順序，規則有重複則下面的會覆蓋上面的 * **max-width** (Desktop優先) 代表這個尺寸**以下**的都會套用這個規則，**<=** * **min-width** (Mobile優先) 代表這個尺寸**以上**的都會套用這個規則，**>=** [Example URL](https://codepen.io/flyotlin/pen/RwpJvxQ) ---- ### 更多 * CSS flex * https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox * https://wcc723.github.io/css/2017/07/21/css-flex/ * CSS grid * https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout * https://wcc723.github.io/css/2017/03/22/css-grid-layout/ * position * https://developer.mozilla.org/zh-CN/docs/Web/CSS/position --- ## Git ---- ### 什麼是Git? > 版本控制系統 ---- ### 小情境 你寫了一份code，每天都有一點進度。有強迫症的你想要紀錄每天自己究竟做了些什麼。 這時天真的你想到可以每天建立一個以日期命名的資料夾，問題好像都解決了呢! > 但事情沒有這麼簡單... ---- ### GitHub/GitLab 不同的code代管網站，提供一個遠端repo讓使用者上傳、管理自己的code ---- ### 基本流程 ![](https://miro.medium.com/max/431/1*P2Euos_hc6OIg2pjQ-KcCA.png) ---- ### 一個類比 * 你的code: 公務員的公文 * 工作區: 辦公桌 * 暫存區: 公文夾 * local repo: 區公所的公文櫃 * remote repo: 全台灣的公文櫃 ---- ### 動手做一做 * 開一個資料夾，新增一個檔案(e.g, README.md) ``` $ git init // 對當前資料夾進行git初始化 $ git branch -m flyotlin // 改變預設branch的名稱 // 新增一個remote repo的url $ git remote add origin https://gitlab.com/ncufresh/git_practice_ncufresh21.git ``` ---- ### `$ git status` > 查看目前git工作區、暫存區的狀況 告訴你哪些公文在辦公桌，哪些公文已經放到公文夾 ---- ### `$ git add 你的檔案` > 把修改過的code放到git暫存區 把公文從你的辦公桌上放到你的公文夾、卷宗裡面 ---- ``` $ git add index.html style.css // 單一 or 多個檔案 $ git add . // 當前目錄下所有檔案 $ git add *.json // 所有以.json結尾的檔案 ----------- $ git add README.md // 動手做一做 ``` ---- ### .gitignore 讓git忽略一些你不想加到暫存區的檔案或資料夾 ``` node_modules *.json controller.js ``` ---- ### `$ git commit [-m "commit訊息"]` > 將在暫存區中的code丟到local repo中 把公文夾裡面的公文歸檔到區公所的公文櫃 ---- ``` $ git commit -m "Feat: Basic layout of the website" $ git commit ----------- $ git commit -m "Initial commit" // 動手做一做 ``` ---- ### `$ git push` > 把local repo中的commit上傳到remote repo(GitHub/GitLab) 把區公所公文櫃的公文放到全台灣的公文櫃裡面 ---- ``` $ git remote -v $ git remote add origin master $ git push ----------- $ git push -u origin flyotlin // 動手做一做 ``` ---- ### branch(分支) > 多人開發、同個專案不同功能的分頭開發 讓不同類別的修改可以被分開 ---- ``` $ git branch -a $ git branch flyotlin $ git checkout flyotlin $ git checkout master $ git merge flyotlin ``` [Learn Git Branching](https://learngitbranching.js.org/?locale=zh_TW) --- ## 小練習 ---- 在自己的AJAX memo加上動畫、RWD，並且push到[GitLab指定repo](https://gitlab.com/ncufresh/homework_area_ncufresh21)中 --- ## Reference ---- <div class="" style="width=100vw"> <a class="gay" href="https://youtu.be/dQw4w9WgXcQ"> 超實用RWD網頁教學！！！ </a> </div> <style> .gay { font-family: "標楷體"; font-size: 55px; animation: gay_anim 0.5s infinite; } @keyframes gay_anim { 0% {color: red;} 40% {color: green;} 80% {color: blue} 100%{color: red;} } </style> <a class="gay" href="https://www.youtube.com/watch?v=bFEC5vtbUT4">順便配口茶</a> 不要 油死了 <!-- 好油好油，滑倒ㄌ -->