Transitions คือ การ ทํา งานของ ส่วน ใด

Q: ข้อใดคือความหมายของ Transition

(แทรนซิซเชิน, -เ?ิน) n. การผ่าน, การส่งผ่าน, การนำส่ง, การเปลี่ยนแปลง, ภาวะหัวเลี้ยวหัวต่อ, การเปลี่ยนแปลงลำดับ., See also: transitional adj. transitionary adj. transitionally adv., Syn. change, flux.

Transition Words คือ คำเชื่อมประโยค ที่จำเป็นในประโยคในภาษาอังกฤษ เราใช้คำเชื่อมประโยคให้เหมาะสมกับความหมาย เพื่อการสื่อสารเนื้อหาที่มีความซับซ้อนให้ง่ายขึ้น กล่าวคือ มีเนื้อหาที่ชัดเจน เรียงตามลำดับอย่างถูกต้อง และมีเนื้อความที่สอดคล้องซึ่งกันและกัน หรือพูดอีกอย่างหนึ่งก็คือ ไม่ออกนอกประเด็น

สารบัญ Show

Transition Words ในประโยค
CSS Transitions ทำอะไรได้บ้าง ?
Workshop – สร้าง Animation ง่ายๆ ด้วย CSS Transitions
Shorthand Property
Timing Functions
Transition Delays
Advanced Delays
เปลี่ยนมาใช้ CSS Transitions กันเถอะ !
แท็บ Transitions ใช้ทําอะไร
ข้อใดคือความหมายของ Transition
ใช้ Transitions ในการตัดต่อวิดีโอเพื่ออะไร
การกําหนด Effect การเปลี่ยนสไลด์อยู่ในเมนูใด

ในภาษาไทยมีคำเชื่อม เช่น ที่จริงแล้ว นอกจากนี้ ในทางกลับกัน ซึ่งในภาษาอังกฤษมีคำเชื่อมเหล่านี้เช่นเดียวกันค่ะ คำเชื่อมมีหลายตัวมากๆ และมีชื่อเรียกที่แตกต่างกันออกไป ดังนั้น เราลองมาดูประเภทต่างๆ ของคำเชื่อมกันก่อนดีกว่าค่ะ

conjunction คำเชื่อม
adverb คำวิเศษณ์ที่สามารถบอกความเปลี่ยนแปลงของเนื้อความในประโยคได้
adverbial ส่วนขยายที่เป็นวลี ซึ่งทำหน้าที่เชื่อมประโยค ซึ่งมีโครงสร้างเช่น

Adverb+ as+ subject + verb, ประโยคหลัก

เราลองมาดูประโยคตัวอย่างที่ใช้ส่วนขยายที่เป็นวลีกันค่ะ

Sadly as she was, she attended her ex-boyfriend’s wedding.

หลังจากที่เราได้ดูคำเชื่อมประเภทต่างๆกันไปแล้วเราลองมาดู หน้าที่ของคำเชื่อมกันค่ะ

Transition Words ในประโยค

ใช้เพื่อบอกว่าเนื้อความใน 2 ประโยคนั้น มีความสัมพันธ์เชื่อมโยงกันอย่างไร เพื่อให้การเขียนของเรามีความสอดคล้องกันหรือที่เราเรียกว่า cohesion

ลองไปดูกลุ่มของคำเชื่อมแต่ละประเภทตามความหมายกันค่ะ

โดยปกติแล้ว เวลา value ของ css property เปลี่ยนไป มันก็จะส่งผลกับ html element นั้นในทันที ตัวอย่างเช่น เดิมกล่องหนึ่งมีพื้นหลังสีแดง และมีขนาด 100px ทั้งความกว้างและความสูง

.box {

background:red;

width:100px;

height:100px;

}

สมมติว่าเราอยากให้เวลา hover แล้ว กล่องนี้มีพื้นหลังเปลี่ยนเป็นสีน้ำเงินแทน และยังมีขนาดใหญ่ขึ้นเป็น 200px ทั้งความกว้างและความสูง เราก็จะต้องเขียนโค้ดประมาณนี้

.box:hover {

background:blue;

width:200px;

height:200px;

}

เมื่อเราลอง hover ดู เราก็จะพบว่ากล่องมีรูปร่างหน้าตาเปลี่ยนจาก value เก่า เป็น value ใหม่ “ในทันที” ที่เรา hover

CSS Transitions เป็น feature ใหม่ใน CSS3 ที่ช่วยให้เราสามารถกำหนดได้เองว่า “ในการเปลี่ยนแปลงจาก value เก่าไปสู่ value ใหม่ ของในแต่ละ property นั้น เราอยากให้เป็นไปในรูปแบบไหน” หรือพูดง่ายๆ ก็คือ เราสามารถกำหนดให้ html element ค่อยๆ เปลี่ยน value ในแต่ละ property ทีละนิดๆ ได้ ไม่ใช่เริ่มเปลี่ยนจาก 0 แล้วไป 100 เลย เป็นต้น

CSS Transitions ทำอะไรได้บ้าง ?

การนำ CSS Transitions ไปใช้มีอยู่หลายรูปแบบด้วยกัน ซึ่งรูปแบบหลักๆ มีดังนี้

Colorค่อยๆ เปลี่ยนสี จากสีหนึ่งเป็นอีกสีหนึ่ง
Dimensionค่อยๆ เปลี่ยนขนาด จากขนาดหนึ่งเป็นอีกขนาดหนึ่ง
Positionค่อยๆ เปลี่ยนตำแหน่ง จากตำแหน่งหนึ่งเป็นอีกตำแหน่งหนึ่ง

Properties

สำหรับ properties ต่างๆ ที่ใช้ในการทำ CSS Transitions มีดังนี้

transition-property: กำหนด property ที่จะใช้ transition
transition-duration: กำหนดว่าจะให้ transition กินระยะเวลานานเท่าไร ค่า default คือ “0″ คือไม่ทำ transition
transition-timing-function: กำหนดรูปแบบของ speed ที่จะใช้กับ transition ค่า default คือ “ease”
transition-delay: กำหนดเวลาที่จะเริ่มทำ transition ค่า default คือ “0″ คือไม่มีดีเลย์

Workshop – สร้าง Animation ง่ายๆ ด้วย CSS Transitions

จากตัวอย่างก่อนหน้า เรามีโค้ด css แบบนี้

.box {

background:red;

width:100px;

height:100px;

}

.box:hover {

background: blue;

width:200px;

height:200px;

}

อย่างที่บอกไปว่า “.box” จะมีรูปร่างหน้าตาเปลี่ยนไปในทันทีที่เรา hover ทีนี้เราจะมาลองใช้ transition กับ html element นี้กัน โดยโจทย์แรกของเราก็คือ

เมื่อ hover กล่องจะค่อยๆ กว้างขึ้นๆ ภายในระยะเวลา 1 วินาที

จากโจทย์ข้างต้น เราจะต้องเขียน css rule แบบนี้

.box {

transition-property:width; /* กำหนดให้ "width" เป็น property ที่จะใช้ transition */

transition-duration:1s; /* กำหนดให้ transition กินระยะเวลา 1 วินาที */

transition-timing-function:ease; /* กำหนดให้รูปแบบของ speed เป็นแบบ "ease" */

transition-delay:0s; /* กำหนดให้เริ่มทำ transition ทันที ไม่ต้องมีดีเลย์ */

}

เมื่อลอง hover ดู จะเห็นว่าความกว้างของกล่องจะค่อยๆ เพิ่มขึ้นทีละนิดๆ ซึ่งเป็นผลมาจาก CSS Transitions นั่นเอง ทีนี้เราลองมาใส่ transition ให้กับ property “height” ดูบ้าง

เมื่อ hover กล่องจะค่อยๆ สูงขึ้นๆ ภายในระยะเวลา 1 วินาที

จากโจทย์ข้างต้น css rule ของเราจะเปลี่ยนเป็นแบบนี้

.box {

transition-property:width,height;

transition-duration:1s,1s;

transition-timing-function: ease,ease;

transition-delay:0s,0s;

}

จะเห็นว่าเราสามารถใส่ transition ให้กับหลายๆ properties ได้พร้อมๆ กัน โดยใช้เครื่องหมาย “,” คั่น ในส่วนของ duration, timing-function และ delay ก็เช่นเดียวกัน โจทย์ต่อไปก็คือ

เมื่อ hover สีพื้นหลังของกล่องจะค่อยๆ เปลี่ยนไป ภายในระยะเวลา 1 วินาที

ในทำนองเดียวกัน ให้เราเพิ่ม property “background” เข้าไปอีกอัน เราจะได้ css rule แบบนี้

.box {

transition-property:width,height,background;

transition-duration:1s,1s,1s;

transition-timing-function: ease,ease,ease;

transition-delay:0s,0s,0s;

}

Shorthand Property

อย่างไรก็ตาม เราสามารถรวม properties ของ transition ทั้ง 4 เข้าด้วยกันได้ด้วย property “transition” โดย syntax จะเป็นแบบนี้

transition:[property][duration][timing-function][delay];

ให้เราระบุ property, duration, timing-function และ delay เรียงต่อกันไปตามลำดับเลย ลองดูตัวอย่างนี้

.box {

transition:width1sease0s;

}

จากโจทย์ 3 ข้อก่อนหน้านี้ หากเราใช้ shorthand property แล้วล่ะก็ เราจะสามารถเขียนได้สั้นลงเหลือเพียงแค่นี้

.box {

transition:width1sease0s,height1sease0s,background1sease0s;

}

Timing Functions

timing function คือวิธีการคำนวณ speed ของ transition โดยปกติแล้ว timing function จะมีค่าเป็น “ease” แต่ถ้าเราต้องการให้ speed คงที่ตลอดการทำ transition ให้เรากำหนด timing function เป็น “linear (เส้นตรง)”

.box {

transition-timing-function:ease;/* linear | ease | ease-in | ease-out | ease-in-out */

}

linear

ease

ease-in

ease-out

ease-in-out

Deifferent Timing Functions

เมื่อเราลอง hover ดู ถึงแม้ว่ากล่องทั้ง 5 จะกำหนด duration เอาไว้เท่ากันที่ 2s (จะสังเกตว่าทุกกล่อง transition เสร็จพร้อมกัน) แต่ speed ของแต่ละกล่องกลับไม่เท่ากัน ทั้งนี้เป็นเพราะการกำหนด timing function ที่ต่างกันนั่นเอง

Transition Delays

การกำหนด delay คือการหน่วงเวลาเอาไว้ก่อนที่จะเริ่มทำ transition โดยค่า default ของ delay ก็คือ “0″ ซึ่งก็คือให้ทำทันทีนั่นเอง

จากตัวอย่างด้านบน กล่องทั้ง 10 ถูกกำหนดให้ delay เป็น 0 มันจึงทำ transition ทันทีที่เรา hover แต่จะเกิดอะไรขึ้น หากเรากำหนด delay ของแต่ละกล่องให้มีค่าแตกต่างกัน

จากตัวอย่างด้านบน เราได้กำหนด delay ให้กับแต่ละกล่องเป็น 0s, 0.1s, 0.2s, … , 0.9s ตามลำดับ จะเห็นว่าแต่ละกล่องนั้นเริ่มทำ transition ไม่พร้อมกัน

Advanced Delays

นอกจากเราจะสามารถกำหนด delay ของแต่ละกล่องให้แตกต่างกันได้แล้ว เรายังสามารถกำหนด delay ของแต่ละ property ให้ต่างกันได้ด้วย แบบนี้

.box {

transition-property:width,height,background;

transition-delay:0s,1s,2s;

}

หากเรากำหนดแบบนี้ กล่องก็จะขยายทางด้านกว้างก่อน แล้วค่อยขยายทางด้านสูง และสุดท้ายก็จะเปลี่ยนสี ตามลำดับ ลองดูตัวอย่างต่อไปนี้

จากตัวอย่างด้านบน เป็นการนำ delay ไปใช้กับ position ถึงแม้ว่ากล่องทั้ง 4 จะเลื่อนไปยังมุมเหมือนๆ กัน แต่จะเห็นว่าวิธีการไปนั้นต่างกัน

เปลี่ยนมาใช้ CSS Transitions กันเถอะ !

ถึงแม้ว่าสิ่งที่ CSS Transitions ทำได้ จะไม่ใช่เรื่องแปลกใหม่อะไร หลายๆ คนคงจะเคยเห็นสิ่งเหล่านี้มาบ้างแล้วจากการใช้ Flash หรือ JavaScript เข้ามาช่วย อย่างไรก็ตาม CSS Transitions กลับดูน่าใช้มากกว่าวิธีอื่นๆ ตรงที่

การทำ animation ต่างๆ ล้วนอยู่ในส่วนของ presentation ซึ่งหมายความว่ามันควรทำด้วย CSS
CSS Transitions ฝังอยู่ในตัว web browsers เลย นั่นหมายความว่ามันทำงานได้เร็วกว่าวิธีอื่นๆ และยังไม่ต้องพึ่งการติดตั้ง plugin อะไรเพิ่มเติมอีกด้วย
CSS Transitions รองรับทุกๆ properties ที่สามารถทำ transition ได้ ในขณะที่ JavaScript ยังคงรองรับแค่บาง properties เท่านั้น
บาง web browser engine อย่างเช่น Webkit จะใช้ hardware เข้ามาช่วยในการทำ CSS Transitions และนี่คือสาเหตุว่าทำไมมันถึงลื่นไหลกว่าการทำ animation ด้วย JavaScript

เมื่อรู้อย่างนี้แล้ว ก็แทบจะไม่มีเหตุผลอะไรที่เราจะไม่ใช้ CSS Transitions ข้อเสียอย่างเดียวของมันก็คือในเรื่องของ Browser Support ที่ใช้ได้ตั้งแต่ IE10 ขึ้นไปก็เท่านั้นเอง

แท็บ Transitions ใช้ทําอะไร

Transition หรือลูกเล่นในการเปลี่ยนแผ่น slide ให้การนำเสนอผลงานน่าสนใจมากขึ้นเช่นการพลิกแผ่น Slide เก่าไปแล้วตามด้วยแผ่นใหม่ขึ้นมา ส่วน Animation เป็นการใส่รูปแบบภาพเคลื่อนไหวหรือรูปแบบการเคลื่อนไหวของวัตถุต่างๆบนสไลด์นอกจากนั้นยังสามารถกำหนดภาพเคลื่อนไหวให้กับ Chart หรือ Smart Art ได้ด้วย หนังการจัดลำดับการปรากฏของ ...

ข้อใดคือความหมายของ Transition

(แทรนซิซ'เชิน, -เ?ิน) n. การผ่าน, การส่งผ่าน, การนำส่ง, การเปลี่ยนแปลง, ภาวะหัวเลี้ยวหัวต่อ, การเปลี่ยนแปลงลำดับ., See also: transitional adj. transitionary adj. transitionally adv., Syn. change, flux.

ใช้ Transitions ในการตัดต่อวิดีโอเพื่ออะไร

วิดีโอทรานซิชันคือเอฟเฟ็กต์พิเศษที่ใช้ในการตัดต่อหนังหรือวิดีโอเพื่อเปลี่ยนฉาก จากฉากหนึ่งไปอีกฉากหนึ่ง หรือการตัดฟุตเทจออกและต้องการต่อด้วยอีกฟุตเทจ ซึ่งจุดนี้สามารถใช้วิดีโอทรานซิชันเพื่อทำให้การเคลื่อนเปลี่ยนฉากดูราบรื่นน่าดูยิ่งขึ้น หรือจะใส่เข้าไปในภาพที่ไม่มีการเคลื่อนไหวเพื่อเพิ่มความน่าสนใจได้

การกําหนด Effect การเปลี่ยนสไลด์อยู่ในเมนูใด

1. คลิกแถบ Ribbon ชื่อ Animations หัวข้อ Transition to This Slide. 2. ส่วนนี้ที่แถบ Scrollbar คลิกปุ่มลูกศรลง จะปรากฏแบบของ Effect การเลื่อนสไลด์ให้เลือก 3. นำเมาส์ไปชี้ที่ Transition แต่ละแบบ จะแสดงตัวอย่างบนสไลด์ปัจจุบันทันที