Life would be so much simple if we don't care so much

Posts tagged ‘Silverlight’

Tổng quan về Animation của Silverlight

…Một animation là tập hợp các frames, để chạy animation, các frames sẽ được show lần lượt nhau, giống như một đoạn video được stop + play. Animation chủ yếu dựa vào việc thay đổi các thuộc tính (dependency property) theo 1 giá trị thời gian. Chẳng hạn, làm button lớn dần, ta có thể thay đổi thuộc tính Width của nó trong animation.

1> Một số quy tắc của animation:

Animations thực thi dựa trên việc thay đổi các thuộc tính.

Mỗi kiểu dữ liệu yêu cầu 1 class animation khác nhau. Chẳng hạn, thuộc tính Width của button dùng kiểu double data, dùng class DoubleAnimation, muốn thay đổi màu sắc của 1 Canvas có thể dùng class ColorAnimation.

(Phiên bản silverlight hiện tại chỉ có thể modify các thuộc tính theo các kiểu dữ liệu : double, object, color và point.)

2> Phân loại:

Silverlight cung cấp 2 kiểu class animation:

Linear interpolation: giá trị các thuộc tính biến đổi mềm mại, liên tục trong suốt khoảng thời gian duration được thiết lập. Gồm có 3 class: DoubleAnimation (rất thường được sử dụng), PointAnimation, and ColorAnimation.

Key-frame animation: giá trị các thuộc tính biến đổi theo từng frame, (nhanh chậm phụ thuộc thời gian duration được thiết lập cho từng frame. Gồm 4 class: ColorAnimationUsingKeyFrames, DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, và ObjectAnimationUsingKeyFrames.

Ví dụ: Giá trị góc sẽ thay đổi từ giá trị hiện hành tới 360  nhuần nhuyễn trong 5s

<DoubleAnimation Storyboard.TargetProperty=”Angle” To=”360″ Duration=”0:0:5″></DoubleAnimation>

3> Quản lý Timeline với Storyboard class:

Lớp storyboard được sử dụng để quản lý timeline dành cho animation của bạn. Storyboard xác định giá trị thuộc tính nào áp dụng cho element nào thông qua 2 thuộc tính: TargetProperty và TargetName properties.( Có thể nhóm các animation áp dụng cho cùng 1 đối tượng thay đổi các thuộc tính khác nhau, điều khiển để lặp, dừng, thay đổi vị trí …các animation.). Các giá trị From, To, Duration, By… nhằm thiết lập giá trị đầu và cuối của thuộc tính trong khoảng thời gian duration…, thuộc tính  RepeatBehavior (2x,3x/0:0:13/Forever) giúp bạn play lại các animation theo ý muốn.

Ví dụ:

<Storyboard x:Name=”storyboard”

Storyboard.TargetName=”cmdGrow” Storyboard.TargetProperty=”Width”>

<DoubleAnimation From=”160″ To=”300″ Duration=”0:0:5″></DoubleAnimation>

</Storyboard>

Bạn có thể tạo animation với event trigger hoặc sử dụng code behind:

Event trigger: Không cần fải viết code C#, animation bắt đầu khi trang được load.

Ví dụ:

<UserControl >

<UserControl.Triggers>

<EventTrigger>

<EventTrigger.Actions>

<BeginStoryboard>

<Storyboard>

<DoubleAnimation Storyboard.TargetName=”cmdGrow”

Storyboard.TargetProperty=”Width”

From=”160″ To=”300″ Duration=”0:0:5″></DoubleAnimation>

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</UserControl.Triggers>

<Grid x:Name=”LayoutRoot” Background=”White”>

<Button x:Name=”cmdGrow” Width=”160″ Height=”30″

Content=”This button grows”></Button>

</Grid>

</UserControl>

Code behind: Sử dụng code C# bắt sự kiện để khởi tạo các animation theo ý muốn.

Ví dụ: Định nghĩa storyboard tại resources…

<UserControl >

<UserControl.Resources>

<Storyboard x:Name=”storyboard”>

<DoubleAnimation Storyboard.TargetName=”cmdGrow” Storyboard.TargetProperty=”Width” From=”160″ To=”300 Duration=”0:0:5″></DoubleAnimation>

</Storyboard>

</UserControl.Resources>

<Grid x:Name=”LayoutRoot” Background=”White”>

<Button x:Name=”cmdGrow” Width=”160″ Height=”30″ Click=”cmdGrow_Click” Content=”This button grows”></Button>

</Grid>

</UserControl>

…Viết code behind khởi chạy animation khi click button:

private void cmdGrow_Click(object sender, RoutedEventArgs e)

{

storyboard.Begin();

}

Ngoài ra, sử dụng chức Easing (Easing in, Easing out…) sẽ giúp bạn tùy biến các animation linh hoạt và bắt mắt hơn.

Ví dụ:

<Storyboard x:Name=”growStoryboard”>

<DoubleAnimation Storyboard.TargetName=”cmdGrow” Storyboard.TargetProperty=”Width” To=”400″ Duration=”0:0:1.5″>

<DoubleAnimation.EasingFunction>

<ElasticEase EasingMode=”EaseOut” Oscillations=”10″></ElasticEase>

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

Một khi bạn đã nắm được căn bản việc xây dựng các animation, liên kết các thuộc tính, điều khiển playback với storyboard…thì điều gặp phải khi tạo dựng animation chính là việc chọn lựa đúng thuộc tính để modify để đạt animation như mong muốn. Có 1 số điểm lưu ý như sau:

Nếu muốn tạo 1 animation làm đối tượng xuất hiện, biến mất => không nên dùng thuộc tính Visibility, thay vào đó có thể sử dụng Opacity.

Cần thay đổi vị trí của đối tượng => có thể sử dụng Canvas với thuộc tính Canvas.Left và Canvas.Top.

Download  Examples1

Download Examples2

—Ruby—

Advertisements