↓ 點擊下方卡片關注「」

前言

記得很早就有很多同學說： “LeaferJS 這么好用，很想用它來開發游戲試試 ”。 當時我只是笑了笑，心想：“我們離做游戲還早著呢 ”。

盡管我們沒有為游戲開發做過專門支持，但用戶的好奇心是擋不住的。陸續有人用 LeaferJS 開發了一些有趣的小游戲，并在社區分享。比如 @子洋開發了一系列的小游戲，還專門寫了小游戲教程 《Leafer 開發小游戲 - 拼圖》，那個時候我還沒有特別重視起來。

直到有一天，有位同學 @hhzzcc 為了實現自己的游戲夢想，在功能還不齊全的情況下，硬是用 LeaferJS 開發了一款 超級瑪麗游戲， 他還寫了一篇教程 《我用LeaferJS 開發一款超級瑪麗游戲》，被很多平臺轉載，傳播甚廣。這時我才意識到， 用戶是多么希望用 LeaferJS 來開發游戲啊。

因此我加快了步伐，全神貫注地開發了一個多月，帶來了這一期的游戲、動畫、狀態和過渡功能更新，希望能幫助大家更輕松地開發小游戲、動畫、UI 控件。

概述

這次更新主要包含了四大主要板塊，每個功能點都配有動圖演示。我會先講解動畫、狀態和過渡這三個基礎支撐板塊，然后再介紹游戲板塊，它提供了一個類似游戲精靈的 Robot 元素。

接下來，我將通過示例和代碼詳細展示這些功能能夠實現什么效果，以及它們帶來了哪些新的體驗。請先欣賞一段路徑動畫的示例：

import { Group, Leafer, Path, Polygon } from'leafer-ui'import '@leafer-in/animate'import '@leafer-in/motion-path'

constleafer = newLeafer({ view: window })

constgroup= newGroup

constpath = newPolygon({ x: 100, y: 100, motionPath: true, // 設置為運動路徑，該 Group 內的其他元素都可以沿此路徑運動points: [ 0, 90, 100, 60, 200, 80, 300, 40, 375, 50, 450, 10, 550, 90, 550, 90, 0, 90], curve: true, fill: '#32cd79', })

constcar = newPath({ scale: 0.03, fill: 'black', around: 'bottom', path: 'M949.586 629.224c-2.703-2.661-4.71-7.055-5.077-10.84-1.301-13.259-1.911-26.584-2.432-39.902-0.255-6.38-1.968-9.879-9.398-10.426-9.201-0.682-18.271-3.044-27.381-4.795-8.772-1.684-14.224-8.514-12.708-15.699 1.616-7.613 8.673-11.886 17.328-10.39 9.422 1.626 18.832 3.33 28.224 4.998 2.266-8.837-0.482-14.764-9.666-20.748-26.418-17.236-55.258-29.587-85.431-37.895-33.994-9.363-68.698-16.141-103.043-24.263-3.719-0.877-7.643-2.533-10.544-4.943-38.731-32.201-80.555-59.555-125.84-81.76-39.617-19.423-82.145-25.662-125.45-28.424-46.553-2.969-92.87-0.148-138.957 6.854-21.555 3.271-41.424 11.358-59.755 22.592-28.399 17.408-56.715 35.075-83.999 54.15-15.036 10.513-29.739 14.978-47.548 10.168-8.07-2.178-16.586-2.709-24.894-4.004-10.75-1.676-18.04 2.278-19.666 10.692-1.759 9.111 3.546 15.686 14.425 17.856 2.131 0.424 4.27 0.775 6.402 1.152 0.104 0.489 0.201 0.969 0.291 1.452-8.561 3.113-17.05 6.419-25.686 9.297-19.17 6.413-21.497 9.439-21.862 29.792-0.054 2.82-0.008 5.64-0.008 9.442 12.299 0 23.845-0.052 35.396 0.011 9.849 0.052 16.351 5.089 16.69 12.78 0.358 7.993-6.497 14.054-16.427 14.179-11.541 0.145-23.085 0.034-35.627 0.034 0 15.755-0.01 30.453 0 45.163 0.012 7.541-0.179 15.08 0.149 22.604 0.238 5.251-1.482 8.45-5.623 12.222-4.171 3.805-6.077 10.349-8.244 15.977-0.971 2.52 0.017 5.747-0.198 8.628-1.697 23.276 9.365 28.266 26.937 29.975 6.879 0.668 13.728 1.563 21.403 2.45-2.97-44.323 10.278-81.655 43.859-110.492 24.57-21.091 53.398-30.794 85.846-29.73 24.153 0.786 46.087 8.406 65.902 21.902 20.16 13.718 34.877 32.001 44.318 54.527 9.258 22.093 12.073 44.983 8.279 69.174H660.11c-5.864-48.677 9.189-89.301 47.71-119.794 26.652-21.102 57.782-28.826 91.558-25.087 60.437 6.677 122.165 65.992 107.31 150.752 12.938-2.104 25.373-3.916 37.706-6.305 2.579-0.503 5.102-2.809 7.047-4.865 9.141-9.619 7.555-39.181-1.855-48.461zM275.612 469.297c28.838-41.323 63.854-70.249 113.867-78.948 2.196 29.673 4.375 59.214 6.583 89.087-40.444-3.403-79.805-6.716-120.45-10.139z m179.897 71.126c-5.494 0.317-11.013 0.055-16.524 0.055v0.078c-5.506 0-11.013 0-16.527-0.003-0.575 0-1.154-0.039-1.73-0.13-7.911-1.247-13.83-7.818-13.216-14.659 0.61-6.893 6.516-12.017 14.546-12.153 11.013-0.181 22.046-0.3 33.051-0.011 8.454 0.211 14.175 5.82 14.375 13.248 0.195 7.312-5.532 13.081-13.975 13.575z m-30.098-58.221c-2.338-32.026-4.608-63.141-6.888-94.362 103.429-11.606 190.875 22.776 269.354 89.534-87.844 19.856-174.859 9.391-262.466 4.828zM236.91 570.114c-49.771-0.016-90.786 39.783-92.253 86.639-1.697 54.596 43.161 96.574 91.545 95.173 51.424-0.008 91.141-40.06 91.079-91.851-0.053-49.787-40.393-89.944-90.371-89.961z m-0.131 125.312c-17.785 0.532-34.806-15.951-35.104-33.997-0.307-18.086 15.924-34.542 34.257-34.748 18.157-0.192 34.65 16.176 34.635 34.365-0.024 17.843-15.75 33.839-33.788 34.38zM787.66 569.923c-53.395-1.601-95.199 41.641-94.92 90.003 0.29 51.36 39.759 91.973 90.084 91.992 52.573 0.038 92.121-39.199 92.188-91.492 0.07-48.553-40.287-89.095-87.352-90.503z m-3.893 125.425c-18.762-0.355-34.274-16.08-34.2-34.674 0.072-18.189 16.564-34.166 34.977-33.883 18.123 0.27 33.8 16.151 33.739 34.193-0.055 18.402-16.424 34.702-34.516 34.364z', animation: { // 沿 path 運動至 100%style: { motion: { type: "percent", value: 1} }, duration: 9, loop: true}})

group. add(path) group. add(car)

leafer. add( group)

一、動畫

LeaferJS 這次提供了豐富的動畫功能，支持延時、循環和 seek。你可以用它制作關鍵幀動畫、搖擺動畫、過渡動畫、路徑動畫和滾動動畫。支持以 animation、transition、animate 方法、Animate 實例 等各種方式創建你所喜歡的動畫。

1.入場和出場動畫

可以用來直接開發頁面過渡效果，以及元素的移入移出效果。

import { Group, Leafer, frame } from'leafer-ui'import '@leafer-in/animate'

constleafer = newLeafer({ view: window })

constpage1 = newframe({ x: 300, y: 100, width: 150, height: 100, fill: '#FEB027', animation: { // 入場動畫keyframes: [{ opacity: 0, offsetX: -150}, { opacity: 1, offsetX: 0}], duration: 0.8},animationOut: { // 出場動畫style: { opacity: 0, offsetX: 150}, duration: 0.8}})

constpage2 = page1.clone({ fill: '#32cd79'}) // 克隆 page 并重新設置fill

constgroup= newGroup({ children: [page1] })

leafer. add( group)

// 切換頁面, 自動執行入場、出場動畫setInterval( => {

if(page1.parent) { group. add(page2) page1. remove} else{ group. add(page1) page2. remove}

}, 2000)

2.搖擺動畫

可以用來制作來回搖擺的動畫效果。

import{ Leafer, Rect } from'leafer-ui'import'@leafer-in/animate'

constleafer = newLeafer({ view: window})

constrect = newRect({ y: 100, cornerRadius: 50, fill: '#32cd79', animation: { style: { x: 500, cornerRadius: 0, fill: '#ffcd00'}, // style keyframeduration: 1, swing: true// 搖擺循環播放}})

leafer.add(rect)

3.關鍵幀動畫

可以用來制作復雜的時間線動畫，允許你精確控制每一幀的延遲、時長和緩動方式。

import{ Leafer, Rect } from'leafer-ui'import'@leafer-in/animate'

constleafer = newLeafer({ view: window})

constrect = newRect({ x: 50, y: 100, cornerRadius: 50, fill: '#32cd79', around: 'center', animation: { keyframes: [ { style: { x: 150, scaleX: 2, fill: '#ffcd00'}, duration: 0.5}, // animate keyframe{ style: { x: 50, scaleX: 1, fill: '#ffcd00'}, duration: 0.2}, { style: { x: 550, cornerRadius: 0, fill: '#ffcd00'}, delay: 0.1, easing: 'bounce-out'}, { x: 50, rotation: -720, cornerRadius: 50} // style keyframe],duration: 3, // 自動分配剩余的時長給未設置 duration 的關鍵幀：(3 - 0.5 - 0.2 - 0.1) / 2 loop: true, join: true// 加入動畫前的元素狀態作為 from 關鍵幀}})

leafer.add(rect)

4.路徑動畫

讓元素沿著另一條路徑運動，或進行自身描邊，已基本開發完成，測試和完善后將單獨發布插件，敬請關注！

import { Group, Leafer, Path, Rect } from'leafer-ui'import '@leafer-in/motion-path'import '@leafer-in/animate'

constleafer = newLeafer({ view: window })

constgroup= newGroup

constpath = newPath({ x: 100, y: 100, scale: 0.2, motionPath: true, // 設置為運動路徑，該 Group 內的其他元素都可以沿此路徑運動stroke: 'black', strokeWidth: 20, animation: { // 沿 path 運動描邊至 100%style: { motion: { type: "percent", value: 1} }, duration: 9, loop: true},path: 'M945.344 586.304c-13.056-93.44-132.48-98.048-132.48-98.048 0-29.888-39.808-47.424-39.808-47.424L201.664 440.832c-36.736 0-42.112 51.264-42.112 51.264 7.68 288 181.44 382.976 181.44 382.976l299.456 0c42.88-31.36 101.888-122.56 101.888-122.56 9.216 3.072 72.768-0.832 97.984-6.144C865.6 740.992 958.336 679.68 945.344 586.304zM365.568 825.28c-145.472-105.664-130.944-328.576-130.944-328.576l80.448 0c-44.416 126.4 43.648 285.696 55.872 307.904C383.232 826.816 365.568 825.28 365.568 825.28zM833.472 694.272c-37.568 22.272-65.152 7.68-65.152 7.68 39.04-54.4 42.112-159.296 42.112-159.296 6.848 2.304 12.288-26.048 61.312 23.744C920.768 616.128 871.04 672.064 833.472 694.272z M351.68 129.856c0 0-119.424 72.832-44.416 140.928 75.008 68.16 68.16 93.44 24.512 153.216 0 0 81.92-41.344 71.168-104.192s-89.6-94.208-72.768-137.792C347.136 138.304 351.68 129.856 351.68 129.856z M615.232 91.648c0 0-119.488 72.832-44.352 140.928 74.944 68.16 68.032 93.44 24.448 153.216 0 0 81.984-41.344 71.232-104.192-10.688-62.784-89.6-94.208-72.832-137.792C610.624 100.032 615.232 91.648 615.232 91.648z M491.136 64c0 0-74.304 6.144-88.128 78.144C389.248 214.144 435.968 240.96 471.936 276.992 507.904 312.96 492.608 380.352 452.032 427.904c0 0 72.768-25.344 89.6-94.976 16.832-69.76-17.344-94.272-52.8-134.784C453.312 157.504 456.64 83.968 491.136 64z', })

constpen = newRect({ width: 15, height: 50, cornerRadius: 10, fill: '#FEB027', around: 'bottom', motionRotation: 45, animation: { // 沿 path 運動至 100%style: { motion: { type: "percent", value: 1} }, duration: 9, loop: true}})

group. add(path) group. add(pen)

leafer. add( group)

5.滾動驅動動畫

你可能見過一些網站在滾動頁面時，頁面元素會自動產生動畫效果。這就是滾動驅動動畫，它通過滾動條或元素移動來控制動畫的播放，即將支持。

二、狀態

可以像 CSS 一樣為元素增加 hover 、 press 、 focus 、 selected 、 disabled 交互狀態樣式。還可以預設復雜多樣的 state 狀態，用于隨時切換。父元素可通過設置 button 屬性，使子元素自動同步交互狀態。

1. 按鈕狀態

import{ Leafer, Box } from'leafer-ui'import'@leafer-in/state'

constleafer = newLeafer({ view: window, fill: 'gray'})

constbox = newBox({ x: 100, y: 100, fill: '#FEB027', cornerRadius: 5,

button: true, // 標記為按鈕，子元素 Text 將自動同步交互狀態hoverStyle: { fill: '#32cd79'}, // 鼠標hover狀態pressStyle: { fill: '#FF4B4B'}, // 鼠標按下狀態

children: [{tag: 'Text', text: 'Button', fontSize: 16, padding: [ 10, 20], fill: 'black', hoverStyle: { fill: 'white'}, // 鼠標在 button 上hover的狀態pressStyle: { fontWeight: 'bold'} // 鼠標在 button 上按下的狀態}]})

leafer.add(box)

2. 點擊切換自定義狀態

import{ Leafer, Rect } from'leafer-ui'import'@leafer-in/state'import'@leafer-in/animate'

constleafer = newLeafer({ view: window})

constrect = newRect({ width: 100, height: 100, fill: '#32cd79', cornerRadius: 30, origin: 'center', states: { // 自定義狀態列表color: { fill: '#FEB027'}, rotate: { animation: { keyframes: [{ rotation: 45}, { rotation: 135, scale: 1.2}], duration: 1, swing: true} } },state: 'color', // 設置狀態transition: 1})

leafer.add(rect)

rect.on( 'click', => { // 點擊切換狀態rect.state = rect.state === 'color'? 'rotate': 'color'})

三、過渡

類似于 CSS 的過渡功能，但 LeaferJS 的過渡僅針對狀態變化，不會在單獨修改屬性時觸發過渡（提供更好的控制）。你可以分別設置進入和退出狀態時的過渡動畫。默認情況下，LeaferJS 自動開啟了 state、hover 、 press 、 focus 、 selected 、 disabled 狀態切換的過渡效果。

1.按鈕交互過渡效果

切換不同交互狀態時，流暢過渡樣式，讓交互體驗更絲滑。

import{ Leafer, Box } from'leafer-ui'import'@leafer-in/state'import'@leafer-in/animate'

constleafer = newLeafer({ view: window, fill: 'gray'})

constbox = newBox({ x: 100, y: 100, fill: '#32cd79', cornerRadius: 5, origin: 'center', // 從中心縮放

button: true, // 標記為按鈕，子元素 Text 將自動同步交互狀態hoverStyle: { // 鼠標hover狀態fill: '#FF4B4B', scale: 1.5, cornerRadius: 20, },pressStyle: { // 鼠標按下狀態fill: '#FEB027', scale: 1.1, transitionOut: 'bounce-out'// 退出狀態時的過渡方式},

children: [{ tag: 'Text', text: 'Button', fontSize: 16, fontWeight: 'bold', padding: [ 10, 20], fill: 'rgba(0,0,0,0.5)', hoverStyle: { fill: 'black'} // 鼠標 hover 到 button 上的狀態}]})

leafer.add(box)

2. 復雜漸變過渡

實色到漸變色的過渡，及不同漸變類型的過渡。已基本開發完成，測試和完善后將單獨發布插件，敬請關注！

import{ Leafer, Rect } from'leafer-ui'import'@leafer-in/state'import'@leafer-in/animate'import'@leafer-in/transition'

constleafer = newLeafer({ view: window})

constrect = newRect({ x: 100, y: 100, width: 100, height: 100, cornerRadius: 30, fill: {type: 'linear', stops: [ '#FEB027', '#79CB4D'] },hoverStyle: {fill: {type: 'radial', from: 'top', stops: [ '#FF4B4B', '#FEB027'] }},transition: 1})

leafer.add(rect)

四、游戲

之前做游戲時，最缺的就是一個能夠自動播放動作幀的精靈元素，用于切換游戲動作。其他功能都可以結合第三方庫來實現，如物理引擎推薦使用 Matter.js ，它易于上手、功能全面，可以模擬各種物理效果。

Robot 元素

Robot 元素類似于游戲中的精靈元素，集成了幀播放和動作預設功能，可以快速制作出具有行走和攻擊動作的游戲角色。

首先，你需要提供一張包含所有游戲動作的雪碧圖，這些動作將會被自動編號，如下所示：

通過加載和解析雪碧圖，你將得到一個可以自由切換動作的游戲元素。

import{ Leafer, KeyEvent } from'leafer-ui'import{ Robot } from'@leafer-in/robot'

constleafer = newLeafer({ view: window})

constrobot = newRobot({ robot: { url: '/image/arrows.png', size: { width: 100, height: 100}, total: 20}, actions: { // 預設游戲動作（通過動作幀）up: 0, // 靜止向上的箭頭（ 編號為0的動作幀）right: 5, down: 10, left: 15, arrowUp: [ 0, 1, 2, 3, 4], // 動態向上的箭頭（循環播放編號為 1-4 的動作幀）arrowRight: [ 5, 6, 7, 8, 9], arrowDown: [ 10, 11, 12, 13, 14], arrowLeft: [ 15, 16, 17, 18, 19] },action: 'right'// 設置動作：靜止向右的箭頭})

leafer.add(robot)

// 監聽方向鍵進行交互

letspeed = 5

leafer.on(KeyEvent.DOWN, ( e: KeyEvent) => { speed++switch(e.code) { // 動態的方向箭頭case'ArrowUp': robot.action = 'arrowUp'robot.y -= speedbreakcase'ArrowDown': robot.action = 'arrowDown'robot.y += speedbreakcase'ArrowLeft': robot.action = 'arrowLeft'robot.x -= speedbreakcase'ArrowRight': robot.action = 'arrowRight'robot.x += speedbreak}})

leafer.on(KeyEvent.UP, ( e: KeyEvent) => { speed = 5switch(e.code) { // 靜態的方向箭頭case'ArrowUp': robot.action = 'up'breakcase'ArrowDown': robot.action = 'down'breakcase'ArrowLeft': robot.action = 'left'breakcase'ArrowRight': robot.action = 'right'break}})

運行示例代碼

上面的示例代碼可以通過我們與 Cloud Studio 合作提供的 在線 Playground 環境 直接運行。

LeaferJS 正在被更多的人看見

對于心懷“游戲夢”的開發者來說， LeaferJS 絕對是一個能讓你輕松上手、實現游戲夢想的利器。

圖中是 Cloud Studio 的產品經理 Megan Zhang 在 騰訊全球數字生態大會上推薦 LeaferJS 。

還在開發圖形編輯應用的用戶也不用擔心，LeaferJS 現階段依然專注于繪圖、交互和圖形編輯場景。我們引入游戲場景，只是希望讓 LeaferJS 被更多有需要的人看到，以充分發揮它的價值。

我們將會繼續推動我們的愿景，幫助更多用戶創造出強大、實用的生產力工具。

總結

在這一期更新中， LeaferJS 為你帶來了全新的游戲、動畫、狀態和過渡功能，助你實現那些年少時的游戲夢想。我們引入了豐富的動畫效果，如搖擺動畫、關鍵幀動畫和路徑動畫（即將上線），以及實用的過渡功能和靈活的游戲元素，讓你能夠輕松制作出動感十足的游戲角色和頁面效果。

www.leaferjs.com

歡迎分享給更多的人知道，從而產生更豐富的游戲案例、教程，互相學習進步。

END