Animate On Scroll Library 套件使用

AOS 是個支援因網頁捲軸(scroll)變化的動畫效果套件，可以在 VueJs 的專案直接使用，讓頁面內容或圖片量多需要往下滑動時，內容或圖片會出現以動畫效果出現在頁面上，讓頁面增加一些互動性。

這次重新以 Vus 3 建構自己的個人網站時，就以 AOS 的套件來製作動畫效果，其實這些效果使用 CSS 的 Animation 也是可以達到的，但測試之後發現手刻的 CSS 動畫可能 keyframe 分的不夠細，和 AOS 的動畫相較起來沒那麼順暢，所以才又回來改用 AOS 套件。

官網的展示效果清楚簡單，只要將 AOS 套件引入專案，變可以開始使用了，效果也只要下幾個關鍵字，就可達到不錯的結果。

因為之前的作品頗多，所以個人網站上有很多圖片，使用的主要是這一頁。

Animate On Scroll Library
michalsnik/aos: Animate on scroll library

1. 在專案中安裝套件

Install aos package:
yarn add aos@next
or
npm install --save aos@next

2. 在 main.js 裡引入 CSS，讓 AOS 的 CSS 在 global 環境可以使用。

import 'aos/dist/aos.css'; // You can also use <link> for styles

3. 初始化 AOS 套件
   初始化只能一次，時機是所有的 DOM 元素都被渲染到頁面時進行初始化的動作，所以需要在主#app的 Vue 實例裡的mounted生命週期執行初始化。

   <script>
   export default {
     setup() {
       onMounted(() => {
         AOS.init();
       });
     },
   };
   </script>

   在初始化時，ASO 以幫我們初始化了許多參數可以設定，請看aos: Animate on scroll library

   接著記得在#app的 Vue 實例裡引入 AOS，onMounted生命週期
   import { ref, onMounted } from 'vue';
import AOS from 'aos';

4. 可以以單一物件的方式，在<div>裡以data-aos-*的屬性來設定：

<div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
  </div>

但查閱官網的資料，可以直接在圖片增加data-aos-*的屬性直接加上功能。

<img src="./test.png" data-aos="fade-up">