Leon Sans - 這個近期在 Github 與 Hacker News 都一度占據排行榜滿前面的位置，熱度可見一斑。

 Leon Sans 屬於無襯線字體，本身是一個網頁字體，建立於 Canvas 之上，字型本身能調整的參數就非常眾多，而再結合 TweenMax(一個強大的 Javascript 動畫庫) 的動畫效果，更使這個字體更是強大好幾倍。

 這裡有個製作者將各種 Leon Sans 能達成的效果，以動畫的方式在Web上優美的呈現。https://leon-kim.com/

他還很貼心的製作了一個可以及時調整參數的範例網站。
https://leon-kim.com/examples/

手繪動畫



字重改變動畫





波浪感動畫



甚至到更進階的風格



植物風






彩色筆畫






萬花筒？







使用步驟：
Github 上的教學非常簡單易懂，在此我就實作並且介紹一下各式可調參數。

首先，自 Github 下載字體 js 檔案。我們需要的只有其中的 leon.js，其餘的很多都是範例檔案。

路徑：  
./dist/leon.js
Leon Sans 是一個網頁字體，想當然爾，必須先創建一個 HTML 檔案。接著引入 leon.js ，並且加入範例 code。
<!DOCTYPE html>
<html>
<head>
    <title>Leon</title>
    <script src="leon.js"></script>
</head>
<body>
    <script>
        let leon, canvas, ctx;

        const sw = 800;
        const sh = 600;
        const pixelRatio = 2;

        function init() {
            canvas = document.createElement('canvas');
            document.body.appendChild(canvas);
            ctx = canvas.getContext("2d");

            canvas.width = sw * pixelRatio;
            canvas.height = sh * pixelRatio;
            canvas.style.width = sw + 'px';
            canvas.style.height = sh + 'px';
            ctx.scale(pixelRatio, pixelRatio);

            leon = new LeonSans({
                text: 'The quick brown\nfox jumps over\nthe lazy dog',
                color: ['#000000'],
                size: 80,
                weight: 200
            });

            requestAnimationFrame(animate);
        }

        function animate(t) {
            requestAnimationFrame(animate);

            ctx.clearRect(0, 0, sw, sh);

            const x = (sw - leon.rect.w) / 2;
            const y = (sh - leon.rect.h) / 2;
            leon.position(x, y);

            leon.draw(ctx);
        }

        window.onload = () => {
            init();
        };
    </script>
</body>
</html>

Bomb! 馬上就跑出字體了，是不是超簡單。

但是如果你有發現，它還不會動啊？這時我們就要將動畫庫引入了。

 引入 GSAP 的 TweenMax 動畫庫 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>


接著調整控制動畫 
let i, total = leon.drawing.length;
for (i = 0; i < total; i++) { 
    TweenMax.fromTo(leon.drawing[i], 1.6, { 
        value: 0 
    }, { 
        delay: i * 0.05, 
        value: 1,
        ease: Power4.easeOut 
    }); 
}

 There you go! 你的字體手繪動畫也出現了！

 想要更加自訂化，好好了解它豐富的參數吧！
基本屬性：
text : 顯示文字
size : 文字大小
weight : 文字字重，範圍1~900，預設為1
color : 字元顏色
tracking : 文字間隔
leading : 行距
align : 對齊
breakWord : 文字過長自動換行

其餘還有很多，有些特別專與於波浪效果或是其他效果，還有細部調整的 function 可以使用，更多令人驚豔的動畫就等待大家創作啦！
Tags

Partical Weng

Post a Comment

張貼留言

較新的 較舊