Vue Amsterdam 2022: Phần VII - Hoạt hình với Vue

Chào mừng! Rất vui được gặp bạn trong phần thứ bảy của loạt bài tóm tắt về Hội nghị Vuejs Amsterdam 2022 của tôi, trong đó tôi chia sẻ tóm tắt tất cả các cuộc nói chuyện với bạn.

Bạn có thể đọc loạt bài Tóm tắt về Hội nghị JSWorld 2022 của tôi (gồm bốn phần) tại đây , nơi tôi đã tóm tắt tất cả các bài nói chuyện của ngày đầu tiên. Bạn cũng có thể tìm thấy các Bài nói trước của hội nghị Vue Amsterdam 2022 trong blog của tôi.

(Định kỳ) Giới thiệu

Sau hai năm rưỡi, Hội nghị JSWorld và Vue Amsterdam đã trở lại Nhà hát Amsterdam từ ngày 1 đến ngày 3 tháng 6, và tôi đã có cơ hội tham dự hội nghị này lần đầu tiên. Tôi đã học được nhiều điều, gặp nhiều người tuyệt vời, nói chuyện với những nhà phát triển tuyệt vời và đã có một khoảng thời gian tuyệt vời. Vào ngày đầu tiên, Hội nghị JSWorld được tổ chức, và vào ngày thứ hai và thứ ba, Vue Amsterdam.

Hội nghị có đầy đủ thông tin với các diễn giả tuyệt vời, mỗi người trong số họ đã dạy cho tôi điều gì đó có giá trị. Tất cả họ đều muốn chia sẻ kiến thức và thông tin của họ với các nhà phát triển khác. Vì vậy, tôi nghĩ sẽ thật tuyệt nếu tôi có thể tiếp tục chia sẻ nó và giúp những người khác sử dụng nó.

Lúc đầu, tôi cố gắng chia sẻ một vài ghi chú hoặc slide, nhưng tôi cảm thấy nó chưa đủ tốt, ít nhất là không tốt như những gì người nói đã chia sẻ với tôi. Vì vậy, tôi quyết định xem lại từng bài phát biểu, đi sâu hơn vào chúng, tìm kiếm, ghi chú và kết hợp chúng với các trang trình bày và thậm chí cả những từ chính xác trong bài phát biểu của họ và sau đó chia sẻ với bạn để những gì tôi chia sẻ với bạn ít nhất là cùng cấp độ với những gì tôi học được từ họ.

Một điểm rất quan trọng

Tất cả những gì bạn đọc được trong vài bài báo này là kết quả của nỗ lực và thời gian của chính người nói, và tôi chỉ cố gắng học hỏi chúng để có thể biến chúng thành những bài báo này. Thậm chí nhiều câu được viết trong những bài báo này chính xác là những gì họ đã nói hoặc những gì họ đã viết trong Trang trình bày. Điều này có nghĩa là nếu bạn học được điều gì đó mới, đó là do nỗ lực của họ.

Cuối cùng nhưng không kém phần quan trọng, tôi có thể không đào sâu vào từng chi tiết kỹ thuật hoặc mã hóa trực tiếp trong một số bài phát biểu. Nhưng nếu bạn quan tâm và cần thêm thông tin, hãy cho tôi biết và tôi sẽ cố gắng viết riêng một bài chi tiết hơn. Ngoài ra, đừng quên kiểm tra Twitter / Linkedin của họ.

Tại đây bạn có thể tìm thấy chương trình của hội nghị.

Hoạt ảnh với Vue

Ramona Biscoveanu - Nhà phát triển Frontend tại SAP

Đôi khi các ứng dụng của chúng ta cần một chút "wow" và chúng ta có thể làm điều này với một số "chuyển động" chỉ với số lượng hoàn hảo để làm cho chúng trở nên sống động hơn.

Chúng ta sẽ xem xét cách sử dụng phép thuật Vue để tạo ra các hình động tuyệt vời, từ những hình đơn giản đến phức tạp hơn, kết hợp Vue với các thư viện hoạt hình.

Các trang web của thập niên 90

Trên các trang web của thập niên 90, đôi khi có rất nhiều chuyển động và màu sắc. Nhưng cách duy nhất chúng ta có thể có ảnh động hồi đó là dùng gif. Chỉ cần tưởng tượng băng thông mà những gif đó tiêu thụ trong thời đại internet Dial-Up! Vì vậy, chúng tôi kết thúc với một số gif khung hình thấp nhỏ để hạn chế tiêu thụ băng thông và đây là kết quả:

Tại sao lại Animate?

Một trong những lý do chúng tôi sử dụng hình ảnh động ngày nay, thậm chí vào thời điểm đó, là để thu hút sự chú ý và tập trung của người dùng. Hãy nghĩ xem chúng ta có bao nhiêu điều phiền nhiễu, thông báo trên điện thoại, cửa sổ bật lên trên trang web hoặc biểu tượng nhảy trên thanh dock trên macOS.

Chúng tôi cũng có thể đánh lừa người dùng nghĩ rằng trang web của chúng tôi nhanh hơn rất nhiều. Chúng tôi cung cấp cho họ nhận thức này rằng API của chúng tôi nhanh hơn bằng cách đặt bộ tải và thanh tiến trình. Các nghiên cứu đang nói rằng nếu bạn có một trình tải tùy chỉnh, bạn có cơ hội giữ chân mọi người trên trang web của chúng tôi lâu hơn.

Đôi khi chúng tôi cố gắng thông báo cho người dùng của mình một cách hiệu quả. Có thể chúng tôi có rất nhiều thứ đang diễn ra trên trang web của mình và chúng tôi muốn cho người dùng biết bước tiếp theo trong quy trình của ứng dụng bằng một nút hoạt hình là gì.

Những lần khác, chúng tôi cần nội dung tương tác cho các tài liệu tiếp thị để giữ chân người dùng ở đó.

Ảnh động cũng có tác dụng mạnh khi bạn cố gắng kể một câu chuyện.

Vue <Transition />

Trong Vanilla JavaScript hoặc jQuery, bạn cần tính toán thủ công thời gian và độ trễ, đồng thời quyết định thời điểm thêm hoặc xóa các lớp. Nhưng trong Vue, chúng tôi bọc phần tử đích vào thành phần <Transition /> và nó tự động thực hiện nhiều việc khó khăn đó. Đây là một hình ảnh động mờ dần đơn giản:

 <transition name="fade"> <p v-if="show">hello</p> </transition>

 .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter-from, .fade-leave-to opacity: 0; }

Đây là cách Vue xử lý điều đó:

Vue <TransitionGroup />

<TransitionGroup> là một thành phần tích hợp được thiết kế để tạo hoạt ảnh cho việc chèn, loại bỏ và thay đổi thứ tự của các phần tử hoặc thành phần được hiển thị trong danh sách.

Đây là một ví dụ đơn giản về một số ô trượt trên màn hình:

 <transition-group tag="div" class="tile-section" name="list" appear> <TileComp v-for="(tile, i) in tiles" :key="i + 'tile'" :header="tile.title" :content="tile.content" :footer="tile.footer" ></TileComp> </transition-group>

 .list-enter-active, .list-leave-active { transition: all 1s ease; } .list-enter-from, .list-leave-to { opacity: 0; transform: translateY(70px); } 

JavaScript Hooks

CSS thật tuyệt vời và chúng ta có thể làm được nhiều điều với nó, nhưng đôi khi nó vẫn chưa đủ.

Vue cung cấp một số hook trên thành phần <Transition /> .

 <Transition @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter" @enter-cancelled="onEnterCancelled" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" @leave-cancelled="onLeaveCancelled" > <!-- ... --> </Transition>

GreenSock GSAP

GreenSock Animation Platform (viết tắt là GSAP ) là một thư viện JavaScript mạnh mẽ cho phép các nhà thiết kế và nhà phát triển front-end tạo ra các hoạt ảnh dựa trên dòng thời gian mạnh mẽ.

Một trong những điều quan trọng nhất mà bạn sẽ nghe thấy rất nhiều trong GSAP là Tween.

Tween là thứ hoạt động của tất cả hoạt ảnh - hãy nghĩ về nó giống như một bộ thiết lập thuộc tính hiệu suất cao. Bạn cung cấp các mục tiêu (các đối tượng bạn muốn tạo hoạt ảnh), thời lượng và bất kỳ thuộc tính nào bạn muốn tạo hoạt ảnh và khi playhead của nó di chuyển đến một vị trí mới, nó sẽ tìm ra các giá trị thuộc tính tại thời điểm đó và áp dụng chúng cho phù hợp.

Các phương thức phổ biến để tạo một Tween (tất cả các phương thức này đều trả về một thể hiện Tween):

• gsap.to ()

• gsap.from ()

• gsap.fromTo ()

  
  

Đối với các hình ảnh động đơn giản (không có trình tự cầu kỳ), các phương pháp trên là tất cả những gì bạn cần!

 gsap.to(".selector", {toVars}); gsap.from(".selector", {fromVars}); gsap.fromTo(".selector", {fromVars}, {toVars}); // special properties (duration, ease, etc.) go in toVar

Bây giờ, hãy thêm GSAP vào ví dụ về ô xếp của chúng tôi:

 <div class="tile-section"> <TileComp v-for="(tile, i) in tiles" :key="i + 'tile'" :header="tile.title" :content="tile.content" :footer="tile.footer" ></TileComp> </div>

 import gsap from "gsap"; ... mounted() { gsap.from(".tile", { duration: 0.5, opacity: 0, scale: 0, y: 200, ease: "power2", stagger: 0.1, }); }, 

Bộ đếm hoạt hình Vue

Một ví dụ đơn giản khác về việc sử dụng GSAP để tạo hoạt ảnh đẹp có thể là hoạt ảnh kỷ niệm. Ở đây bạn có thể thấy nó sẽ như thế nào:

Tất cả những gì chúng ta có trong mẫu chỉ là một phần tử h1 nơi chúng ta chuyển giá trị đã định dạng và một nút đặt lại.

 <div> <h1 ref="celebrate" class="counter" :class="{ celebrate: isCelebrate }"> {{ this.numberWithCommas(value) }} </h1> <button class="restart" @click="restart">Restart</button> </div>

Chúng ta cần sử dụng chức năng timeline của GSAP. Hãy coi nó như một công cụ để sắp xếp các hình ảnh động của bạn.

 import gsap from "gsap"; import confetti from "canvas-confetti"; const tl = gsap.timeline(); const start = 100000; const end = 3240074; export default { props: { msg: String, }, data() { return { isCelebrate: false, value: start, }; }, mounted() { tl.fromTo( ".counter", { innerText: start, scale: 0.8, }, { innerText: end, snap: { innerText: 1 }, duration: 4, ease: "linear", onUpdate: () => { this.$refs.celebrate.innerText = this.numberWithCommas( this.$refs.celebrate.innerText ); }, onComplete: () => { this.celebrate(); }, } ); }, methods: { celebrate() { this.isCelebrate = true; confetti({ particleCount: 150, spread: 100, origin: { y: 0.6 }, colors: ["#647eff", "#42d392"], disableForReducedMotion: true, }); }, numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }, restart() { tl.restart(); this.isCelebrate = false; }, }, };

Chuyển đổi trang

Trong Vue Router 4, cú pháp để chuyển trang đã thay đổi một chút. Chúng tôi không quấn bộ định tuyến vào thành phần chuyển tiếp nữa. thay vào đó, chúng tôi sử dụng v-slot :

 <router-view v-slot="{ Component }"> <transition name="fade"> <component :is="Component" /> </transition> </router-view>

Đây là một ví dụ về chuyển đổi trang:

Để xây dựng quá trình chuyển đổi trang này, chúng ta cần nhập hook:

 <router-view v-slot="{ Component }"> <transition :key="$route.path" @enter="onEnter" :css="false" > <component :is="Component" /> </transition> </router-view>

Sau đó, chúng ta cần đăng ký plugin SplitText từ GSAP:

 import gsap from "gsap"; import SplitText from "gsap/SplitText"; gsap.registerPlugin(SplitText); gsap.defaults({ duration: 1, ease: "power3.inOut", });

Và sau đó bằng cách sử dụng plugin, chúng tôi chia nhỏ văn bản để có thể tạo hoạt ảnh cho nó:

 mySplitText(el) { return new SplitText(el, { type: "words,chars,lines" }); },

Chúng ta hãy xem xét móc onEnter :

 onEnter(el, done) { const masterTL = gsap.timeline({ onComplete: () => { done; }, }); masterTL.add( this.enterContentTextAnimation( mySplitText(".content-text-header").chars ) ); masterTL.add( this.enterContentTextAnimation(".content-text-body"), "-=0.9" //overlap with previous by 0.9s ); masterTL.add(this.imgScaleOut(".content img"), "<"); //The start of previous animation },

Và ở đây, bạn có thể thấy cách bạn có thể lồng các dòng thời gian GSAP và các hàm enterContentTextAnimation và imgScaleOut làm như thế nào:

 enterContentTextAnimation(id) { const tl = gsap.timeline(); tl.fromTo( id, { yPercent: "100", opacity: 0, }, { yPercent: "0", opacity: 1, stagger: 0.03, } ); }, imgScaleOut(id) { const tl = gsap.timeline(); tl.from(id, { scale: 1.5, }); return tl; },

SVG

Biểu đồ hoạt ảnh có thể là một ví dụ điển hình về hoạt ảnh SVG:

Đây là một phần của mã làm cho hoạt ảnh biểu đồ này có thể thực hiện được:

 watch: { data(newValue, oldValue) { newValue.map((data, index) => { var id = "#arc" + index; var d = this.calculateArc(data, index); var oldValueD = this.calculateArc(oldValue[index]); const tl = gsap.timeline(); tl.fromTo( id, { attr: { d: oldValueD }, }, { duration: 0.5, attr: { d: d }, yoyo: true, } ); }); }, },

Điều quan trọng là không lạm dụng hình ảnh động trên trang web của bạn. Đôi khi chúng hữu ích, nhưng đôi khi chúng có thể giết chết khán giả của bạn.

Kết thúc cuộc nói chuyện thứ bảy

Tôi hy vọng bạn thích phần này và nó có thể có giá trị đối với bạn cũng như đối với tôi.

Trong vài ngày tới, tôi sẽ chia sẻ phần còn lại của cuộc nói chuyện với bạn. Giữ nguyên…