1 / 16

หลักการทำ Animation แบบง่ายๆ

หลักการทำ Animation แบบง่ายๆ. โดย อ. นัฐ พงศ์ ส่งเนียม VB.NET_02_graphics_in_vb_net_06_Animation02_Analog_Clock. โปรแกรมนาฬิกาแบบ Analog. ตั้งชื่อ VB11_Animation02_Analog_Clock. ไปที่ เมนู File เลือก New เลือก Project ตั้งชื่อ :: VB11_Animation02_Analog_Clock.

ann
Download Presentation

หลักการทำ Animation แบบง่ายๆ

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. หลักการทำ Animation แบบง่ายๆ โดย อ. นัฐพงศ์ ส่งเนียม VB.NET_02_graphics_in_vb_net_06_Animation02_Analog_Clock

  2. โปรแกรมนาฬิกาแบบ Analog

  3. ตั้งชื่อ VB11_Animation02_Analog_Clock • ไปที่ เมนู File • เลือก New • เลือก Project • ตั้งชื่อ :: VB11_Animation02_Analog_Clock

  4. กำหนดคุณสมบัติของฟอร์มดังนี้กำหนดคุณสมบัติของฟอร์มดังนี้ • Name :: Frm_Animation02_Analog_Clock • Text :: โปรแกรมนาฬิกาแบบ Analog • BackColor ::

  5. นำ Timer มาวางบนฟอร์ม • แล้วกำหนดคุณสมบัติของ Time ดังนี้ • Name :: Timer1 • Enabled :: True • Interval :: 1000

  6. เพิ่ม Name Space ที่เกี่ยวข้องดังนี้

  7. เลือกเหตุการณ์ Form_Paint

  8. สร้าง Background ของ นาฬิกา • So we should have enough of a grasp on GDI to implement our analog clock now. I saw a really nice looking clock on Codeproject, so my inspiration has come from there (but not the code itself, one must learn to do things for oneself).

  9. 1 คำสั่งส่วนแรก ' Get Graphics Object Dim g As Graphics = e.Graphics ' Create Rectangle To Limit brush area. Dim rect As New Rectangle(20, 20, 230, 230) ' Create Brush Dim linearBrush As New LinearGradientBrush(rect, Color.FromArgb(0, 0, 0), _ Color.FromArgb(120, 120, 255), 225) ' Draw Outer Rim to screen. g.FillEllipse(linearBrush, 20, 20, 200, 200) linearBrush.LinearColors = New Color() {Color.FromArgb(120, 120, 225), Color.FromArgb(0, 0, 0)} ' Draw Inner Rim to screen. g.FillEllipse(linearBrush, 30, 30, 180, 180)

  10. 2 The Face • เพิ่มวงกลมด้านในรูป linearBrush.LinearColors = New Color() {Color.FromArgb(0, 0, _ 0), Color.FromArgb(120, 120, 255)} ' Draw face to screen. g.FillEllipse(linearBrush, 33, 33, 174, 174)

  11. 3 พิมพ์ตัวเลขเวลา ' Create Brush Dim numeralBrush As New SolidBrush(Color.White) ' Create Font Dim textFont As New Font("Arial Bold", 12.0F) ' Draw Numerals g.DrawString("12", textFont, numeralBrush, 109, 40) g.DrawString("11", textFont, numeralBrush, 75, 50) g.DrawString("10", textFont, numeralBrush, 47, 75) g.DrawString("9", textFont, numeralBrush, 43, 110) g.DrawString("8", textFont, numeralBrush, 52, 145) g.DrawString("7", textFont, numeralBrush, 75, 170) g.DrawString("6", textFont, numeralBrush, 113, 180) g.DrawString("5", textFont, numeralBrush, 150, 170) g.DrawString("4", textFont, numeralBrush, 173, 145) g.DrawString("3", textFont, numeralBrush, 182, 110) g.DrawString("2", textFont, numeralBrush, 173, 75) g.DrawString("1", textFont, numeralBrush, 150, 50)

  12. 4 วาดเข็มนาฬิกา ส่วนที่ 1 ' In order to draw the hands, we need to Translate to the center of the clock. g.TranslateTransform(120, 120, MatrixOrder.Append) ' Get the current time ดึงเวลาปัจจุบันของเครื่อง เป็น ชั่วโมง นาที วินาที Dim hour As Integer = DateTime.Now.Hour Dim min As Integer = DateTime.Now.Minute Dim sec As Integer = DateTime.Now.Second ' Create Brushes and Pens Dim hourBrush As New SolidBrush(Color.White) Dim minuteBrush As New SolidBrush(Color.LightGray) Dim secondPen As New Pen(Color.Red, 1) ' Create angles สร้างมุมสำหรับ วินาที นาที และ ชั่วโมง Dim secondAngle As Single = 2.0 * Math.PI * sec / 60.0 Dim minuteAngle As Single = 2.0 * Math.PI * (min + sec / 60.0) / 60.0 Dim hourAngle As Single = 2.0 * Math.PI * (hour + min / 60.0) / 12.0

  13. 5 วาดเข็มนาฬิกา ส่วนที่ 2 ' Set centre point Dim centre As New Point(0, 0) ' Draw Hour Handวาดเข็ม ชั่วโมง Dim gpHour As New GraphicsPath() Dim HourArrow As Point() = { _ New Point(Convert.ToInt32(40 * Math.Sin(hourAngle)), _ Convert.ToInt32(-40 * Math.Cos(hourAngle))), _ New Point(Convert.ToInt32(-5 * Math.Cos(hourAngle)), _ Convert.ToInt32(-5 * Math.Sin(hourAngle))), _ New Point(Convert.ToInt32(5 * Math.Cos(hourAngle)), _ Convert.ToInt32(5 * Math.Sin(hourAngle))), _ New Point(Convert.ToInt32(40 * Math.Sin(hourAngle)), _ Convert.ToInt32(-40 * Math.Cos(hourAngle)))} gpHour.AddPolygon(HourArrow) g.FillPath(hourBrush, gpHour) g.FillEllipse(hourBrush, -5, -5, 10, 10)

  14. 6 วาดเข็มนาฬิกา ส่วนที่ 3 ' Draw Minute Hand Dim gpMinute As New GraphicsPath() Dim MinuteArrow As Point() = { _ New Point(Convert.ToInt32(70 * Math.Sin(minuteAngle)), _ Convert.ToInt32(-70 * Math.Cos(minuteAngle))), _ New Point(Convert.ToInt32(-5 * Math.Cos(minuteAngle)), _ Convert.ToInt32(-5 * Math.Sin(minuteAngle))), _ New Point(Convert.ToInt32(5 * Math.Cos(minuteAngle)), _ Convert.ToInt32(5 * Math.Sin(minuteAngle))), _ New Point(Convert.ToInt32(70 * Math.Sin(minuteAngle)), _ Convert.ToInt32(-70 * Math.Cos(minuteAngle)))} gpMinute.AddPolygon(MinuteArrow) g.FillPath(minuteBrush, gpMinute) g.FillEllipse(minuteBrush, -5, -5, 10, 10)

  15. 7 วาดเข็มนาฬิกา ส่วนที่ 4 ' Draw Second Hand Dim secHand As New Point(Convert.ToInt32(70 * Math.Sin(secondAngle)), _ Convert.ToInt32(-70 * Math.Cos(secondAngle))) g.DrawLine(secondPen, centre, secHand) ' Now tidy up linearBrush.Dispose() numeralBrush.Dispose() textFont.Dispose() hourBrush.Dispose() minuteBrush.Dispose() secondPen.Dispose()

  16. 8 คำสั่งใน Timer Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick Me.Invalidate() End Sub

More Related