Cách tạo ảnh động và chuyển tiếp với UI chuyển động
Hoạt hình và chuyển tiếp cho phép các nhà thiết kế hình dung sự thay đổi và phân biệt nội dung. Ảnh động và chuyển tiếp là hiệu ứng chuyển động giúp người dùng nhận ra khi có gì đó thay đổi trên trang web, ví dụ họ nhấp vào nút và một thông tin mới xuất hiện trên màn hình. Thêm chuyển động vào ứng dụng và trang web giúp cải thiện trải nghiệm người dùng, vì nó cho phép người dùng hiểu nội dung theo cách trực quan hơn.
Chúng ta có thể tạo hình ảnh động và chuyển tiếp từ đầu hoặc bằng cách sử dụng các thư viện hoặc khung. Tin tốt cho chúng tôi, những người yêu thích, là Zurb, người tạo ra Foundation, Motion UI có nguồn gốc mở vào tháng 10 năm ngoái, thư viện hoạt hình và chuyển tiếp của nó dựa trên Sass.
Ban đầu, nó được gói cùng với Foundation for Apps và bây giờ, đối với bản phát hành độc lập, nó đã được cải tiến, bao gồm cả một hệ thống xếp hàng hoạt hình và mô hình CSS linh hoạt. Motion UI cũng cung cấp năng lượng cho một số thành phần của khung Foundation, như thanh trượt Orbit, trình chuyển đổi Toggler và phương thức Reveal, vì vậy đây là một công cụ khá mạnh mẽ.
Bắt đầu
Mặc dù Motion UI là một thư viện Sass, nhưng bạn không nhất thiết phải sử dụng nó với Sass, vì Zurb cung cấp cho các nhà phát triển một bộ công cụ khởi động tiện dụng chỉ chứa CSS được biên dịch. Bạn có thể tải xuống từ trang chủ của Motion UI và nhanh chóng bắt đầu tạo nguyên mẫu bằng cách sử dụng các lớp chuyển đổi và hoạt hình CSS được xác định trước.
Bộ khởi động không chỉ chứa Giao diện người dùng chuyển động, mà cả khung Foundation, điều đó có nghĩa là bạn có thể sử dụng lưới Foundation và tất cả các chức năng khác của Foundation cho các trang web nếu bạn muốn.
Bộ khởi động cũng được vận chuyển với một index.html tập tin cho phép bạn nhanh chóng kiểm tra khung.
Nếu bạn cần điều chỉnh tinh vi hơn và muốn tận dụng các hỗn hợp Sass mạnh mẽ của Motion UI, bạn có thể cài đặt phiên bản đầy đủ chứa nguồn .scss các tệp có npm hoặc Bower.
Tài liệu của Motion UI hiện vẫn chưa hoàn thành. Bạn có thể tìm thấy nó ở đây trên Github hoặc đóng góp cho nó nếu bạn muốn.
Tạo mẫu nhanh
Để bắt đầu tạo mẫu, bạn có thể chỉnh sửa index.html tệp của bộ khởi động hoặc tạo tệp HTML của riêng bạn. Bạn có thể xây dựng bố cục bằng cách sử dụng lưới Foundation, nhưng Motion UI cũng có thể được sử dụng như một thư viện độc lập mà không có khung Foundation.
Có 3 loại chính của các lớp CSS được xác định trước trong Motion UI:
- Các lớp chuyển tiếp - cho phép thêm các hiệu ứng chuyển tiếp, chẳng hạn như hiệu ứng trượt, làm mờ và bản lề cho một phần tử HTML.
- Lớp hoạt hình - cho phép bạn sử dụng các hiệu ứng rung, lắc và xoay khác nhau
- Các lớp sửa đổi - hoạt động cùng với cả hai lớp chuyển tiếp và hoạt hình và chúng cho phép bạn điều chỉnh tốc độ, thời gian và độ trễ của chuyển động.
Xây dựng HTML
Điều tuyệt vời về các lớp CSS được xác định trước là chúng không chỉ được sử dụng làm các lớp mà còn như các thuộc tính HTML khác. Ví dụ bạn có thể thêm chúng vào giá trị thuộc tính của nhãn, hoặc bạn có thể sử dụng chúng trong tùy chỉnh của riêng bạn dữ liệu-* thuộc tính cũng.
Trong đoạn mã dưới đây, tôi đã chọn tùy chọn sau này để các lớp hành vi và sửa đổi riêng biệt. Tôi đã sử dụng chậm và giảm bớt sửa đổi các thuộc tính như các lớp và tạo ra một tùy chỉnh hoạt hình dữ liệu thuộc tính cho mở rộng quy mô quá độ Các Nhấp vào đây nút có nghĩa là để kích hoạt hiệu ứng.
Chơi hoạt hình và chuyển tiếp với jQuery
UI chuyển động bao gồm một thư viện JavaScript nhỏ cũng có thể phát các hiệu ứng chuyển tiếp và hoạt hình khi một sự kiện nào đó xảy ra.
Thư viện có thể được tìm thấy trong bộ khởi động trong chuyển động-ui-starter> js> nhà cung cấp> chuyển động-ui.js con đường.
Nó tạo ra một Chuyển động đối tượng có hai phương thức: animateIn () và animateOut (). Quá trình chuyển đổi hoặc hoạt hình được liên kết với thành phần HTML cụ thể (
$ (function () $ (". button"). click (function () var $ animation = $ ("# boom"). data ("animation"); MotionUI.animateIn ($ ("# boom") , $ hoạt hình););); Trong đoạn mã trên, chúng tôi đã truy cập vào hoạt hình dữ liệu thuộc tính bằng cách sử dụng jQuery tích hợp sẵn dữ liệu() phương thức, sau đó được gọi là animateIn () phương pháp của Chuyển động vật.
Đây là mã đầy đủ và kết quả. Tôi đã sử dụng các lớp nút tích hợp của khung nền tảng cho Nhấp vào đây và thêm một số CSS cơ bản.
Vì Motion UI khá linh hoạt, bạn cũng có thể thêm và kích hoạt các hiệu ứng chuyển tiếp và hoạt hình theo nhiều cách khác.
Ví dụ trong ví dụ trên, chúng tôi không nhất thiết phải sử dụng hoạt hình dữ liệu thuộc tính tùy chỉnh, nhưng chỉ có thể thêm lớp hành vi với addClass () Phương thức jQuery để
$ ('# boom'). addClass ('mở rộng quy mô'); Tùy chỉnh với Sass
Các lớp CSS được tạo sẵn của Motion UI sử dụng các giá trị mặc định có thể dễ dàng tùy chỉnh với sự trợ giúp của Sass. Có một mixin Sass đằng sau mỗi quá trình chuyển đổi và hoạt hình, cho phép thay đổi cài đặt hiệu ứng. Bằng cách này, bạn có thể dễ dàng tạo một hình ảnh động hoặc chuyển đổi hoàn toàn tùy chỉnh.
Mặc dù vậy, tùy chỉnh sẽ không hoạt động với bộ khởi động, bạn cần cài đặt phiên bản Sass nếu bạn muốn định cấu hình các hiệu ứng theo nhu cầu của riêng bạn.
Để tùy chỉnh một chuyển đổi hoặc hình ảnh động, đầu tiên bạn cần phải tìm mixin liên quan. Các _groupes.scss tệp chứa tên của các lớp CSS được biên dịch với các mixin tương ứng.
Trong ví dụ của chúng tôi, chúng tôi đã sử dụng .mở rộng quy mô và bằng cách xem xét _groupes.scss, chúng ta có thể nhanh chóng phát hiện ra rằng nó sử dụng mui-zoom hỗn hợp:
// Chuyển tiếp @mixin chuyển động-ui-chuyển tiếp sự // Quy mô .scale-in-up @include mui-zoom (in, 0,5, 1); '
UI chuyển động sử dụng mui- tiền tố cho mixin và mỗi mixin có tệp riêng. Giao diện người dùng chuyển động có các quy ước đặt tên khá tự giải thích, vì vậy chúng tôi có thể nhanh chóng tìm thấy mui-zoom mixin trong _zoom.scss tập tin:
@mixin mui-zoom ($ state: in, $ from: 1.5, $ to: 1, $ fade: map-get ($ motion-ui-settings, scale-and-fade), $ thời gian: null, $ time: null, $ delay: null) Hoài
Sử dụng cùng một kỹ thuật, bạn có thể dễ dàng kiểm soát mọi tính năng của hoạt hình hoặc chuyển đổi bằng cách thay đổi giá trị của các biến Sass tương ứng.
Cấu hình các lớp sửa đổi
Các lớp sửa đổi kiểm soát hành vi (tốc độ, thời gian và độ trễ) của hình ảnh động và chuyển tiếp cũng có thể được cấu hình với Sass bằng cách sửa đổi các giá trị của các biến tương ứng trong _sinstall.scss tập tin.
Sau khi bạn thực hiện các thay đổi của mình, Motion UI sẽ sử dụng các giá trị mới làm mặc định trong mọi hoạt ảnh và chuyển tiếp, do đó bạn sẽ không phải định cấu hình từng mixin liên quan.
