MooTools - Fx.Options

MooTools cung cấp các Fx.Options khác nhau sẽ giúp ích cho Fx.Tween và Fx.Morph. Các tùy chọn này sẽ cung cấp cho bạn quyền kiểm soát các hiệu ứng.

Hãy để chúng tôi thảo luận về một số tùy chọn mà MooTools cung cấp. Trước khi chúng tôi tiếp tục, hãy xem cú pháp sau để thiết lập các tùy chọn.

Cú pháp

var morphObject = new Fx.Morph(morphElement, {
   //first state the name of the option
   //place a :
   //then define your option
});

fps (khung hình trên giây)

Tùy chọn này xác định số khung hình mỗi giây trong hoạt ảnh khi biến đổi. Chúng ta có thể áp dụng các fps này cho các chức năng Morph hoặc Tween. Theo mặc định, giá trị của khung hình / giây là 50. Điều này có nghĩa là bất kỳ chức năng nào sẽ mất 50 khung hình / giây trong khi chuyển đổi.

Thí dụ

Hãy để chúng tôi lấy một ví dụ trong đó, chúng tôi sẽ biến đổi một phần tử div bằng cách sử dụng 5 khung hình / giây. Hãy xem đoạn mã sau.

<!DOCTYPE html>
<html>

   <head>
      <style>
         #morph_element {
            width: 100px;
            height: 100px;
            background-color: #1A5276;
            border: 3px solid #dd97a1;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var morphStart = function(){
            this.start({
               'width': 200,
               'height': 200,
               'background-color': '#d3715c'
            });
         }
         
         window.addEvent('domready', function() {
            var morphElement = $('morph_element');
            var morphObject = new Fx.Morph(morphElement, {
               fps: 5
            });
            
            $('start').addEvent('click', morphStart.bind(morphObject));
         });
      </script>
   </head>
   
   <body>
      <div id = "morph_element"> </div><br/>
      <input type = "button" id = "start"value = "START"/>
   </body>
   
</html>

Bạn sẽ nhận được kết quả sau:

Đầu ra

Bấm vào STARTnút để tìm hoạt ảnh biến hình. Điều này giúp chúng ta quan sát số lượng khung hình được sử dụng cho hoạt ảnh. Sử dụng các giá trị khác nhau cho khung hình / giây để có được sự khác biệt trong hoạt ảnh. Bạn nên sử dụng giá trị fps nhỏ hơn 10. Điều này sẽ giúp bạn dễ dàng nhận được sự khác biệt.

đơn vị

Tùy chọn này được sử dụng để đặt loại đơn vị cho số. Nói chung, chúng ta có ba loại đơn vị khác nhau - px,% và ems. Hãy xem cú pháp sau.

Cú pháp

var morphObject = new Fx.Morph(morphElement, {
   unit: '%'
});

Cú pháp trên là để phân bổ tỷ lệ phần trăm cho các đơn vị. Điều này có nghĩa là tất cả các giá trị trong số được coi là phần trăm.

liên kết

Tùy chọn này cung cấp một cách để quản lý nhiều cuộc gọi để bắt đầu hoạt ảnh. Nếu bạn áp dụng nhiều cuộc gọi sự kiện cùng một lúc, các cuộc gọi này sẽ được coi là cuộc gọi liên kết. Khi cuộc gọi đầu tiên kết thúc, cuộc gọi thứ hai sẽ tự động thực thi. Nó chứa ba tùy chọn sau:

ignore- Đây là tùy chọn mặc định. Nó bỏ qua bất kỳ số lượng cuộc gọi nào cho đến khi hoàn thành hiệu ứng.
cancel- Điều này sẽ hủy bỏ hiệu ứng hiện tại, khi có hiệu ứng khác được tạo ra. Nó tuân theo thứ tự ưu tiên cuộc gọi mới nhất.
Chain- Điều này cho phép bạn xâu chuỗi các hiệu ứng lại với nhau và duy trì chồng lệnh. Nó thực hiện tất cả các lệnh gọi cho đến khi nó đi qua tất cả các lệnh gọi được xâu chuỗi trong ngăn xếp.

Hãy xem cú pháp sau để sử dụng tùy chọn liên kết.

Cú pháp

var morphObject = new Fx.Morph(morphElement, {
   link: 'chain'
});

Thời lượng

Tùy chọn này được sử dụng để xác định thời lượng của hoạt ảnh. Ví dụ: nếu bạn muốn một đối tượng di chuyển 100px trong thời gian 1 giây, thì đối tượng đó sẽ di chuyển chậm hơn một đối tượng di chuyển 1000px trong 1 giây. Bạn có thể nhập một số được đo bằng mili giây. Hoặc bạn có thể sử dụng bất kỳ tùy chọn nào trong ba tùy chọn này thay cho số.

Ngắn = 250ms
Bình thường = 500ms (mặc định)
Dài = 1000ms

Hãy xem cú pháp sau để biết thời lượng sử dụng.

Cú pháp

var morphObject = new Fx.Morph(morphElement, {
   duration: 'long'
});

Hoặc là,

var morphObject = new Fx.Morph(morphElement, {
   duration: 1000
});

chuyển tiếp

Tùy chọn này được sử dụng để xác định kiểu chuyển đổi. Ví dụ, nếu nó phải là một quá trình chuyển đổi suôn sẻ hoặc nên bắt đầu từ từ rồi tăng tốc độ về cuối. Hãy xem cú pháp sau để áp dụng chuyển đổi.

Cú pháp

var tweenObject = new Fx.Tween(tweenElement, {
   transition: 'quad:in'
});

Bảng sau đây mô tả các kiểu chuyển đổi khác nhau.

Không.	Loại chuyển tiếp & Mô tả
1	Tuyến tính Hiển thị quá trình chuyển đổi tuyến tính với các sự kiện vào, ra, ra
2	Quad Hiển thị quá trình chuyển đổi bậc hai với các sự kiện vào, ra, ra
3	Khối Hiển thị quá trình chuyển đổi hình khối với các sự kiện vào, ra, ra
4	Quart Hiển thị quá trình chuyển đổi tứ phân với các sự kiện vào, ra, ra
5	Quint Hiển thị quá trình chuyển đổi ngũ phân với các sự kiện vào, ra, ra
6	Pow Được sử dụng để tạo Quad, Cubic, Quart và Quint với các sự kiện vào, ra, ra
7	Hội chợ triển lãm Hiển thị chuyển đổi theo cấp số nhân với các sự kiện vào, ra, ra
số 8	Circ Hiển thị chuyển đổi vòng tròn với các sự kiện vào, ra, ra
9	Sin Hiển thị quá trình chuyển đổi sin với các sự kiện vào, ra, ra
10	Trở lại Làm cho quá trình chuyển đổi quay trở lại, sau đó tiếp tục với các sự kiện vào, ra, ra
11	Nảy Làm cho quá trình chuyển đổi trở nên nảy lửa với các sự kiện vào, ra, ra
12	đàn hồi Chuyển đổi đường cong co giãn với các sự kiện vào, ra, ra