iT邦幫忙

DAY 27
4

MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松系列 第 27

MIS2000Lab.的「HTML5 認證考試,從零開始」#27-- 將使用者介面(UI)變成動畫 ( CSS動畫 )

上一篇文章:MIS2000Lab.的「HTML5 認證考試,從零開始」#26-- 先進圖形 / Canvas API
http://ithelp.ithome.com.tw/question/10160823

===== 透過CSS做轉換、轉場(transition) ====

透過時間進行屬性值的轉換(transition,也有人翻譯成轉場、漸變),可以讓畫面的轉變更平順也更具吸引力。

本節一開始將著重在(傳統)CSS進行轉換上面,後續會介紹CSS3的設定,但兩者用法大致相似。

最簡單的例子就是,當滑鼠經過(hover)一個<div>區域,我們可以動態改變其形狀大小與顏色。

例如下面範例,只要滑鼠指著、經過這個區域就會變換顏色與寬度,如下圖

[img=415,360]http://ithelp.ithome.com.tw/upload/images/20141022/201410220806335446f5095e3e5\_resize\_600.jpg[/img]

[img=415,216]http://ithelp.ithome.com.tw/upload/images/20141022/201410220806425446f51286d8f\_resize\_600.jpg[/img]

上圖的transition設定動畫時間為兩秒(transition: width 2s;),單位s為秒、ms毫秒(千分之一秒)。

如果時間拉長並改成五秒,圖形寬度變長的速率會比較慢。

==== transition的設定(CSS3) =====

CSS3定義了下面五種屬性讓您進行CSS動畫轉換,大致跟上一小節類似:

[ul] [li]transition-property,哪些需要做變化,請加入在此。例如:寬度、高度、字體大小、背景顏色。詳見下面範例。[/li] [li]transition-duration,變化時間。對應上面的變化種類,個別設定變化時間。[/li] [li]transition-timing-function,特效的展示速度。共有:linear(線性)、ease(預設值)、ease-in、ease-out與ease-in-out。[/li] [li]transition-delay,特效開始以前的「延遲時間」。靜待幾秒才會開始展示動畫?[/li] [li]transition,縮寫、簡寫的方式,跟上一小節的寫法雷同。[/li][/ul]

<style type=”text/css”>
div {
width: 400px;
height: 60px;
background-color: yellow;
transition-property: width, height, font-size, background-color;
transition-duration: 2s, 2s, 2s, 3750ms;

transition-timing-function: ease-in;
transition-delay: 1s;
/* 滑鼠指到以後,還要等候一秒才開始做動畫效果 */
}
div:hover {
width: 600px;
height: 80px;
font-size: large;
background-color: red
}
</style>

==== 偵測transition的結束 ====

如果動畫效果結束以後,要回應一件事或是一個訊息,該怎麼做啊?......

因此動畫完成之後(觸發transitionend事件),我們必須偵測結束的時機,然後加上我們想做的動作(事情)。

transitionend事件有兩個屬性:

[ul] [li]propertyName屬性,請放置CSS屬性的名稱(在動畫效果完成之後)。例如:width、height與font-size等。[/li] [li]elapsedTime屬性,動畫開始以前,請把動畫時間、延遲時間寫在這裡(單位:秒)。[/li][/ul]

==== 使用CSS進行轉換(Transformation) ====

CSS動畫效果(transformation)可以讓您實踐2D與3D的效果,

您可以做到下圖的各種轉變特效。CSS的transform屬性就是為此而來!您可以透過它作到下圖的各種變化:

[img=415,234]http://ithelp.ithome.com.tw/upload/images/20141023/201410231430095448a07186360\_resize\_600.jpg[/img]

==== 3D轉換(transformation) ====

CSS3提供了一系列的函式讓您可以使用3D效果,也就是比2D的X、Y軸多出一個Z軸(前後、影像深度)。

主要有三個:translation、scaling、rotation。

[img=415,252]http://ithelp.ithome.com.tw/upload/images/20141023/201410231431495448a0d5ae3eb\_resize\_600.jpg[/img]

比較上下兩張圖片,從執行結果您可以發現:

下圖介紹3D透視效果......perspective的作用。

[img=415,324]http://ithelp.ithome.com.tw/upload/images/20141023/201410231434465448a18623d78\_resize\_600.jpg[/img]

下一篇文章:MIS2000Lab.的「HTML5 認證考試,從零開始」#28-- Web Socket,實作即時通訊
http://ithelp.ithome.com.tw/question/10161110

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期:2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item\_id=1003110


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#26-- 先進圖形 / Canvas API
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#28-- Web Socket,實作即時通訊
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30

1 則留言

0
Alan.Liu
iT邦研究生 1 級 ‧ 2014-10-22 09:16:59

感謝前輩分享
讚!!!

我要留言

立即登入留言