WPF – Giới thiệu về Animation

Animation_MotionGraphicTrước đây, các ứng dụng thường phải tự tạo các thư viện hoặc chức năng tạo animation một cách thủ công. Với sự hỗ trợ của animation trong WPF, bạn không cần phải mất thời gian tìm hiểu các thư viện bên ngoài mà vẫn có thể dễ dàng tạo các ứng dụng với nhiều hiệu ứng đẹp mắt.

Cơ bản

Animation được dùng để thay đổi giá trị của các property của đối tượng. Một property muốn áp dụng được animation cần phải đáp ứng ba điều kiện:
– Phải là Dependency property.
– Phải thuộc class thừa kế từ DependencyObject và hiện thực IAnimatable.
– Kiểu dữ liệu của property phải phù hợp với loại Animation. (Nếu kiểu dữ liệu bạn cần thực hiện animation không được hỗ trợ, xem Custom Animations Overview).

Các loại Animation

Theo kiểu dữ liệu

Có khá nhiều loại animation mà bạn có thể thấy trong namespace System.Windows.Media.Animation. Mỗi animation được tạo để làm việc loại dữ liệu khác nhau và được xác định dựa theo cách đặt tên của chúng. Có thể nói mỗi loại animation đã được phân loại theo kiểu dữ liệu mà chúng hỗ trợ.

Ví dụ: DoubleAnimation dùng để áp dụng cho các property có kiểu dữ liệu double. ColorAnimation áp dụng cho kiểu color.
Các kiểu animtion khác cũng tương tự như ByteAnimation, DecimalAnimation, PointAnimation, VectorAnimation,…

Theo cách thức hoạt động

Animation có thể có các cách hoạt động khác nhau như sử dụng kiểu thông thường (From/To/By), KeyFrames hoặc Path.

– Kiểu thông thường (From/To/By): thay đổi giá trị một cách tuyến tính và đều đặn.
– KeyFrames: Thay đổi dựa vào các mốc mà bạn định nghĩa.
– Path: Thay đổi theo một đường kiểu hình học.

Mỗi kiểu trên có thể được nhận biết thông qua hậu tố của chúng (theo dạng UsingKeyFrames, UsingPath).
Ví dụ với kiểu double ta có ba lớp Animation tương ứng với 3 loại trên là: DoubleAnimation, DoubleAnimationUsingKeyFrames và DoubleAnimationUsingPath.

StoryBoard là gì?

StoryBoard được hiểu là một tập hợp các animation với các thuộc tính chính sau:
RepeatBehaviour : Số lần lặp lại animation.
Target : Đối tượng cần áp dụng animation.
TargetName : Tên của đối tượng cần áp dụng animation.
TargetProperty : Thuộc tính của đối tượng cần áp dụng animation.
AutoReverse : Nếu thuộc tính này có giá trị True, Storyboard sẽ tự động đảo ngược animation khi nó đến đích.

Kết

Để hiểu rõ hơn về Animation, cách tốt nhất là bạn hãy thực hành các ví dụ đơn giản. Có rất nhiều tài liệu hướng dẫn cũng như ví dụ mà bạn có thể dễ dàng tìm thấy trên mạng. Hai link mà tôi khuyên bạn nên đọc là:

Animation Overview

WPF Tutorial – Styles, Triggers & Animation

YinYangIt’s Blog

4 bình luận về “WPF – Giới thiệu về Animation

  1. Cám ơn yinyang vì tutorial animation. Nhưng mình cảm thấy tutorial này còn chung chung. Vì vậy mình mong yingyang làm thêm tutorial khác cho từng kiểu animation và có ví dụ cụ thể.

    Cảm ơn đã đọc ý kiến.

  2. Bạn có thể tham khảo các link mình giới thiệu hoặc tìm thêm trên mạng. Như tiêu đề của bài thì mục đích của mình cũng chỉ giới thiệu thôi cho người mới bắt đầu để họ tiếp cận nhanh hơn. Và thật sự cũng ko cần thiết phải viết lại những thứ đã có sẵn rất nhiều.

  3. nếu tự tạo Animation trong code hoặc xaml sẽ rất xấu hoặc mất thơi gian, muốn các animation đẹp và mượt như Window 8,10 thì nên thử Blend for Visual studio. nhớ dùng chức năng easing function.

Đã đóng bình luận.