Animate với Greensock
This post hasn't been updated for 4 years
Có rất nhiều cách để thực hiện animation trên web, và hôm nay mình xin giới thiệu một cách rất hay để animate đó là sử dụng thư viện Greensock
(GSAP)
.
GSAP giúp điều khiển thuộc tính dễ dàng
Animation về cơ bản là thay đổi các giá trị của một thuộc tính nhiều lần trong một quang thời gian. GSAP
nhận vào giá trị ban đầu và kết thúc của một thuộc tính rồi animate nó 60 lần mỗi giây. Chính vì vậy nó mới có tên là "GreenSock Property Manipulator" (GSPM) nhưng vì cái tên đó không xuôi lắm nên họ đã đổi tên thành GSAP
.
Tương tác cùng DOM, SVG, Canvas và nhiều hơn nữa
GSAP
gần như có thể animate mọi thứ trên web, ví dụ như :
- CSS: 2D and 3D
transforms
,colors
,width
,opacity
,border-radius
,margin
và gần như mọi thuộc tính CSS. - SVG:
viewBox
,width
,height
,fill
,stroke
,cx
,r
,opacity
. - Hoặc bất kỳ giá trị số nào trong
Canvas
.
Nhanh và mượt
GSAP
có thể animate mọi thứ mà Javascript có thể chạm tới, với một tốc độ nhanh chóng (nhanh hơn 20 lần so với JQuery)GSAP
hỗ trợ sãn rất nhiều easing functionGSAP
luôn tương thích với rất nhiều trình duyệt như IE, FF...
Animate DOM element
Chúng ta có một div với class là ball
<div class="ball"></div>
gsap.to('.ball', {
duration: 1,
x: 200,
scale: 2
})
Để animate div
này chúng ta nói với GSAP rằng hãy nhận lấy div
có class ball
và thay đổi .to()
một số thuộc tính.
x: 200
dịch ra CSS sẽ là transform: translateX(200px)
, tương tự như vậy ta có thể khai báo như sau
x: 100 // transform: translateX(100px)
y: 100 // transform: translateY(100px)
z: 100 // transform: translateZ(100px)
scale: 2 // transform: scale(2)
scaleX: 2 // transform: scaleX(2)
scaleY: 2 // transform: scaleY(2)
scaleZ: 2 // transform: scaleZ(2)
skew: 15 // transform: skew(15deg)
skewX: 15 // transform: skewX(15deg)
skewY: 15 // transform: skewY(15deg)
rotation: 180 // transform: rotate(180deg)
rotationX: 180 // transform: rotateX(180deg)
rotationY: 180 // transform: rotateY(180deg)
rotationZ: 180 // transform: rotateZ(180deg)
perspective: 1000 // transform: perspective(1000px)
transformOrigin: '50% 50%' // transform-origin: 50% 50%
Đối với SVG
cũng tương tự như vậy
<svg viewBox="0 0 500 400">
<circle class="ball" cx="80" cy="80" r="80" />
</svg>
gsap.to('.ball', {
duration: 1,
x: 200,
scale: 2
})
Eases
Như đã đề cập đến phía trên, GSAP
hỗ trợ chúng ta rất nhiều Easing function, ví dự như
gsap.to('.ball', {
duration: 1.5,
x: 200,
scale: 2,
ease: 'bounce'
})
Chúng ta có thể thêm một khoảng thời gian delay như sau
gsap.to('.ball', {
duration: 1.5,
delay: 1.5,
x: 0,
scale: 1,
ease: 'back.inOut(3)'
})
Tôi hi vọng rằng bài viết này có thể giúp bạn tiếp cận thư viện Greensock(GSAP)
một cách dễ dàng hơn. Cảm ơn vì đã đọc.
Tham khảo
All Rights Reserved