AppRun là một thư viện JavaScript xây dựng trên kiến trúc Elm, tập trung vào phát triển ứng dụng web hiệu suất cao và đáng tin cậy. Thư viện kết hợp mô hình lập trình hướng sự kiện và phát triển dựa trên component, giúp lập trình viên dễ dàng triển khai các tương tác phức tạp. Bài viết này sẽ hướng dẫn chi tiết cách sử dụng AppRun để tạo hiệu ứng hoạt hình mượt mà và chức năng kéo thả trực quan, từ đó nâng cao trải nghiệm người dùng cho ứng dụng của bạn.

Triển khai hiệu ứng hoạt hình: Thổi hồn vào giao diện 🎬

AppRun cung cấp một cơ chế hoạt hình linh hoạt và mạnh mẽ thông qua việc sử dụng directive tùy chỉnh và quản lý trạng thái. Điều này cho phép bạn thêm các hiệu ứng hoạt hình vào ứng dụng một cách dễ dàng.

Nguyên lý hoạt động cốt lõi

Hệ thống hoạt hình của AppRun dựa trên cơ chế directive tùy chỉnh. Với directive $animation, bạn có thể khai báo hiệu ứng hoạt hình trực tiếp trong giao diện. Đoạn mã dưới đây (trong file demo/components/animation.tsx) minh họa nguyên lý này:

app.on('$', ({ key, props }) => {
  if (key === '$animation') {
    const value = props[key];
    if (typeof value === 'string') {
      props.class = `animated ${value}`;
    }
  }
});

Đoạn mã này đăng ký một trình xử lý sự kiện toàn cục $. Khi phát hiện thuộc tính $animation, nó tự động thêm tên lớp hoạt hình vào thuộc tính class của phần tử, tích hợp liền mạch với các thư viện hoạt hình như Animate.css.

Ví dụ component hoạt hình hoàn chỉnh

Component dưới đây minh họa cách kiểm soát trạng thái bắt đầu và dừng của hoạt hình:

export class AniComponent extends Component {
  state = {
    animation: true
  }

  view = state => <>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"></link>
    <img $animation={state.animation && 'bounce infinite'} src='logo.png' />
    <div $animation='bounceInRight'>
      <button disabled={state.animation} $onclick='start-animation'>start</button>
      <button disabled={!state.animation} $onclick='stop-animation'>stop</button>
    </div>
  

  update = {
    'start-animation': state => ({ ...state, animation: true }),
    'stop-animation': state => ({...state, animation: false})
  }
}

Component này sử dụng biến trạng thái animation để điều khiển hiệu ứng. Directive $animation gán tên lớp hoạt hình cho phần tử. Khi nhấn nút "start", trạng thái chuyển thành animation: true, kích hoạt hiệu ứng; nút "stop" sẽ ngừng hoạt hình.

Xây dựng chức năng kéo thả: Tối ưu tương tác người dùng 🖱️

Kéo thả là một tương tác quan trọng trong nhiều ứng dụng web. AppRun cung cấp giải pháp triển khai đơn giản nhưng hiệu quả nhờ vào xử lý sự kiện và quản lý trạng thái.

Mã nguồn triển khai kéo thả

Chức năng kéo thả được hiện thực trong file demo/components/dragdrop.tsx, sử dụng sự kiện pointer để theo dõi quá trình kéo:

update = {
  drag: (model, e) => {
    e.target.setPointerCapture(e.pointerId);
    return {
      ...model,
      dragging: true,
      start: { x: e.pageX, y: e.pageY }
    }
  },
  move: (model, e) => {
    if (!model.dragging) return;
    const position = {
      x: model.position.x + e.pageX - model.start.x,
      y: model.position.y + e.pageY - model.start.y
    }
    return ({ ...model, start: { x: e.pageX, y: e.pageY }, position })
  },
  drop: (model, e) => {
    e.target.releasePointerCapture(e.pointerId);
    return { ...model, dragging: false }
  }
}

Đoạn mã định nghĩa ba trình xử lý sự kiện: drag (bắt đầu kéo), move (trong quá trình kéo) và drop (kết thúc kéo). Bằng cách cập nhật thông tin vị trí trong model, component có thể di chuyển phần tử một cách mượt mà.

Component kéo thả hoàn chỉnh

Dưới đây là một component kéo thả đầy đủ:

class DragDemo extends Component {
  model = {
    dragging: false,
    position: { x: 100, y: 100 },
    start: { x: 0, y: 0 },
  }

  view = (model) => {
    const style = {
      userSelect: 'none',
      cursor: 'move',
      position: 'absolute',
      padding: '50px',
      border: '1px solid black',
      color: model.dragging ? 'gold' : 'white',
      "background-color": '#3C8D2F',
      left: `${model.position.x}px`,
      top: `${model.position.y}px`
    };

    return <div ref={el => model.el = el}
      $onpointerdown='drag'
      $onpointermove='move'
      $onpointerup='drop'
      style={style}
    > Kéo tôi!
    </div>
  }
}

Component này sử dụng các directive $onpointerdown, $onpointermove và $onpointerup để gắn kết sự kiện pointer. Khi người dùng kéo phần tử, vị trí trong model được cập nhật theo thời gian thực, qua đó thay đổi thuộc tính CSS của phần tử và tạo hiệu ứng kéo thả.

Ứng dụng và gỡ lỗi trong thực tế

Trong quá trình phát triển, bạn có thể sử dụng công cụ dành cho nhà phát triển của AppRun để gỡ lỗi các hiệu ứng hoạt hình và chức năng kéo thả. Cách tiếp cận này giúp bạn quan sát trực quan các hành vi và tối ưu hóa chúng một cách nhanh chóng.

Để bắt đầu với AppRun, hãy sao chép kho lưu trữ từ lệnh dưới đây và tham khảo các tệp mẫu demo/components/animation.tsx cũng như demo/components/dragdrop.tsx:

git clone https://gitcode.com/gh_mirrors/ap/apprun