Trang chủ   Kiến thức lập trình   CSS   Tạo CSS Animations với Move.js

Tạo CSS Animations với Move.js

  CSS  23-3-2015

Hiện nay, CSS3 transitions và animations là những cách tạo hiệu ứng nhẹ mà đẹp được dùng nhiều nhất . Tuy nhiên, không phải ai cũng có thể hiểu rõ và sử dụng chúng thật hiệu quả. Nếu các bạn cũng đang gặp rắc rối với cách sử dụng chúng thì mình xin giới thiệu cho các bạn một giải pháp thay thế , đó là dùng Move.js.  Move.js là một thư viện javascript được viết sẵn các CSS3 animations, và các bạn có thể dễ dàng tạo các hiệu ứng chỉ với việc khai báo các hàm và điền các tham số tương ứng.

CSS Animations, CSS Animations với Move.js, Animations, CSS, javascript

Để các bạn dễ hiểu, chúng ta sẽ thử làm một hiệu ứng đơn chuyển động đơn giản bằng CSS3 .Giả sử chúng ta có một thẻ div với class là box. Và chúng ta muốn nó di chuyển 100px từ bên trái khi di chuyển chuột vào nó (hover). Và trong trường hợp này, thì chúng ta sẽ tạo hiệu ứng động bằng CSS3 với cách viết như sau :

.box {

  -webkit-transition: margin 1s;

  -moz-transition: margin 1s;

  -o-transition: margin 1s;

  transition: margin 1s;

}

.box:hover {

  margin-left: 100px;

}

Vơi Move.js chúng ta cũng có thể tạo hiệu ứng động như trên bằng cách sử dụng hàm set() như sau:

move('.box')

  .set('margin-left', 100)

  .end();

Có phải là rất đơn giản và dễ sử dụng hơn nhiều phải không các bạn ?

Cách sử dụng

Để hiểu rõ cách sử dụng, mình sẽ cùng các bạn tạo một demo cho việc sử dụng move.js. Đầu tiên , các bạn vào trang Move.js GitHub để tải phiên bản mới nhất về. Sau đó giải nén và copy file move.js vào đường dẫn của các bạn. Kế tiếp là chèn nó vào file html như sau :

<!DOCTYPE html>

<html>

  <head>

    <title>Move.js Demo</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

  </head>

  <body>

    <a href="#" id="playButton">Play</a>

    <div class="box"></div>

    <script type="text/javascript" src="js/move.js"></script>

  </body>

</html>

Kế tiếp là chúng ta chèn đoạn css sau vào file styles.css

.box {

  margin: 10px;

  width: 100px;

  height: 100px;

  background: #7C9DD4;

  box-shadow: 5px 5px 0px #D1D1D1;

}

#playButton {

  display: block;

  font-size: 20px;

  margin: 20px 10px;

  font-weight: bold;

  color: #222;

  text-decoration: none;

}

Và cuối cùng là viết một đoạn cript để thực thi như sau :

<script type="text/javascript">

      document.getElementById('playButton').onclick = function(e){

        move('.box')

          .x(300)

          .end();

      };

</script>

Move.js Methods

Sau đây là một vài hàm mà chúng ta có thể sử dụng để tạo hiệu ứng :

set(prop, val)

hàm set() được dùng để ấn định giá trị cho thuộc tính CSS. Gồm 2 tham số : thuộc tính css và giá trị của nó. Ví dụ như sau :

.set('background-color', '#CCC')

.set('margin-left', 500)

.set('color', '#222')

add(prop, val)

hàm add() dùng để tăng giá trị cho thuộc tính CSS. Ví dụ sau sẽ tăng 200px cho thuộc tính margin-left :

.add('margin-left', 200)

sub(prop, val)

Ngược lại với hàm add() hàm sub() sẽ trừ giá trị cho thuộc tính CSS.

.sub('margin-left', 200)

rotate(deg)

Hàm này có tác dụng làm các phần tử sẽ quay một góc với số độ được ghi vào tham số, như ví dụ sau, nó sẽ quay một góc 90 độ :

.rotate(90)

duration(n)

Sử dụng hàm này, các bạn có thể chỉ định thời gian hiệu ứng sẽ diễn ra. Ví dụ sau sẽ di chuyển từ bên trái 200px không quá 2s.

.set('margin-left', 200)

.duration('2s')

translate(x[, y])

translate() được dùng để thay thế vị trí của phần tử bằng các tham số là các vị trí trên màn hình với các giá trị x-coordinate và y-coordinate.

.translate(200, 400)

x() và y()

Sử dụng x() bạn sẽ di chuyển phần tử theo chiều ngang với giá trị x-coordinate. Tương tự thì y() được dùng để di chuyển phần tử theo chiều dọc  với giá trị y-coordinate.

.x(300)

.y(-20)

skew(x, y)

Với hàm này các bạn có thể biến một hình chữ nhật thành hình bình hành với việc kéo nghiêng theo các góc.

.skew(30, 40)

scale(x, y)

Hàm này sẽ phóng to hoặc thu nhỏ kích thước của các phần tử HTML.

.scale(3, 3)

Đoạn code trên sẽ tăng kích thước phần tử HTML lên gấp 3 lần.

ease(fn)

hàm này dùng để ấn định kiểu hiệu ứng mà chúng ta sẽ sử dụng như  in , out, in-out,snap, cubic-bezeir...

.ease('in').x(400)

.ease('cubic-bezier(0,1,1,0)').x(400)

Danh sách các kiểu hiệu ứng mà các bạn có thể dùng như sau :

'in':                'ease-in'

'out':               'ease-out'

'in-out':            'ease-in-out'

'snap':              'cubic-bezier(0,1,.5,1)'

'linear':            'cubic-bezier(0.250, 0.250, 0.750, 0.750)'

'ease-in-quad':      'cubic-bezier(0.550, 0.085, 0.680, 0.530)'

'ease-in-cubic':     'cubic-bezier(0.550, 0.055, 0.675, 0.190)'

'ease-in-quart':     'cubic-bezier(0.895, 0.030, 0.685, 0.220)'

'ease-in-quint':     'cubic-bezier(0.755, 0.050, 0.855, 0.060)'

'ease-in-sine':      'cubic-bezier(0.470, 0.000, 0.745, 0.715)'

'ease-in-expo':      'cubic-bezier(0.950, 0.050, 0.795, 0.035)'

'ease-in-circ':      'cubic-bezier(0.600, 0.040, 0.980, 0.335)'

'ease-in-back':      'cubic-bezier(0.600, -0.280, 0.735, 0.045)'

'ease-out-quad':     'cubic-bezier(0.250, 0.460, 0.450, 0.940)'

'ease-out-cubic':    'cubic-bezier(0.215, 0.610, 0.355, 1.000)'

'ease-out-quart':    'cubic-bezier(0.165, 0.840, 0.440, 1.000)'

'ease-out-quint':    'cubic-bezier(0.230, 1.000, 0.320, 1.000)'

'ease-out-sine':     'cubic-bezier(0.390, 0.575, 0.565, 1.000)'

'ease-out-expo':     'cubic-bezier(0.190, 1.000, 0.220, 1.000)'

'ease-out-circ':     'cubic-bezier(0.075, 0.820, 0.165, 1.000)'

'ease-out-back':     'cubic-bezier(0.175, 0.885, 0.320, 1.275)'

'ease-out-quad':     'cubic-bezier(0.455, 0.030, 0.515, 0.955)'

'ease-out-cubic':    'cubic-bezier(0.645, 0.045, 0.355, 1.000)'

'ease-in-out-quart': 'cubic-bezier(0.770, 0.000, 0.175, 1.000)'

'ease-in-out-quint': 'cubic-bezier(0.860, 0.000, 0.070, 1.000)'

'ease-in-out-sine':  'cubic-bezier(0.445, 0.050, 0.550, 0.950)'

'ease-in-out-expo':  'cubic-bezier(1.000, 0.000, 0.000, 1.000)'

'ease-in-out-circ':  'cubic-bezier(0.785, 0.135, 0.150, 0.860)'

'ease-in-out-back':  'cubic-bezier(0.680, -0.550, 0.265, 1.550)'

delay(n)

Hàm này sẽ ấn định thời gian trì hoãn xảy ra hiệu ứng, như ví dụ sau hiệu ứng sẽ bị hoãn lại sau 1s.

move('.box')

  .set('background-color', 'red')

  .delay(1000)

  .end();

then()

Đây là một trong những hàm quan trọng nhất của Move.js, nó dùng để chia đôi hiệu ứng thành các phần khác nhau, rồi thực thi theo thứ tự. Như ví dụ sau, hiệu ứng sẽ được chia làm 2 phần .

move('.box')

  .set('background-color', 'red')

  .x(500)

  .then()

  .y(400)

  .set('background-color', 'green')

  .end();

Mình hy vọng qua bài viết này, các bạn có thể hiểu và sử dụng Move.js một cách hiệu quả trong việc tạo ra các hiệu ứng .

 


 HỖ TRỢ TRỰC TUYẾN