Tạo mặt đồng hồ bằng Watch Face Studio

Stay organized with collections Save and categorize content based on your preferences.

Hướng dẫn sau đây mô tả các cửa sổ và công cụ chính có trong Watch Face Studio (WFS).

tạo mặt đồng hồ

Công cụ

WFS bao gồm các công cụ sau:

  • Thêm thành phần: Mở danh sách các thành phần bạn có thể thêm vào mặt đồng hồ.
  • Tiến/Lùi: Di chuyển một thành phần đã chọn lên trước hoặc quay lại.
  • Nhóm/Huỷ nhóm: Nhóm nhiều thành phần lại với nhau và kiểm soát các thành phần này dưới dạng một thành phần.
  • Mặt nạ: Một công cụ cho phép bạn che phủ tất cả hoặc một phần của các lớp khác dựa trên đường viền hình của lớp dưới cùng.
  • Bản dựng: Mở hộp thoại bản dựng.
  • Chạy trên thiết bị: Mở hộp thoại để xem trước mặt đồng hồ của bạn trên thiết bị.

phím nóng

Thành phần

Bạn có thể thêm bao nhiêu thành phần tuỳ ý vào mặt đồng hồ của mình. Bạn cũng có thể sử dụng một nguồn thiết kế tuỳ chỉnh cho các thành phần. Ví dụ: hiển thị dữ liệu nhịp tim hoặc số bước bằng một Thành phần văn bản, hoặc thêm một hình ảnh tuỳ chỉnh để chạy một ứng dụng cụ thể.

Loại thành phần

Thành phần được hỗ trợ được mô tả trong các phần sau.

Canvas mặt đồng hồ

Đặt màu canvas cho lớp dưới cùng của mặt đồng hồ.

canvas

Văn bản

Các trường văn bản là văn bản thông thường theo mặc định. Văn bản thông thường ở dạng tĩnh và không thay đổi. Trong cửa sổ thuộc tính cho trường văn bản, bạn có thể thay đổi trường văn bản từ văn bản thường sang văn bản dữ liệu. Văn bản dữ liệu thay đổi và được điền dựa trên các thẻ.

Để biết thêm thông tin, hãy xem phần Biểu thức thẻ.

Chọn tuỳ chọn Apply Curved-Text (Áp dụng văn bản cong) để tạo văn bản cong theo mặt đồng hồ.

Xác định đường cong của văn bản bằng cách đặt Chiều rộng (W) và Chiều cao (H). Việc thay đổi chiều rộng (W) và chiều cao (H) sẽ làm tự động thay đổi kích thước của thành phần văn bản. Để xác định vị trí văn bản, hãy chọn một trong các giá trị đặt trước trong phạm vi. Bạn có thể tạo thêm các phạm vi bằng cách chỉ định Start (Bắt đầu) và Angular distance (Khoảng cách góc). Đặt hướng của văn bản theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ.

văn bản cong

Hình dạng

Thêm nhiều hình dạng, bao gồm cả hình elip và hình chữ nhật.

Hình ảnh

WFS hỗ trợ nhập hình ảnh tuỳ chỉnh.

Ảnh động

Nhập chuỗi hình ảnh cho ảnh động.

ảnh động

Thêm ảnh động như được mô tả trong các bước sau:

  1. Tạo chuỗi ảnh động của riêng bạn bằng một chương trình thiết kế, chẳng hạn như Adobe Flash hoặc Adobe Premiere.
  2. Nhấp vào Add Component (Thêm thành phần) > Animation (Ảnh động) để thêm các tệp ảnh động vào mặt đồng hồ.
  3. Chọn một chuỗi hình ảnh từ trình duyệt tệp, sau đó nhấp vào Upload (Tải lên).
  4. Chỉnh sửa ảnh động bằng cách thay đổi thứ tự của từng ảnh, xoá hoặc thêm hình ảnh.
  5. Đặt Giá trị trình kích hoạt để xác định thời điểm bạn muốn phát ảnh động.

Đặt giá trị trình kích hoạt thành WatchFace on để bắt đầu chạy ảnh động ngay khi mặt đồng hồ hiển thị. Các tuỳ chọn khác bao gồm Nhấn, Mỗi giây, Mỗi phútMỗi giờ. Bạn cũng có thể trì hoãn quá trình bắt đầu bằng cách sử dụng Độ trễ rồi nhập số giây vào.

Các tuỳ chọn bổ sung cho ảnh động bao gồm:

  • Tự động phát lại: Lập tức lặp lại ảnh động sau khi hoàn tất cho đến khi xảy ra gián đoạn, chẳng hạn như tắt màn hình.
  • Độ trễ lặp lại: Đặt độ trễ giữa các lần lặp lại của ảnh động lặp lại.
  • Tiếp tục phát: Xác định xem nên tiếp tục ảnh động hay bắt đầu từ đầu khi quá trình phát bị dừng do gián đoạn, chẳng hạn như khi nhận một thông báo hoặc cuộc gọi điện thoại.
  • Ẩn trước khi phát: Xác định xem có ẩn ảnh động cho đến khi quá trình phát được kích hoạt hay không.
  • Ẩn sau khi kết thúc: Xác định xem có ẩn ảnh động khi quá trình phát hoàn tất hay không.

ảnh động

Đa phương tiện

Nhập các hình ảnh động có sẵn như tệp AGIF, Lottie hoặc WebP.

Thêm một hình ảnh đa phương tiện như mô tả trong các bước sau:

  1. Nhấp vào Thêm thành phần > Đa phương tiện.
  2. Chọn tệp từ trình duyệt tệp, sau đó nhấp vào Tải lên.
  3. Đặt Giá trị trình kích hoạt thành thời gian bắt đầu của ảnh động.

Lưu ý rằng kích thước tệp, độ phân giải và số khung của hình ảnh đa phương tiện có thể ảnh hưởng đến hiệu suất của thiết bị và mức tiêu thụ pin. Hình ảnh đa phương tiện được tải không đồng bộ trong quá trình hoạt động, đồng thời có thể có độ trễ khi phát tuỳ thuộc vào các chức năng của đồng hồ và các đặc điểm khác nhau của hình ảnh.

Kim đồng hồ

Thêm kim giờ, kim phút và kim giây cho đồng hồ. Mở trình duyệt tệp để chọn tệp hình ảnh cần nhập cho mỗi kim.

kim đồng hồ

Đồng hồ số

Các tuỳ chọn dành cho đồng hồ kỹ thuật số bao gồm Ngày và Giờ. Khi thêm Ngày, hãy thêm một thành phần văn bản bằng thẻ Ngày. Màn hình mặc định cho Ngày là DAY_WEEK_S MON_S DAY_1_31_Z. Khi thêm Thời gian, hãy thêm thành phần văn bản bằng thẻ đồng hồ kỹ thuật số. Màn hình mặc định cho thời gian kỹ thuật số là HOUR_1_12_Z:MIN_Z:SEC_Z.

đồng hồ số

Thanh tiến trình

Thêm thanh tiến trình vào mặt đồng hồ để theo dõi các hoạt động. Các tuỳ chọn cho thành phần thanh tiến trình bao gồm một thanh tiến dạng trình tuyến tính và dạng tròn. Xác định vị trí của thanh tiến trình bằng cách chọn một trong 6 phạm vi đặt sẵn. Bạn có thể tạo thêm các phạm vi bằng cách chỉ định Start (Bắt đầu) và Angular distance (Khoảng cách góc). Đặt hướng của thanh tiến trình theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ.

Quản lý thành phần

Quản lý thành phần bằng các công cụ WFS. Bạn có thể thêm, nhóm, huỷ nhóm và sắp đặt các thành phần trên mặt đồng hồ như được mô tả trong phần sau.

Thêm thành phần

Khi bạn thêm một thành phần, thành phần đó sẽ được đặt ở vị trí mặc định trên canvas. Thành phần này được tự động chọn để bạn có thể dễ dàng sửa đổi.

cửa sổ xem trước

Nhóm/Huỷ nhóm các thành phần

Nhóm là sự kết hợp của một hoặc nhiều thành phần. Bạn có thể nhóm tất cả các thành phần. Bạn cũng có thể huỷ nhóm các thành phần.

nhóm

Che mặt nạ/Mở mặt nạ các thành phần

Hình dạng của lớp dưới cùng xác định khu vực hiển thị của nhóm mặt nạ. Các lớp trên của lớp dưới cùng chỉ xuất hiện qua đường viền hình của lớp dưới cùng. Ví dụ: nếu bạn đặt một hình ảnh bên trong hình tam giác ở lớp dưới cùng và một hình ảnh cũng như ảnh động trong các lớp phía trên, thì hình ảnh và ảnh động sẽ chỉ xuất hiện thông qua đường viền hình tam giác của lớp dưới cùng.

nhóm

Để tạo nhóm mặt nạ, hãy làm như sau:

  1. Chọn các lớp bạn muốn nhóm.
  2. Chọn Mask (Mặt nạ) từ khu vực phím nóng (một dạng phím tắt) hoặc nhấp chuột phải vào các lớp rồi chọn Mask (Mặt nạ).

Để giải phóng nhóm mặt nạ trong cửa sổ các Lớp, hãy làm như sau:

  1. Chọn nhóm mặt nạ.
  2. Chọn Mở mặt nạ từ khu vực phím nóng (một dạng phím tắt), hoặc nhấp chuột phải vào các lớp rồi chọn Mở mặt nạ.

Cửa sổ xem trước

Cửa sổ xem trước là khu vực làm việc chính khi thiết kế mặt đồng hồ.

Thêm tất cả các thành phần trên mặt đồng hồ vào canvas hiển thị trong cửa sổ xem trước. Trên canvas, hãy kéo các phần tử vào vị trí, thay đổi kích thước, sắp xếp và xoay các phần tử đó.

cửa sổ xem trước

Cửa sổ lớp

Cửa sổ lớp hiển thị danh sách các thành phần và nhóm được hiển thị trong cửa sổ xem trước. Theo mặc định, mỗi thành phần đều có lớp riêng.

lớp

Trong cửa sổ lớp này, bạn có thể sử dụng các thao tác sau:

  • Tìm kiếm: Tìm kiếm các lớp theo tên.
  • Hiển thị/Ẩn: Các lớp có thể hiển thị hoặc bị ẩn. Các lớp ẩn không được phát trong cửa sổ xem trước.
  • Màu giao diện: Bật hoặc tắt màu giao diện của bạn.
  • Đổi tên: Thay đổi tên lớp bằng cách nhấp đúp vào trường tên rồi nhập tên mới.

Nhấp chuột phải vào các lớp sẽ hiển thị các tuỳ chọn trình đơn sau:

  • Khoá/Mở khoá: Khoá lớp để lớp đó không di chuyển trên canvas.
  • Nhóm/Huỷ nhóm: Nhóm nhiều thành phần lại với nhau và kiểm soát các thành phần đó như một thành phần.
  • Che mặt nạ/Mở mặt nạ: Làm cho các lớp phía trên lớp dưới cùng chỉ xuất hiện thông qua đường viền hình trong lớp dưới cùng.
  • Hoán đổi hình ảnh (chỉ dành cho hình ảnh): Thay đổi tệp hình ảnh trong một lớp thành một lớp khác.
  • Màu lớp: Thêm nhãn màu vào lớp để phân biệt các lớp.

Dòng có điều kiện

Các dòng có điều kiện cho phép bạn hiện và ẩn các thành phần trên mặt đồng hồ, đồng thời kiểm soát hành vi của các thành phần đó. Sử dụng các dòng có điều kiện để thay đổi giao diện của mặt đồng hồ theo những điều kiện nhất định, chẳng hạn như thời gian, số bước hoặc pin. Nhấp chuột phải vào khu vực khung hình rồi chọn Loop (Vòng lặp) để đặt điều kiện lặp lại.

Vui lòng lưu ý rằng các lớp không hiển thị không làm giảm hiệu suất hoặc ảnh hưởng đến thời lượng pin của bạn.

điều kiện điều kiện

Bạn có thể đặt mặt đồng hồ để đáp ứng các điều kiện sau:

Giờ

Mặt đồng hồ của bạn có thể tự động thay đổi dựa trên các khoảng thời gian. Ví dụ: mặt đồng hồ có thể sáng vào ban ngày rồi tối dần khi thời gian trôi qua. Bạn có thể đặt thời gian theo giờ, phút hoặc giây.

Thêm điều kiện thời gian bằng cách thực hiện theo các bước sau:

  1. Tạo các lớp.
  2. Đặt khoảng thời gian để kiểm soát thời điểm hiển thị từng lớp. Chọn thanh bắt đầu rồi chọn phạm vi thời gian.
  3. Nhấp và kéo từ thanh bắt đầu sang thanh kết thúc.
  4. Lặp lại các bước hai và bước ba để đặt khoảng thời gian cho từng lớp.
  5. Nhấp vào Run (Chạy) để xem trước các thay đổi.

Ví dụ sau cho bạn thấy cách hiển thị các mặt đồng hồ khác nhau cho chế độ cài đặt 12 giờ và cài đặt 24 giờ, dựa vào chế độ cài đặt đã chọn trên điện thoại của người dùng:

  1. Thêm 2 thành phần này vào đồng hồ kỹ thuật số. Thành phần đầu tiên hiển thị phiên bản 12 giờ, còn thành phần thứ hai hiển thị phiên bản 24 giờ.
  2. Đặt các thành phần này vào cùng một vị trí.
  3. Thêm điều kiện 12 giờ và 24 giờ vào các dòng có điều kiện.
  4. Đặt khoảng thời gian để hiển thị đồng hồ kỹ thuật số đầu tiên cho lớp 12 giờ ở định dạng 12 giờ, và hiển thị lớp khác ở định dạng 24 giờ.

Kiểm soát thời gian

Thanh trượt Kiểm soát thời gian cho phép bạn xem mặt đồng hồ trong thực tế. Hãy sử dụng tính năng này để xem trước mặt đồng hồ sẽ thay đổi như thế nào trong suốt 24 giờ trong cửa sổ xem trước. Sử dụng thanh trượt để kéo đến các thời điểm cụ thể, hoặc xem ảnh động trên mặt đồng hồ bằng cách sử dụng nút phát và nút tua đi.

kiểm soát thời gian

Số bước

Bạn có thể thiết kế mặt đồng hồ để thay đổi linh hoạt theo số bước. Ví dụ: bạn có thể tạo mặt đồng hồ thay đổi dựa trên tỷ lệ phần trăm số bước đi được hằng ngày.

Cửa sổ thuộc tính

Mỗi thành phần có một loạt các thuộc tính có thể sửa đổi. Ví dụ: bạn có thể thay đổi màu của các số trên đồng hồ kỹ thuật số, hoặc chọn xem kim đồng hồ có đo giờ, phút hay giây hay không.

thuộc tính

Bảng điều khiển hành động

Bảng điều khiển hành động trong cửa sổ thuộc tính cho phép các hành động tương tác với mặt đồng hồ của bạn. Người dùng có thể nhấn vào một thành phần để thay đổi hình ảnh, mở các ứng dụng hoặc đo nhịp tim.

bảng hành động

Kiểu

Sử dụng thẻ kiểu để thay đổi các kiểu của lớp đã chọn. Bạn có thể thêm kiểu cho hình ảnh, hình ảnh đa phương tiện, chỉ mục và các thành phần kim đồng hồ. Bạn có thể thêm tối đa 30 màu giao diện và 10 hình ảnh. Ví dụ: bạn có thể thêm hình ảnh kim giờ, kim phút và kim giây cụ thể dưới dạng các kiểu kim đồng hồ.

kiểu kiểu kiểu

Chọn biểu tượng "apply theme" (áp dụng giao diện) để áp dụng màu và kiểu giao diện cho lớp được chọn như minh hoạ trong hình sau.

kiểu

Màu

Áp dụng màu đã chỉ định cho thành phần hoặc lưu màu giao diện cho mặt đồng hồ. Đối với các chức năng, giao diện màu ban đầu có thang màu xám.

Giao diện hình ảnh

Sửa đổi giao diện hình ảnh bằng các tuỳ chọn điều khiển sau:

  • Hue: Thanh trượt điều khiển tông màu (sắc độ) của màu.
  • Độ bão hoà: Thanh trượt giúp tăng hoặc giảm độ sống động của màu hình ảnh.
  • Độ sáng: Thanh trượt giúp màu hình ảnh sáng hơn.

Giao diện văn bản

Sử dụng thẻ Giao diện văn bản để đặt căn chỉnh văn bản và kiểu phông chữ. Trang trí văn bản bằng cách chọn Add Bitmap Font (Thêm phông chữ Bitmap) trong phần Project Settings (Cài đặt dự án). Nếu bạn muốn sử dụng kích thước phông chữ mặc định trong số các phông chữ Bitmap đã thêm vào dự án, hãy chọn hộp đánh dấu Áp dụng kích thước phông chữ mặc định.

kiểu văn bản

Chạy

Bạn cũng có thể chạy mặt đồng hồ trong WFS ở bảng Run (Chạy). Bạn có thể điều chỉnh thời gian, ngày, pin thiết bị, số bước, nhịp tim hoặc giá trị GYRO trong WFS để kiểm tra giao diện của mặt đồng hồ trong nhiều tình huống. Bạn có thể đặt chế độ xem trước Run (Chạy) thành Bật hoặc Luôn bật. Khi sử dụng chế độ Luôn bật, giá trị Tỷ lệ pixel hiện tại và nút Phân tích cũng sẽ hiển thị.

chạy luôn chạy

Kiểm thử mặt đồng hồ bằng cách Chạy trên thiết bị.

Để biết thêm thông tin chi tiết, vui lòng xem phần Kiểm thử mặt đồng hồ.