NộI Dung
- Nhập từ Sketch
- Tạo lớp mặt nạ và hình đại diện
- Xác định trạng thái
- Hoạt ảnh giữa các trạng thái
- Hãy thử nó trên một thiết bị di động thực sự
Lý do đằng sau việc tạo mẫu thiết kế không phải là mới - nó cũng giống như tất cả những lời bàn tán về thiết kế trong trình duyệt. Khi bạn nhìn thấy một thiết kế trong bối cảnh thực của nó, nó hoàn toàn khác. Bạn đưa ra quyết định tốt hơn khi không phải đưa ra giả định về cách thức hoạt động và cảm nhận của giao diện. Điều này nghe có vẻ giống như công việc bổ sung, nhưng những hiểu biết sâu sắc bạn có thể có được khi thấy thiết kế của mình đang hoạt động là vô giá.
Framer là một công cụ tạo mẫu dựa trên mã mới. Bạn có thể tạo mô hình trong Sketch (hoặc Photoshop) giống như cách bạn thường làm và nhập chúng vào Framer. Sau đó, viết một chút CoffeeScript và bạn có thể đạt được rất nhiều điều.
Tôi sẽ dạy bạn những điều cơ bản về tạo mẫu trong Framer, bằng cách sử dụng ví dụ về nguyên mẫu ứng dụng iOS có hai chế độ xem: chế độ xem hồ sơ và chế độ xem phóng to của hình ảnh đại diện của người dùng. Chúng tôi sẽ tạo nguyên mẫu cách chế độ xem ảnh mở rộng sẽ mở và đóng, đồng thời chúng tôi cũng sẽ tạo hiệu ứng cho nó. Xem bản trình diễn trực tuyến tại đây (để xem mã nguồn, chỉ cần nhấp vào biểu tượng ở góc trên bên trái). Bạn cũng sẽ cần bản dùng thử Framer miễn phí mà bạn có thể nhận được tại framerjs.com.
Nhập từ Sketch
Bước đầu tiên là nhập các lớp từ Sketch vào Framer. Chỉ cần nhấp vào nút Nhập trong Framer khi thiết kế đang mở trong Sketch và chọn tệp chính xác trong hộp thoại sau đó. Framer sẽ tự động nhập hình ảnh từ mỗi lớp và làm cho chúng có thể truy cập được thông qua mã như sau:
sketch = Framer.Importer.load "đã nhập / hồ sơ"
Sử dụng biến đó để truy cập các lớp đã nhập. Ví dụ: để tham chiếu lớp có tên 'nội dung' trong tệp Sketch, bạn phải nhập sketch.content trong Framer.
Tạo lớp mặt nạ và hình đại diện
Chức năng cốt lõi của nguyên mẫu này là mở rộng hình đại diện khi nó được chạm vào và sau đó để đóng lại khi nó được chạm lại. Đầu tiên, chúng ta sẽ tạo hai lớp mặt nạ - một mặt nạ lồng nhau hoặc một mặt nạ bên trong một mặt nạ khác. Chúng tôi sẽ tạo hiệu ứng cho cả hai mặt nạ cùng một lúc để tạo hiệu ứng đóng và mở đẹp mắt, tinh tế. Lớp headerMask sẽ cắt ảnh đại diện thành hình chữ nhật khi nó được mở rộng và lớp mặt nạ sẽ cắt ảnh thành một hình tròn nhỏ trên chế độ xem hồ sơ.
Tạo lớp headerMask như sau:
headerMask = new Layer width: Screen.width, height: 800 backgroundColor: "transparent"
Dòng mã đầu tiên tạo và đặt tên cho lớp mới. Sau đó, sử dụng cú pháp thụt lề của CoffeeScript, chúng tôi đặt các thuộc tính chiều rộng, chiều cao và nền. Chúng tôi sẽ sử dụng nền trong suốt để các lớp bên dưới hiển thị khi ảnh đại diện được mở rộng.
Tiếp theo, tạo lớp mặt nạ:
mask = new Layer width: 1000, height: 1000 backgroundMolor: "transparent", borderRadius: 500 y: sketch.header.height - 100 superLayer: headerMask scale: 0.2, originY: 0
Chúng tôi tạo một lớp mới và thiết lập các thuộc tính theo cách tương tự. BorderRadius lớn làm cho lớp này trở thành một vòng tròn. Chúng tôi định vị lớp mặt nạ để nó chồng lên lớp tiêu đề, được nhập từ Sketch. Chúng tôi cũng sẽ giảm quy mô xuống 20% hay 0,2. Điểm gốcY bằng 0 đặt điểm neo hoặc đăng ký của hình ảnh ở cạnh trên cùng.
Thuộc tính còn lại, superLayer, đặt lớp headerMask mà chúng tôi đã tạo làm lớp cha của lớp mới này. Đây là cách hoạt động của mặt nạ trong Framer. Đơn giản chỉ cần đặt thuộc tính superLayer và lớp cha sẽ che dấu lớp con.
Tiếp theo, chúng ta cần tạo đồ họa hình đại diện và đặt nó bên trong những mặt nạ mới đó. Để thu phóng và tạo hoạt ảnh cho ranh giới cắt, chúng tôi sẽ tạo lớp hình đại diện theo cách thủ công. Sao chép ảnh vào thư mục con 'hình ảnh' của thư mục dự án. Sau đó, tạo một lớp bằng cách sử dụng hình ảnh đó:
avatar = new Layer image: "images / avatar.png" width: mask.width, height: mask.height superLayer: mask, force2d: true
Lưu ý rằng chúng tôi đặt superLayer của avatar là lớp mặt nạ. Cả hai hiện được lồng trong headerMask. Chúng tôi cũng thiết lập chiều rộng và chiều cao để hình ảnh lấp đầy hoàn toàn vùng bị che.
Cuối cùng, chúng tôi sẽ tạo một biến để lưu trữ vị trí Y của mặt nạ mà chúng tôi sẽ sử dụng cho hoạt ảnh. Chúng tôi sẽ căn giữa nó theo chiều ngang, vì nó lớn hơn màn hình.
maskY = mask.y mask.centerX ()
Xác định trạng thái
Bước đầu tiên trong việc tạo hoạt ảnh là xác định trạng thái bắt đầu và kết thúc. Trong Framer, các trạng thái giống như các khung hình chính được viết ra bằng mã. Trạng thái chỉ là một tập hợp các thuộc tính. Mỗi lớp đều có trạng thái mặc định. Đối với nguyên mẫu này, mặc định đó sẽ đóng vai trò là điểm bắt đầu cho hoạt ảnh, vì vậy chúng ta chỉ cần đặt trạng thái thứ hai cho mỗi lớp.
Cú pháp cho các trạng thái rất đơn giản. Tham chiếu lớp, sử dụng phương thức layer.states.add (), sau đó liệt kê các thuộc tính được đưa vào.
sketch.content.states.add (hide: {opacity: 0}) headerMask.states.add (move: {y: 120}) mask.states.add (grow: {scale: 1.1, y: maskY - 420})
Trạng thái thứ hai cho lớp nội dung, được nhập từ Sketch và chứa tất cả các phần tử màn hình cấu hình khác, phải hoàn toàn trong suốt. Bằng cách này, khi hình đại diện được mở rộng, chúng tôi sẽ có nền đen và các biểu tượng và yếu tố đã nhập còn lại sẽ hiển thị thông qua.
Dòng mã thứ hai tạo trạng thái cho headerMask, trạng thái này sẽ đơn giản di chuyển nó xuống vị trí Y là 120. Điều này sẽ cho phép tiêu đề và nút đóng hiển thị ở đầu màn hình khi ảnh đại diện được phóng to. Nó cũng sẽ tạo hiệu ứng cho ranh giới cắt của ảnh đại diện.
Cuối cùng, một trạng thái mới cho lớp mặt nạ sẽ vừa mở rộng quy mô vừa di chuyển nó lên, sử dụng biến maskY mà chúng ta đã tạo trước đó. Vì điểm gốc Y (hoặc điểm neo) của lớp mặt nạ là cạnh trên cùng của nó, chúng ta cần di chuyển nó lên 420 pixel để tâm của hình ảnh có thể nhìn thấy được.
Hoạt ảnh giữa các trạng thái
Để tạo hoạt ảnh giữa các trạng thái mặc định và trạng thái mới mà chúng ta vừa tạo, chúng ta chỉ cần thêm bốn dòng mã. Chúng tôi sẽ đặt một trình xử lý nhấp chuột trên lớp hình đại diện. Khi người dùng chạm vào nó trên màn hình hồ sơ, chúng tôi sẽ chuyển sang chế độ xem mở rộng theo các trạng thái quay vòng. Khi nó được nhấn một lần nữa, chúng tôi sẽ quay trở lại các trạng thái mặc định để nó quay trở lại một vòng tròn nhỏ. Các dòng mã tương tự xử lý cả hai tương tác:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Dòng đầu tiên của khối này thiết lập trình xử lý nhấp chuột trên lớp hình đại diện. Bất kỳ lúc nào nó được khai thác, bất kể nó được cắt như thế nào hoặc nó có kích thước như thế nào, các câu lệnh theo sau sẽ chạy.
Sau đó, chúng tôi chỉ cần tham chiếu đến từng lớp và sử dụng phương thức layer.states.next () để chuyển đổi trạng thái. Khi bạn sử dụng layer.states.next (), Framer sẽ sử dụng cài đặt hoạt ảnh mặc định bên trong của nó. Điều này cực kỳ thuận tiện, nhưng bạn có thể tạo ra các hình ảnh động thậm chí còn tốt hơn bằng cách chỉnh sửa các đường cong hoạt ảnh.
Khi sử dụng các trạng thái như chúng tôi ở đây, bạn có thể dễ dàng thay đổi từng đường cong hoạt ảnh riêng biệt bằng cách sử dụng thuộc tính layer.states.animationOptions. Chỉ với ba điều chỉnh nhỏ, hoạt ảnh sẽ hoàn toàn khác:
sketch.content.states.animationOptions = curve: "easy", time: 0.3 headerMask.states.animationOptions = curve: "spring (150, 20, 0)" mask.states.animationOptions = curve: "spring (300, 30, 0) "
Đối với lớp nội dung mờ dần và trong, chúng tôi sẽ chọn một giá trị đặt trước đường cong đơn giản, dễ dàng và đặt thời lượng hoạt ảnh thành 0,3 sao cho rất nhanh.
Đối với lớp headerMask và mask, hãy sử dụng đường cong lò xo. Đối với mục đích của chúng tôi, bạn chỉ cần biết rằng các giá trị đường cong lò xo thay đổi tốc độ và độ nảy của hoạt ảnh. Các giá trị cho lớp mặt nạ sẽ làm cho hoạt ảnh của nó nhanh hơn nhiều so với headerMask và nội dung. Để biết thêm chi tiết về cài đặt đường cong lò xo, hãy tham khảo tài liệu Framer tại framerjs.com/docs.
Hãy thử nó trên một thiết bị di động thực sự
Xem thiết kế trên thiết bị thực sẽ hiệu quả hơn nhiều so với việc sử dụng trình giả lập và bạn sẽ thấy những lợi ích trong công việc của mình. Framer bao gồm một tính năng nhân bản, là một máy chủ tích hợp cung cấp một URL đến nguyên mẫu của bạn qua mạng cục bộ của bạn. Chỉ cần truy cập URL bằng thiết bị của bạn.
Bạn đã học mọi thứ bạn cần biết để tạo mẫu thiết kế của riêng bạn trong Framer. Bạn còn chờ gì nữa?
Từ ngữ: Jarrod Drysdale
Jarrod Drysdale là tác giả, nhà tư vấn thiết kế, nhà sản xuất sản phẩm kỹ thuật số. Bài báo này ban đầu được xuất bản trong số 270 của tạp chí net.
Thích cái này? Đọc những thứ này!
- Tạo nguyên mẫu trực tiếp, có thể nhấp trong Sketch
- Làm thế nào để bắt đầu một blog
- Những người chỉnh sửa ảnh tốt nhất
