[MUSIC]
Như chúng ta đã học được trong bài giảng trước,
hình ảnh động thêm rất nhiều giá trị nội tại cho ứng dụng của bạn.
Nó thêm vào một trải nghiệm người dùng tốt hơn.
Bây giờ rõ ràng điều đó không có nghĩa là bạn ném hình ảnh động khắp nơi
chỉ vì lợi ích của việc làm hình ảnh động.
Bạn đặt hình ảnh động tại chỗ vì lợi ích của việc làm cho trải nghiệm người dùng tốt hơn.
Trong bài tập này, chúng tôi sẽ làm hoạt hình đầu tiên của chúng
tôi trong ứng dụng Angular của chúng tôi mà chúng tôi đã phát triển cho đến nay.
Và trên đường đi,
tìm hiểu làm thế nào hình ảnh động có thể được thực hiện trong một ứng dụng Angular.
Chúng tôi sẽ tiếp tục chủ đề này trong phần thứ hai của bài tập, nơi
chúng tôi sẽ thêm hình ảnh động vào ứng dụng Angular của chúng tôi.
Khi chúng tôi bắt đầu khóa học này, trong bài tập đầu tiên với Angular,
chúng tôi đã thêm vào mô-đun hoạt hình vào ứng dụng Angular của chúng tôi
trong app.module.ts5, vì vậy chúng tôi đã nhập mô-đun hoạt hình ngay tại đó.
Bây giờ bước tiếp theo là đi đến các thành phần và
sau đó thêm vào hoạt hình bất cứ nơi nào nó được yêu cầu.
Hoạt hình đầu tiên mà chúng ta sẽ thêm vào là trong thành phần dishdetail ở đây.
Vì vậy, đi đến thành phần dishdetail,
hãy để tôi nhập một vài lớp học ở đây.
Tôi sẽ nhập kích hoạt, trạng thái,
kiểu, hoạt hình và chuyển tiếp từ.
@angular /hoạt hình.
Bây giờ, một khi chúng tôi nhập chúng, chúng tôi có thể sử dụng chúng trong việc xây dựng hoạt hình của chúng tôi.
Vì vậy, làm thế nào để bạn thêm hoạt hình vào một thành phần?
Chúng tôi sẽ thêm các trigger hoạt hình vào trang trí thành phần ở đây.
Vì vậy, đi vào trang trí thành phần sau các URL phong cách,
và thêm vào các hình ảnh động như một tài sản bên trong đó.
Và rồi ở đây, tôi sẽ định nghĩa một kích hoạt,
mà tôi gọi là kích hoạt khả năng hiển thị, và
tôi sẽ định nghĩa kích hoạt khả năng hiển thị bên trong đây.
Bây giờ cho kích hoạt tầm nhìn này,
tôi sẽ xác định hai trạng thái, tôi sẽ xác định một
trạng thái như được hiển thị và tôi sẽ xác định một trạng thái thứ hai
như, Ẩn.
Vì vậy, tôi có sự linh hoạt trong việc xác định trạng thái của mình như thế này.
Vì vậy, đối với trạng thái được hiển thị, nó là gì mà tôi muốn áp dụng?
Vì vậy, đối với trạng thái hiển thị, tôi sẽ áp dụng phong cách như sau,
vì vậy các phong cách mà tôi sẽ áp dụng cho
trạng thái hiển thị, tôi sẽ làm biến đổi, và
biến đổi mà tôi sẽ áp dụng là một quy mô 1.0.
Vì vậy, tôi muốn hiển thị
nó trong kích thước bình thường của nó và
độ mờ của 0.
Vì vậy, đây là cách tôi xác định phong cách hiển thị.
Vì vậy, và trạng thái ẩn tôi xác định phong cách như,
Biến đổi, tôi sẽ nói quy mô (0.5).
Bạn có thể chơi xung quanh với những con số này
để xem liệu hoạt hình có phải là những gì bạn mong muốn hay không.
Tôi cũng chơi xung quanh với những con số này cho đến khi tôi nhận được một cái gì đó mà tôi đã
hài lòng với.
Và 0, hoặc cho trạng thái hiển thị thêm của họ, tôi sẽ đặt độ mờ như 1.
Độ mờ 1 có nghĩa là nó hoàn toàn có thể nhìn thấy.
Độ mờ 0 có nghĩa là nó bị ẩn hoàn toàn.
Bây giờ, tôi đã xác định hai trạng thái ở đây, được hiển thị và ở đây trong tiểu bang.
Bây giờ, sự chuyển đổi giữa hai
trạng thái này, tôi sẽ định nghĩa ở đây là, bất cứ khi nào tôi di chuyển từ bất kỳ trạng thái nào sang bất kỳ
trạng thái nào, nó không quan trọng trạng thái nào tôi di chuyển,
biến đổi được thực hiện với hoạt hình là 0,5 giây,
hoặc 500 mili giây.
Và tôi sẽ dễ dàng ra ngoài.
Vì vậy, ở đây, những gì tôi đang chỉ định là nếu tôi di chuyển từ hiển thị đến trạng thái
ẩn hoặc từ ẩn đến trạng thái hiển thị, tôi sẽ di chuyển trong vòng 0,5 giây, hoặc 500 mili giây.
Và sau đó, tôi sẽ thực hiện quá trình chuyển đổi bằng cách nới lỏng vào và ra, vì vậy
nó sẽ không phải là một quá trình chuyển đổi tuyến tính, nó sẽ được từ từ
vào và sau đó giảm bớt sự chuyển đổi, để
nó không phải là một quá trình chuyển đổi giật từ cái này sang cái kia.
Vì vậy, bạn có thể sử dụng tính dễ dàng này trong hoặc dễ dàng ra ngoài
để xác định cách bạn muốn quá trình chuyển đổi xảy ra.
Vì vậy, bây giờ cho hoạt hình này, tôi đã chỉ
định khả năng hiển thị như là kích hoạt cho hoạt hình này.
Bây giờ để cho phép hoạt hình này hoạt động chính xác,
tôi sẽ đi vào DishDetailComponent của tôi, và sau đó tôi sẽ chỉ định,
trong thành phần này, giá trị ban đầu cho khả năng hiển thị.
Vì vậy, tôi sẽ nói khả năng hiển thị
ban đầu được thiết lập để hiển thị, và sau đó,
bất cứ khi nào tôi thay đổi từ một món ăn khác.
Và điều này xảy ra bất cứ khi nào tôi lấy món ăn ở đây.
Vì vậy, bất cứ khi nào tôi thay đổi các món ăn từ một món ăn khác,
điều này là gây ra bất cứ khi nào các thông số tuyến đường thay đổi.
Vì vậy, tại thời điểm đó, tôi sẽ áp dụng các hoạt hình.
Tôi sẽ làm cho kích hoạt đi từ hiển thị đến trạng thái ẩn và
sau đó trở lại từ ẩn để hiển thị trạng thái khi món ăn có sẵn.
Vì vậy, để áp dụng sự biến đổi đó.
Vì vậy, tôi sẽ kèm theo tuyên bố này bên trong
một khối ở đây trong chức năng mũi tên này.
Và sau đó cũng xác định khả năng hiển thị này ở đây là.
Vì vậy, khi tôi chuyển đổi từ trạng thái này sang trạng thái khác,
vì vậy khi tôi bắt đầu lấy thông tin món ăn từ phía máy chủ,
trước tiên tôi sẽ ẩn món ăn hiện tại bằng cách đặt
giá trị hiển thị thành ẩn, có nghĩa
là món ăn hiện tại đang được hiển thị sẽ bị ẩn khỏi chế độ xem.
Và sau đó khi món ăn mới có sẵn, nó sẽ bật trở lại khung cảnh.
Vì vậy, để làm điều đó, khi món ăn của tôi trở nên có sẵn trong phần thứ hai,
trong phần đăng ký, tôi sẽ nói như là tuyên bố cuối cùng trong khối đó,
tôi sẽ nói khả năng hiển thị này bằng với hiển thị ở đây.
Vì vậy, quan điểm của tôi trở nên rõ ràng tại thời điểm đó.
Bây giờ tôi không áp dụng điều này vào thông báo lỗi bởi vì tôi
sẽ áp dụng khả năng hiển thị này chỉ cho những phần của
mẫu của tôi nơi món ăn của tôi đang thực sự được hiển thị.
Bây giờ, nếu có một lỗi, sau đó tôi chỉ muốn giấu các món ăn chính xác.
Sau đó, chỉ hiển thị thông báo lỗi trong chế độ xem ở đó.
Vì vậy, với những thay đổi này để DishDetailComponent của tôi.
Vì vậy, bạn có thể thấy một lần nữa, giải thích điều này trong đó một lần nữa.
Khi tôi bắt đầu lấy món ăn mới khi thay đổi các thông số tuyến đường,
tôi sẽ thiết lập khả năng hiển thị để ẩn để
món ăn hiện tại đang được hiển thị trong chế độ xem sẽ ẩn chính nó.
Và sau đó khi món ăn mới trở nên có sẵn, do đó sẽ xảy ra khi
đăng ký được gọi là khi quan sát được trở nên có sẵn.
Và sau đó, khi món ăn trở nên có sẵn và sau đó,
tôi đặt món ăn này vào món ăn mà trở về từ người quan sát.
Tại thời điểm đó, tôi sẽ khôi phục lại khả năng hiển thị cho trạng thái được hiển thị đó.
Vì vậy, món ăn mới của tôi mà tôi đã lấy có thể được hiển thị trên màn hình.
Với sự thay đổi này, bây giờ tôi đi đến tập tin mẫu,
và trong tập tin mẫu tôi sẽ áp dụng khả
năng hiển thị cho cả hai món ăn ở đây.
Vì vậy, div đầu tiên nơi tôi hiển thị các món ăn tôi sẽ
áp dụng, Khả năng hiển thị kích hoạt cho các món ăn.
Và sau đó tôi sẽ thiết lập đó bằng
, Visibility, đó là biến mà tôi đã xác định trong mã có.
Bây giờ, tôi áp dụng điều này cho các món ăn ở đây, và cũng áp dụng
điều tương tự cho div thứ hai, nơi tôi hiển thị các ý kiến.
Và đó là nó.
Vì vậy, hãy để tôi lưu tất cả các thay đổi, và sau đó chúng tôi sẽ
đi và xem hoạt hình này hoạt động như thế nào trong ví dụ của chúng tôi.
Đi đến trình duyệt, bây giờ tôi đang hiển thị chúng menu.
Hãy để tôi chọn một trong các món ăn và sau đó di chuyển vào khung cảnh của các món ăn ở đây.
Vì vậy, khi món ăn được hiển thị, chú ý rằng bất cứ khi nào tôi di chuyển từ
món ăn này sang món ăn tiếp theo, vì vậy bằng cách nhấp vào bên phải.
Sau đó, món ăn đó biến mất, và sau đó khi món ăn mới trở nên có sẵn,
quan điểm lại trở nên nhìn thấy và sau đó món ăn mới được hiển thị.
Tương tự như vậy, tôi có thể làm thêm một lần nữa và sau đó nhận thấy rằng món ăn mới,
ngay sau khi thông tin trở nên có sẵn, nó trở nên nhìn thấy lại.
Vì vậy, đây là sự chuyển đổi mà tôi đang áp dụng trong ví dụ này ở đây.
Vì vậy, quay trở lại, bạn có thể thấy hành vi tương tự lặp lại chính nó. Sự
thay đổi giao diện người dùng nhỏ này
thêm rất nhiều giá trị cho cách người dùng nhận thức ứng dụng của bạn.
Như bạn nhận ra, điều này không thêm nhiều vào chức năng của ứng dụng của
chính nó, nhưng thêm vào một trải nghiệm người dùng tốt hơn.
Và đó là nơi chúng tôi áp dụng hình ảnh động một cách khôn ngoan trong
ứng dụng của chúng tôi để làm cho một số người dùng kinh nghiệm có ý nghĩa hơn cho
người dùng đang xem ứng dụng Angular của
bạn, hoặc xem ứng dụng di động của bạn, mà chúng ta sẽ thấy trong các khóa học sau.
Điều này hoàn thành bài tập này về hình ảnh động.
Chúng tôi sẽ tiếp tục khám phá hình ảnh động vào
phần thứ hai của bài tập mà đi lên ngay sau này.
Đây là thời điểm tốt để bạn thực hiện một bình luận Git với các hình ảnh động tin nhắn,
phần một.
[ NHẠC]