還記得上週的前端工程師課程嗎?忘記了記得複習~而今天的內容要教你也超好用的"快速產生階層"功能,一起來看看!
- 7月 16 週二 201906:16
前端工程師的必備品Emmet(二)快速產生階層
還記得上週的前端工程師課程嗎?忘記了記得複習~而今天的內容要教你也超好用的"快速產生階層"功能,一起來看看!
- 7月 15 週一 201914:28
把握住這七大要點,網路行銷超easy!(一)概論與內容行銷
- 7月 12 週五 201912:57
軍事和人工智慧結合,這是在拯救人類還是危害人類?(下)
人工智慧和軍備武器結合已經不是新聞,但一直肆無忌憚地研發及發展它,你看到那些他們沒告訴你的隱憂了?
- 7月 11 週四 201902:15
軍事和人工智慧結合,這是在拯救人類還是危害人類?(上)
Google為何不再參與研發人工智慧和軍備的結合?這其中是不是有潛藏的危機?
- 7月 10 週三 201912:39
輕鬆入門前端工程師的HTML5課程(11下)SVG基本路徑動畫
上過HTML5課程都知道,SVG動畫繪製也超重要!上次才教你圖形動畫,今天要帶給你的是路徑動畫技能!
前端工程師必備技能：SVG 路徑動畫
我們可以使用HTML5中的 <path> 元素來定義路徑。
SVG Path 基本指令列表
See the Pen SVG Path 基本指令-L by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-H by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-Y by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-C by Tedutw (@Tedutw) on CodePen.
(圖片取自：iT邦幫忙)
<path D="M0 0 C40 40,60 40,100,0 S150 -40, 200 0" stroke="black" fill="none"/>
See the Pen SVG Path 基本指令-Q by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-T by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-Z by Tedutw (@Tedutw) on CodePen.
起始點的 x,y 座標 (move to)
從「目前的點」的座標畫直線，到指定點的 x,y 座標 (line to)
從「目前的點」的座標畫水平線，到指定的 x 座標 (horizontal line to)
從「目前的點」的座標畫垂直線，到指定的 y 軸座標 (vertical line to)
從「目前的點」的座標，畫條貝茲曲線，到指定點的 x,y 座標。如下圖的曲線，C 的部分會有三組 x,y 座標：其中第一組以及第二組 x,y 座標為控制曲線的形狀用，最後一組為終點座標。
S 可以從「目前的點」之後，再建立一個座標。這個新增的座標帶有一條貝茲曲線與「目前的點」連結。神奇的是，這個貝茲曲線的形狀，就是這個「目前的點」的鏡射線。聽起來很難懂，看下面的例子就知道了。
Q 就是起點和終點的貝茲曲線共用同一個控制點，只需要有貝茲控制點的座標和終點座標即可。
T 只有一組參數 x,y ，表示終點的座標，所以 T 的前方要接上 Q 才能畫出對應的座標線。
關閉路徑，將「目前的點」的座標與第一個點的座標連接起來 (closepath)
對於想成為前端工程師的你們，這樣的HTML5課程，將SVG動畫繪製整理成這樣，是不是超級淺顯易懂！
相關閱讀推薦：
輕鬆入門前端工程師的HTML5課程(11上)SVG基本圖形動畫
輕鬆入門前端工程師的HTML5課程(8)拖曳元素-上
輕鬆入門前端工程師的HTML5課程(8)拖曳元素-下
暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~
網頁設計課程必學的技能:如何讓CSS和HTML共存?
程式語言都會了,為什麼還要來上UI課程?
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
- 7月 09 週二 201911:36
輕鬆入門前端工程師的HTML5課程(11上)SVG基本圖形動畫
好久不見的HTML5課程又重出江湖啦!先前提到的SVG,今天就要教你它的圖形動畫該怎麼畫!
前端工程師必備技能：SVG 基本圖形動畫
我們可以使用 <animate> 元素來繪製 SVG 動畫。
今天，我們先來繪製一個方形，並且將動作設定在三秒鐘內往右移動，然後會重複相同的動作 3 次。HTML5 原始碼與結果如下所示：
See the Pen SVG 基本圖形動畫 by Tedutw (@Tedutw) on CodePen.
以上所有前端工程師會使用到的 HTML5 標籤說明如下：
屬性名稱，就是當你指定了這個屬性，就會以這個屬性去做動作。在本例中指定紫色方塊要水平位移，水平移動的座標為 x，所以該例中 attributeName 為 x。若為垂直移動的話，attributeName 則為 y。
動畫開始時的屬性值。
結束動畫時的屬性值。
動畫持續時間。
動畫重複次數。在本例中重複 3 次所以 repeatCount 設為 3；若要動畫無限重複的話， repeatCount 則設為 indefinite。
這裡的 fill 不代表填色，而是指定動畫結束時的屬性，屬性可選 freeze 或是 remove，remove 是預設值，也就是動畫結束之後，圖形返回原本的狀態，而 freeze 則是在動畫結束後，固定在結束的狀態
相關閱讀推薦：
輕鬆入門前端工程師的HTML5課程(11下)SVG基本路徑動畫
輕鬆入門前端工程師的HTML5課程(9)地理位置定位
輕鬆入門前端工程師的HTML5課程(10)SVG介紹
HTML5教學小撇步三-HTML新增的標籤原來有這些~
暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~
在苦惱履歷上技能要填什麼嗎? Java,UI課程等等證照幫你解決這個問題!!
達內課程先就業再付款- 中時電子報
- 7月 08 週一 201905:58
前端工程師的必備品Emmet(一)快速產生標籤名稱
前端工程師的課程又回來啦!這次要教給你的是前端工程師的必備外掛程式-Emmet!快來看看它有哪些功能!
- 7月 05 週五 201916:18
促成人工智慧的最大功臣-特斯拉!(終:比愛迪生貢獻更大者)
現代不斷增進人工智慧技術的特斯拉,相信特斯拉本人會對這樣的成果感到很開心!
- 7月 04 週四 201915:50
促成人工智慧的最大功臣-特斯拉!(三:不擇手段的愛迪生)
沒有特斯拉哪來的人工智慧,或是哪來的穩定交流電現在可用?但愛迪生卻把他的人生摧毀!讓我們繼續看下去!
- 7月 03 週三 201917:09
促成人工智慧的最大功臣-特斯拉!(二:愛迪生的真面目)
連電動車特斯拉都以他為名,沒想到全世界推崇的愛迪生竟對他出了陷阱牌!太卑鄙了啦!
