Hoạt Ảnh Giao Diện

Giới Thiệu

Trước khi đọc bài viết này, vui lòng xem qua cách sử dụng API liên quan và hiểu các kiến thức

Sau khi hiểu các kiến thức về tạo ảnh động UI bằng trigger, có thể bạn sẽ nghĩ rằng nó quá rắc rối và phức tạp. Vậy tại sao chúng ta không làm hoạt hình theo kịch bản nhỉ?

Hướng Dẫn

Trong bài viết này, bạn sẽ tìm hiểu cách tạo nhiều loại hoạt ảnh và tìm hiểu về:

- Cách sử dụng Lớp Giao Diện
- Tìm hiểu cách đặt thời gian chờ thông qua tập lệnh
- Tìm hiểu cách thiết lập các chức năng kết hợp thông qua tập lệnh
- Hoạt ảnh độ mờ, Hoạt ảnh tuyến tính, Hoạt ảnh xoay, Hoạt ảnh thu phóng, Hoạt ảnh kết hợp

1. Hoạt Ảnh Độ Mờ

Thành Phẩm

Kịch Bản

Xin vui lòng đọc các ghi chú thông qua kịch bản dưới đây

local uiid = [[7258119162206233205]] -- Thay thế bằng ID giao diện UI của bạn
local el = [[7258119162206233205_2]] -- Thay thế bằng ID thành phần bạn muốn thực hiện hoạt ảnh
 
function opacity_animation(e, id, el, from, to, t) -- Hàm hoạt ảnh Độ trong suốt
    local step_alpha = (to - from) / (t / 0.05) -- Thiết lập sự thay đổi độ trong suốt cho mỗi vòng lặp
    local opacity = from -- Thiết lập độ trong suốt ban đầu
    for i = 1, t / 0.05 do -- Dựa trên thời gian, thiết lập giá trị vòng lặp
        opacity = opacity + step_alpha -- Thiết lập giá trị độ trong suốt hiện tại
        Customui:setAlpha(e, id, el, opacity) -- Sửa đổi độ trong suốt của thành phần
        Trigger:wait(0.05) -- Đợi 0,05 giây
    end
end
 
function ubc(e)
    local p = e.eventobjid
    -- opacity_animation(playerid, UIid, element, giá trị ban đầu, giá trị kết thúc, thời lượng hoạt hình)
    opacity_animation(p, uiid, el, 100, 0, 0.5) -- hoạt ảnh làm mờ
    opacity_animation(p, uiid, el, 0, 100, 0.5) -- hoạt ảnh hiển thị
end
 
-- Đăng ký một trình nghe để chạy khi bất kỳ nút nào được nhấp bởi bất kỳ người chơi nào
ScriptSupportEvent:registerEvent("UI.Button.Click", ubc)

2. Hoạt Ảnh Tuyến Tính

Thành Phẩm

Kịch Bản

Xin vui lòng đọc các ghi chú thông qua kịch bản dưới đây

local uiid = [[7258119162206233205]] -- Thay thế bằng ID giao diện UI của bạn
local el = [[7258119162206233205_2]] -- Thay thế bằng ID của thành phần bạn muốn hoạt hóa
 
function linear_animation(p, id, el, from_x, from_y, to_x, to_y, t)
    local step_x = (to_x - from_x) / (t / 0.05) -- Tính toán bao nhiêu tọa độ x cần di chuyển trong mỗi vòng lặp
    local step_y = (to_y - from_y) / (t / 0.05) -- Tính toán bao nhiêu tọa độ y cần di chuyển trong mỗi vòng lặp
    local x = from_x
    local y = from_y
    for i = 1, t / 0.05 do
        x = x + step_x
        y = y + step_y
        Customui:setPosition(p, id, el, x, y) -- Đặt vị trí của thành phần
        Trigger:wait(0.05)
    end
end
 
function ubc(e)
    local p = e.eventobjid
    -- linear_animation(playerid, ID UI, ID thành phần, Tọa độ xuất phát x, Tọa độ xuất phát y, Tọa độ đích x, Tọa độ đích y)
    linear_animation(p, uiid, el, 150, 190, 600, 300, 1) -- Hoạt ảnh đến tọa độ mới
    linear_animation(p, uiid, el, 600, 300, 150, 190, 1) -- Hoạt ảnh đến tọa độ ban đầu
end
 
-- Đăng ký trình nghe để chạy khi bất kỳ nút nào được nhấp bởi bất kỳ người chơi nào
ScriptSupportEvent:registerEvent("UI.Button.Click", ubc)

Xin lưu ý rằng tọa độ điểm bắt đầu (x=150,y=190) phải giống với tọa độ giao diện người dùng

3. Hoạt Ảnh Xoay

Thành Phẩm

Kịch Bản

Xin vui lòng đọc các ghi chú thông qua kịch bản dưới đây

local uiid = [[7258119162206233205]] -- Thay thế bằng ID giao diện UI của bạn
local el = [[7258119162206233205_2]] -- Thay thế bằng ID của thành phần bạn muốn hoạt hóa
 
function rotate_animation(p, uiid, el, from_angle, to_angle, thời_gian) -- Hàm Hoạt ảnh Xoay
    local bước_góc = (to_angle - from_angle) / (thời_gian / 0.05) -- Góc xoay mỗi frame
    local góc = from_angle -- Thiết lập góc ban đầu
    for i = 1, thời_gian / 0.05 do -- Chạy mỗi frame của hoạt ảnh
        góc = góc + bước_góc -- Thiết lập góc frame tiếp theo
        Customui:rotateElement(p, uiid, el, góc) -- Sửa đổi góc quay của thành phần
        Trigger:wait(0.05) -- Tiếp tục chạy mã sau khi đợi 0,05 giây để xem hoạt ảnh
    end
end
 
function ubc(e)
    local p = e.eventobjid
    -- rotate_animation(playerid, ID UI, ID thành phần, Góc bắt đầu, Góc kết thúc, Thời lượng hoạt ảnh)
    rotate_animation(p, uiid, el, 0, 360, 1)
end
 
-- Đăng ký trình nghe để chạy khi bất kỳ nút nào được nhấp bởi bất kỳ người chơi nào
ScriptSupportEvent:registerEvent("UI.Button.Click", ubc)

Như bạn có thể thấy, phần tử sẽ xoay 360 độ trong 1 giây. Nhưng để xoay tốt hơn, chúng tôi mong muốn phần tử được căn giữa. Làm thế nào chúng ta có thể thực hiện nó?
* Tạo phần tử cha mới

Chúng tôi tạo một phần tử cha mới có chiều rộng và chiều cao bằng 0 và đặt phần tử gốc làm phần tử tập hợp con.

Sau đó, chúng ta phải thay thế biến “el” bằng phần tử cha mới.

local el = [[7258119162206233205_3]]--Thay thế id thành phần của bạn muốn tạo hiệu ứng động

Đây là kết quả:

4. Hoạt Ảnh Tỷ Lệ

Thành Phẩm

Kịch Bản

Xin vui lòng đọc các ghi chú thông qua kịch bản dưới đây

local uiid = [[7258119162206233205]] -- Thay thế bằng ID của giao diện UI của bạn
local el = [[7258119162206233205_2]] -- Thay thế bằng ID của thành phần bạn muốn hoạt hóa
 
function zoom_animation(player, uiid, elementid, from_width, from_height, to_width, to_height, thời_gian)
    -- Hàm hoạt hình Thu phóng
    -- player: UID của người chơi
    -- uiid: ID của đối tượng UI
    -- elementid: ID của đối tượng thành phần
    -- from_width: Chiều rộng ban đầu
    -- from_height: Chiều cao ban đầu
    -- to_width: Chiều rộng mục tiêu
    -- to_height: Chiều cao mục tiêu
    -- time: Thời gian hoạt ảnh
    local step_width  = (to_width - from_width) / (time/ 0.05)
    -- Tính bước dịch chuyển chiều rộng cho mỗi frame, dựa trên sự khác biệt giữa chiều rộng mục tiêu và chiều rộng ban đầu, chia cho số frame
    local step_height = (to_height - from_height) / (time / 0.05)
    -- Tính bước dịch chuyển chiều cao cho mỗi frame, dựa trên sự khác biệt giữa chiều cao mục tiêu và chiều cao ban đầu, chia cho số frame
    local width= from_width
    -- Thiết lập chiều rộng ban đầu bằng giá trị chiều rộng ban đầu được cung cấp
    local height = from_height
    -- Thiết lập chiều cao ban đầu bằng giá trị chiều cao ban đầu được cung cấp
    for i = 1, time / 0.05 do
        -- Chạy mỗi frame của hoạt hình dựa trên thời gian chia cho thời gian mỗi frame (0.05 giây)
        width = width + step_width
        -- Tính toán chiều rộng cho frame tiếp theo bằng cách thêm bước rộng vào giá trị chiều rộng hiện tại
       height = height + step_height
        -- Tính toán chiều cao cho frame tiếp theo bằng cách thêm bước cao vào giá trị chiều cao hiện tại
         Customui:setSize(playerid, uiid, elementid, width, height)
        -- Sửa đổi chiều rộng và chiều cao của thành phần sử dụng hàm Customui:setSize()
        Trigger:wait(0.05)
        -- Đợi 0.05 giây trước khi tiếp tục đến frame tiếp theo
    end
 
end
 
function ubc(e)
    local p = e.eventobjid
    zoom_animation(p,uiid,el,120,126,360,376,1)
    zoom_animation(p,uiid,el,360,376,120,126,1)
end 
-- Đăng ký trình nghe để chạy khi bất kỳ nút nào được nhấp bởi bất kỳ người chơi nào
ScriptSupportEvent:registerEvent("UI.Button.Click",ubc)

5. Hợp Ảnh Kết Hợp

Trong phần giải thích về hoạt ảnh kết hợp, định nghĩa về chức năng hoạt ảnh và đăng ký lắng nghe sự kiện sẽ bị bỏ qua.
Khi nói đến các bản dịch và xoay đơn giản, chúng có thể không hấp dẫn về mặt trực quan. Đây là nơi hoạt ảnh kết hợp phát huy tác dụng
Hãy bắt đầu với một ví dụ rất đơn giản để minh họa một hoạt ảnh tổng hợp cơ bản.
Thành Phẩm

Kịch Bản

local function ubc(e)
  local playerid = e.eventobjid -- Đặt người chơi
  local uiid = "7258119162206233205" -- Đặt giao diện
  local el = "7258119162206233205_2" -- Đặt phần tử
  local o_locat = {x=-60,y=-63,w=120,h=126} -- Vị trí ban đầu của phần tử
 
  -- Hoạt Ảnh Tuyến Tính
  linear_animation(playerid, uiid, el, o_locat.x, o_locat.y, o_locat.x + 200, o_locat.y + 200, 1)
  -- Hoạt Ảnh Xoay
  rotate_animation(playerid, uiid, el, 0, 360, 1)
  -- Hoạt Ảnh Tỷ Lệ
  zoom_animation(playerid, uiid, el, o_locat.x, o_locat.y, o_locat.x + 200, o_locat.y + 200, 1)
  -- Hoạt Ảnh Độ Mờ
  opacity_animation(playerid, uiid, el, 100, 0, 1)
end
 
ScriptSupportEvent:registerEvent("UI.Button.Click", ubc)

Trong hàm, nó đặt ID người chơi, ID giao diện người dùng và ID thành phần. Sau đó, nó áp dụng bốn hoạt ảnh khác nhau cho phần tử: hoạt ảnh dịch, xoay, hoạt ảnh tỷ lệ và hoạt ảnh độ mờ. Mỗi hoạt ảnh có chức năng riêng (linear_animation, rotate_animation, zoom_animation, opacity_animation) và các tham số được chuyển đến các chức năng này để xác định hành vi hoạt ảnh cụ thể.

Việc kết hợp nhiều hoạt ảnh cùng một lúc không được coi là hoạt ảnh kết hợp thực sự. Để phát nhiều hoạt ảnh cùng lúc, chúng ta cần sử dụng hàm đa luồng threadpool:work().
Trước khi sử dụng chức năng này, điều quan trọng là phải hiểu khái niệm về luồng và đa luồng.
Thành Phẩm

Kịch Bản

threadpool:work(function()
    -- Dịch hoạt ảnh vào một luồng
    linear_animation(playerid, uiid, el, o_locat.x, o_locat.y, o_locat.x + 200, o_locat.y + 200, 1)
  end)
-- Hoạt Ảnh Độ Mờ
opacity_animation(playerid, uiid, el, 0, 100, 1)
ScriptSupportEvent:registerEvent("UI.Button.Click", ubc)

Trong đoạn mã cập nhật này, một chuỗi mới được tạo cho hoạt ảnh dịch bằng cách sử dụng threadpool:work().

Hoạt ảnh dịch được gói bên trong một hàm ẩn danh và được thực thi trong luồng mới. Điều này cho phép hoạt ảnh dịch chạy đồng thời với luồng chính, luồng này tiếp tục thực thi hoạt ảnh độ mờ.