[MUSIC]
Hãy để chúng tôi có được một cái nhìn tổng quan ngắn gọn về hỗ trợ hoạt hình trong góc cạnh trước khi chúng tôi đi và
thử tay của chúng tôi thực sự thực hiện một số hình ảnh động trong ứng dụng góc cạnh của chúng tôi.
Như bạn nhận ra,
bản thân hình ảnh động không thêm vào chức năng của ứng dụng Angular của bạn.
Sau đó, câu hỏi đặt ra, tại sao sử dụng hình ảnh động?
Bây giờ nếu bạn nhìn vào nó từ trải nghiệm người dùng, hoặc
quan điểm thiết kế giao diện người dùng, sau đó bạn bắt đầu thấy rằng hình ảnh động
có một ý nghĩa và một mục đích cho việc sử dụng chúng trong một ứng dụng.
Việc đưa ra phản hồi trực quan cho người dùng về
những điều đang xảy ra trong ứng dụng góc cạnh của bạn.
Vì vậy, bạn có thể có một ứng dụng hoàn toàn bereft của hình ảnh động và
rằng nó vẫn cung cấp cùng một tập hợp các chức năng.
Vì vậy, đó là một cái gì đó mà chúng ta cần phải ghi nhớ
khi chúng tôi đang giới thiệu hình ảnh động vào ứng dụng góc cạnh của chúng tôi.
Hình ảnh động là không cần thiết hoặc cần thiết nhưng
họ thêm rằng ít gia vị để ứng dụng góc cạnh của bạn, nếu bạn đang giữ quan điểm đó trong
tâm trí của bạn sau đó bạn sẽ tiếp cận hình ảnh động từ một quan điểm hoàn toàn khác nhau.
Nó giống như không thêm quá nhiều muối vào các món ăn của bạn chỉ vì muối thêm hương vị.
Để nhiều muối cũng làm hỏng món ăn của bạn.
Điều tương tự với hình ảnh động quá.
Quá nhiều hình ảnh động và bạn kết thúc với một người dùng bối rối.
Nhưng hình ảnh động, được thêm vào một cách tinh tế để đưa ra gợi ý cho người dùng, hoặc
đưa ra phản hồi trực quan cho người dùng, thêm rất nhiều giá trị cho ứng dụng góc cạnh của bạn.
Bây giờ may mắn thay, khung vật liệu góc cạnh mà chúng tôi đã sử dụng trong
ứng dụng góc cạnh của chúng tôi, đi kèm với riêng nó được xây dựng trong bộ hình ảnh động.
Thật vậy, đó là lý do tại sao chúng tôi bao gồm mô-đun hoạt hình trình duyệt.
Vào ứng dụng góc cạnh của chúng tôi ngay từ đầu bởi vì
vật liệu góc cạnh đã tận dụng sự hỗ trợ hoạt
hình mà góc cung cấp thông qua hoặc nó là hoạt hình.
Vì vậy, thư viện vật liệu góc
sử dụng các hình ảnh động được đề xuất đi kèm với thiết kế vật liệu.
Những thứ như, ví dụ, khi bạn nhấp vào một nút,
các hiệu ứng gợn sóng mà bạn thấy trên nút và mở rộng tinh tế,
và thu nhỏ các phần khác nhau của chế độ xem của bạn, v.v.
Những
điều này đã được đề xuất bởi cách tiếp cận thiết kế vật liệu, và vì vậy vật liệu góc cạnh đã áp dụng nhiều trong số đó.
Vì vậy, ngay cả khi không đặt một cách rõ ràng trong nỗ lực,
bạn tự động nhận được một số hình ảnh động cần thiết vào
ứng dụng góc cạnh của bạn chỉ bằng cách sử dụng vật liệu góc cạnh.
Nhưng giả sử bạn muốn thêm gia vị của riêng bạn vào hỗn hợp.
Sau đó, làm thế nào để bạn tiếp cận hình ảnh động trong góc cạnh?
Đây là những gì chúng ta sẽ nhanh chóng xem xét trong bài giảng này.
Và sau đó chuyển sang tập thể dục nơi chúng tôi sẽ thực hiện fu và xem nếu chúng ta có
ý nghĩa hoặc nếu họ làm cho một sự khác biệt để cách bạn cảm nhận ứng dụng Angular của bạn.
Ý tưởng đằng sau sự hỗ trợ của Angular cho
hình ảnh động là nó cho phép bạn xây dựng hình ảnh động với
hiệu suất gần bản địa của những gì bạn sẽ nhận được với hình ảnh động CSS thuần túy.
Bây giờ bạn có thể ngay lập tức tự hỏi trong tâm trí của bạn,
tại sao không chỉ sử dụng hình ảnh động CSS tinh khiết?
Thật vậy, bạn cũng có thể làm điều đó, nhưng không có gì ngăn cản bạn sử dụng
hoạt hình CSS thuần túy trong ứng dụng Angular của bạn.
Nhưng lợi thế của việc sử dụng
phương pháp tiếp cận góc để giới thiệu hình ảnh động là góc cạnh,
trước hết, tận dụng sự hỗ trợ từ API hình ảnh động web được
hỗ trợ trong các phiên bản hiện đại hơn của tất cả các trình duyệt đó.
Bây giờ, vì vậy nếu phiên bản trình duyệt của bạn đã hỗ trợ Web Animations API,
sau đó Angular chỉ cần tận dụng một sự khởi đầu để
hỗ trợ các hoạt hình mà bạn sẽ bao gồm trong ứng dụng Angular của bạn.
Nếu không thì bạn cần phải sử dụng một polyfill
gọi là web-animations.min.js vào ứng dụng Angular của bạn.
Trong các bài tập, chúng ta sẽ bắt đầu với giả định rằng chúng ta đang nhắm mục tiêu các
trình duyệt hiện đại, vì vậy tôi không bao gồm một cách rõ ràng polyfill.
Nếu bạn quyết định làm điều đó, tài liệu hình ảnh động góc cạnh
rõ ràng cho bạn biết làm thế nào để điền vào đó để nhắm mục tiêu các trình duyệt cũ hơn.
Vì vậy, một lần nữa, trở lại với câu hỏi,
tại sao không sử dụng hoạt hình CSS thuần túy hơn là sử dụng hoạt hình góc?
Bây giờ đây là nơi
lợi thế của việc sử dụng hoạt hình Angular trong ứng dụng của bạn đi đầu.
Thực tế là hình ảnh động Angular được kết hợp chặt chẽ
với mã của bạn mà bạn viết cho ứng dụng Angular của bạn.
Và do đó, bạn có thể kích hoạt nhiều trong số những hình ảnh động gắn
trực tiếp vào cách ứng dụng góc cạnh của bạn đang phát triển, và
những gì đang xảy ra trong ứng dụng góc cạnh của bạn.
Vì vậy, bạn có thể buộc nó vào vòng đời của các thành phần của bạn.
Bạn có thể buộc nó vào các giai đoạn khác nhau của cách hình chiếu thay đổi chính nó
trong khi bạn đang kết xuất hình chiếu.
Và vì vậy lợi thế mà bạn nhận được từ việc sử dụng thư viện hình ảnh động Angular,
thay vì hoạt hình CSS thuần túy, là một cái gì đó đáng xem xét.
Làm thế nào để chúng ta tiếp cận hình ảnh động trong Angular?
Bản thân các hoạt hình được xây dựng xung quanh các trạng thái và
sự chuyển tiếp giữa các trạng thái trong khuôn khổ Angular, vì vậy
chúng ta định nghĩa các trạng thái khác nhau, trạng thái có thể là bất cứ điều gì nhưng
bạn muốn định nghĩa như là một trạng thái từ góc nhìn của hoạt hình.
Bất kỳ thay đổi trạng thái nào mà bạn muốn gây ra đều
có thể kích hoạt hiệu ứng hoạt hình đi vào hình ảnh.
Vì vậy, chuyển tiếp dọc theo các trạng thái sẽ kích hoạt hành vi hoạt hình
trong ứng dụng góc cạnh của bạn.
Như chúng ta sẽ thấy trong slide tiếp theo, nơi tôi sẽ chỉ cho bạn một ví dụ về
cách bạn có thể sử dụng băng và chuyển tiếp để kích hoạt hoạt hình.
Vì vậy, các khía cạnh hoạt hình của ứng dụng góc cạnh của bạn
được xác định bên trong trang trí thành phần mà bạn sử dụng trong các thành phần của bạn.
Vì vậy, trang trí thành phần có một màu sắc động sản mà bạn
sẽ sử dụng để xác định các giá trị gây nên cho hình ảnh động của bạn.
Vì vậy, tôi đã sử dụng từ kích hoạt.
Trong các bài tập, bạn sẽ thấy làm thế nào chúng ta sẽ thực hiện các trigger cho
hình ảnh động và làm thế nào chúng ta sẽ áp dụng các trigger cho các yếu tố mẫu khác nhau,
và sau đó kích hoạt những hình ảnh động trong một số trường hợp nhất định.
Và ngoài ra, khi bạn cần sử dụng hình ảnh động trong
ứng dụng Angular của bạn, trước hết, bạn cần phải nhập mô-đun hình ảnh động của trình duyệt.
Chúng tôi đã thực hiện điều đó trong bài tập đầu tiên của chúng tôi vì
mô-đun hoạt hình của trình duyệt được yêu cầu để hỗ trợ tài liệu góc cạnh.
Bây giờ, ngoài ra, khi bạn đang triển khai hoạt hình trong các thành phần của bạn.
Sau đó, bạn sẽ cần sự giúp đỡ của các lớp bán kính như kích hoạt, trạng thái
, phong cách, animate,
transition, mà phải được nhập khẩu từ thư viện hình ảnh động Angular.
Và chúng tôi sẽ làm điều đó trong mỗi thành phần đòi hỏi phải sử dụng hình ảnh động.
Như tôi đã đề cập trong slide trước, hành vi hoạt hình trong
ứng dụng Angular của bạn xoay quanh trạng thái và chuyển tiếp giữa các trạng thái. Tiểu
bang có thể là bất cứ điều gì mà bạn định nghĩa là một tiểu bang.
Như bạn sẽ thấy trong ví dụ sau trong bài tập đầu tiên sau bài
giảng này, bạn đã được xác định 2 trạng thái được gọi là hiển thị và ẩn.
Từ tên của tiểu bang, bạn sẽ tự động
bắt đầu đoán những gì hai tiểu bang này ngụ ý.
Bây giờ khi bạn di chuyển từ trạng thái hiển thị sang trạng thái ẩn thì quá trình chuyển đổi
từ trạng thái hiển thị sang trạng thái ẩn sẽ kích hoạt một loại hình ảnh động.
Vì vậy, có lẽ bạn sẽ ẩn một phần tử trong
tầm nhìn của bạn bằng cách thay đổi độ mờ đục của phần tử,
độ mờ đục có nghĩa là phần tử trong suốt như thế nào và độ mờ đục của
một có nghĩa là phần tử hoàn toàn mờ đục và có thể nhìn thấy trên màn hình.
Nếu bạn đặt độ mờ bằng 0 phần tử hoàn toàn biến mất khỏi màn hình.
Chúng tôi không loại bỏ phần tử đó từ
bằng cách đơn giản ẩn phần tử đó bằng cách thay đổi độ mờ của nó.
Vì vậy, cách đó sẽ là thứ mà bạn có thể kích hoạt.
Tương tự, bạn có thể thay đổi kích thước của một phần tử.
Bạn có thể mở rộng hoặc co lại kích thước của một phần tử bằng cách áp dụng một biến đổi cho
thuộc tính phần tử đó bằng cách sử dụng biến đổi tỷ lệ cho phần tử.
Chúng ta sẽ thấy các ví dụ như tôi đã nói trong bài tập sau.
Vì vậy, tất cả các hình ảnh động mà bạn mô tả
trong ứng dụng Angular của bạn trong chỉ thị thành phần bằng cách sử dụng các thuộc tính hoạt hình
sẽ xoay quanh trạng thái và chuyển tiếp giữa các trạng thái.
Khi bạn nói về các trạng thái và sự chuyển tiếp, có một vài
trạng thái đặc biệt mà chúng ta cần cân nhắc khi chúng ta định nghĩa những chuyển tiếp này.
Một trong những trạng thái đó được gọi là trạng thái vô hiệu.
Và yếu tố đó không phải là trên màn hình. M@@
ột phần tử hoặc hình chiếu hạt không được gắn vào hình chiếu
sẽ được coi là ở trạng thái vô hiệu.
Vì vậy, khi các yếu tố xuất hiện vào quan điểm,
rằng nếu nó được gắn vào ví dụ, sau đó các yếu tố chuyển từ
trạng thái void thành một trong các trạng thái hiện có của phần tử đó.
Vì vậy, trong trường hợp đó,
bạn có thể xác định một sự chuyển tiếp xung quanh từ đi từ void sang một trạng thái nhất định.
Tương tự, bạn cũng có một Tiểu bang khác gọi là tiểu bang ký tự đại diện hoặc
nó được định nghĩa bởi ngôi sao, nghĩa là bạn không quan tâm nó là trạng thái nào.
Vì vậy, nếu bạn cần phải xác định một chuyển tiếp bạn có thể nói,
nếu bạn đang đi từ một trạng thái void sang trạng thái sao, có nghĩa là từ trạng thái void sang bất kỳ
trạng thái nào khác mà bạn đang chuyển tiếp thì bạn có thể áp dụng một biến đổi cụ thể.
Vì vậy, đây là hai cách đặc biệt để xác định các trạng thái nhất định
khi bạn xác định hoạt hình của bạn trong trang trí thành phần.
Vì vậy, đặc biệt, có một vài cách để
mô tả quá trình chuyển đổi được đặc biệt quan tâm đến khóa học.
Một sự chuyển đổi từ trạng thái void sang trạng thái bất kỳ có thể được mô tả bằng cách sử dụng
dấu hai chấm nhập, thay vì nói sao mũi tên void.
Vì vậy, bạn sẽ thấy rằng chúng ta sẽ sử dụng mũi tên
để mô tả sự chuyển tiếp giữa nhà nước.
Vì vậy, đó là cú pháp mà bạn sẽ thấy tôi sử dụng khi tôi xây dựng quá trình chuyển đổi.
Tương tự như vậy,
một khoảng trống cho bất kỳ trạng thái nào khác có thể được mô tả bằng cách sử dụng dấu hai chấm nhập.
Vì vậy, có nghĩa là chế độ xem này đang nhập
vào chế độ xem đang được đặt ra trên màn hình.
Tương tự, một sự chuyển tiếp từ bất kỳ trạng thái nào sang trạng thái void,
có nghĩa là bạn đang loại bỏ phần tử đó khỏi chế độ xem.
Đó cũng sẽ là, có thể được xác định như là dấu hai chấm để lại, có
nghĩa là yếu tố này là để lại từ quan điểm cụ thể đó.
Vì vậy, bạn sẽ thấy tôi sử dụng đại tràng nhập và đại tràng để lại cũng nơi tôi mô tả
sự chuyển tiếp trong bài tập thứ hai mà bạn sẽ thấy trong bài học này.
Vì vậy, với sự hiểu biết nhanh chóng về hình ảnh động trong góc cạnh.
Hãy nhìn vào cách chúng ta thực sự viết mã.
Và để làm điều đó, chúng tôi sẽ chuyển sang các bài tập mà chúng tôi minh họa
cho bạn, làm thế nào chúng tôi sử dụng kiến thức này mà chúng tôi đã đạt được về cách hình ảnh động được mô tả trong góc cạnh để viết các loại bỏ qua mã để
xây dựng và áp dụng các hình ảnh động cho
các yếu tố khác nhau trong quan điểm của chúng tôi các thành phần của chúng tôi.
[ NHẠC]