From 1a252923e3fdb3e7aacb866ef7ede04a5c2bd6a1 Mon Sep 17 00:00:00 2001 From: leaferjs Date: Thu, 9 Jan 2025 23:30:57 +0800 Subject: [PATCH] v1.3.2 --- contest/bloom/guide.md | 93 +++++++++++++++++++++++++++ contribute/index.md | 14 ++++ create/leafer.md | 4 +- guide/advanced/partRender.md | 6 +- guide/basic/leafer.md | 6 ++ guide/install/draw/miniapp/start.md | 4 +- guide/install/draw/start.md | 8 +-- guide/install/draw/worker/start.md | 4 +- guide/install/editor/miniapp/start.md | 6 +- guide/install/editor/node/napi.md | 2 +- guide/install/editor/node/start.md | 2 +- guide/install/editor/start.md | 10 +-- guide/install/editor/worker/start.md | 6 +- guide/install/game/miniapp/start.md | 6 +- guide/install/game/node/napi.md | 2 +- guide/install/game/node/start.md | 2 +- guide/install/game/start.md | 10 +-- guide/install/game/worker/start.md | 6 +- guide/install/ui/miniapp/start.md | 4 +- guide/install/ui/start.md | 8 +-- guide/install/ui/worker/start.md | 4 +- guide/runtime.md | 12 +++- plugin/in/animate/Animate.md | 19 ++++-- plugin/in/animate/index.md | 8 +-- plugin/in/arrow/index.md | 4 +- plugin/in/color/index.md | 4 +- plugin/in/editor/index.md | 16 +++-- plugin/in/export/index.md | 51 +++++++++++++++ plugin/in/find/index.md | 53 +++++++++++++++ plugin/in/flow/index.md | 8 +-- plugin/in/html/index.md | 4 +- plugin/in/motion-path/index.md | 4 +- plugin/in/resize/index.md | 4 +- plugin/in/robot/index.md | 4 +- plugin/in/scroll/index.md | 4 +- plugin/in/state/index.md | 4 +- plugin/in/text-editor/index.md | 4 +- plugin/in/view/index.md | 4 +- plugin/in/viewport/index.md | 4 +- reference/config/app/canvas.md | 18 ++++++ reference/display/Leafer.md | 2 +- reference/display/Text.md | 13 +++- reference/display/UI.md | 2 +- reference/property/animate.md | 17 +++-- reference/property/animation.md | 19 ++++-- reference/property/export.md | 4 ++ reference/property/find.md | 4 ++ reference/property/findOne.md | 4 ++ reference/property/transition.md | 8 ++- update/index.md | 88 +++++++++++++++++++++++-- 50 files changed, 484 insertions(+), 113 deletions(-) create mode 100644 contest/bloom/guide.md create mode 100644 plugin/in/export/index.md create mode 100644 plugin/in/find/index.md diff --git a/contest/bloom/guide.md b/contest/bloom/guide.md new file mode 100644 index 0000000..07c48f0 --- /dev/null +++ b/contest/bloom/guide.md @@ -0,0 +1,93 @@ + + +# LeaferJS ”心花怒放“ 小游戏开发指南 + +## 简介 + +LeaferJS 是一款好用的 Canvas 渲染引擎，提供革新的体验。可用于高效绘图 、UI 交互（小游戏、互动应用、组态）、图形编辑。 + +📗 [图文并茂、由浅入深的了解 LeaferJS](/blog/2024-07-09.md) + +## 一、准备代码运行环境 + +**Playground 环境：** https://www.leaferjs.com/ui/guide/runtime.html + +可通过 **Cloud Studio** 模版创建一个 **LeaferJS 项目**，用于运行、练习后续的示例代码。 + +## 二、学习 LeaferJS 入门教程 + +**入门教程：** https://www.leaferjs.com/ui/guide/basic/leafer.html + +跟随官网教程步骤（文档底部有下一步引导按钮）从浅到深的一步步学习。 + +建议将教程中的示例代码复制到 **LeaferJS 项目** 的 index.ts 文件中运行、调试效果。 + +## 三、如何开发一个【心花怒放】的小游戏 （参考示例） + +体验游戏： https://cloudstudio.net/a/24001340290174976?channel=share&sharetype=URL + + + + + + + + +::: code-group +<<< @/code/contest/bloom/wish.ts +::: + + + +## 四、详细了解 LeaferJS + +LeaferJS 提供了丰富的功能，可通过官网教程示例进一步学习。 + +官网教程主要分为六个主要部分： + +1. 入门教程：基础、进阶、常用插件、构成，方便快速入门。 + +2. 元素组件：应用、组、图形、路径、图像、文字、自定义元素。 + +3. 元素样式与功能： 布局、外观、交互、动画、数据、高级功能。 + +4. 事件类型：交互、元素、平台事件。 + +5. 类库： 数学、列表。 + +6. 插件： 官网、社区插件。 + +为了聚焦主要知识，每篇文档只展示了关键属性方法，可通过点击 [继承](/reference/display/Rect.md#继承) 或 [归属](/reference/property/fill.md#归属) 文档溯源。 + +## 重点关注功能 + +### 动画功能 + +可以通过文章了解 LeaferJS 能实现哪些动画、游戏效果。 + +📙 [全新动画、状态、过渡、游戏功能](/blog/2024-09-20.md) + +功能入口： https://www.leaferjs.com/ui/guide/plugin/animate.html diff --git a/contribute/index.md b/contribute/index.md index 121d27b..948ed6a 100644 --- a/contribute/index.md +++ b/contribute/index.md @@ -24,6 +24,8 @@ ## 教程 +[不一样的动态时钟 React+Leafer 实现火车动态时钟](https://juejin.cn/post/7454109404122562597) @火树银花 + [我将 fabricjs 换为了 leaferjs](https://juejin.cn/post/7440830008123310132) @前端雾恋 [leaferjs 元素的基本使用](https://juejin.cn/post/7440830008123310132) @前端雾恋 @@ -48,6 +50,12 @@ ## Demo +[音乐律动的背光键盘](https://canvas.xjq.icu/marching-music) [@xjq7](https://github.com/xjq7) + +[模拟丰富多样的雪花效果](https://canvas.xjq.icu/snowflake) [@xjq7](https://github.com/xjq7) + +[TO NORTH 在线标注工具](https://tonorth.netlify.app/) @tonorth.netlify.app + [点阵背景效果](https://github.com/tuntun0609/leafer-x-dot-matrix) [@tuntun](https://github.com/tuntun0609) [Leafer + vue3 实现的画板](https://github.com/WHSnhcZDYRZC/drawingBoard) [@WHSnhcZDYRZC](https://github.com/WHSnhcZDYRZC) @@ -80,6 +88,12 @@ ## 产品 +[fig2leafer](https://fig2leafer.netlify.app) leafer 渲染 figma 文件 [@jianghanyue](https://github.com/jianghanyue) + +[趣设计](https://www.leaferjs.com/ui/guide/install/ui/miniapp/start.html#%E9%87%87%E7%94%A8%E5%B0%8F%E7%A8%8B%E5%BA%8F-web-view-%E7%BB%84%E4%BB%B6%E5%AE%9E%E7%8E%B0%E7%9A%84%E6%A1%88%E4%BE%8B) PS 海报头像拼图 LOGO @BO + +[创意表情](https://www.leaferjs.com/ui/guide/install/ui/miniapp/start.html#%E9%87%87%E7%94%A8-uniapp-%E5%AE%9E%E7%8E%B0%E7%9A%84%E5%8E%9F%E7%94%9F%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%A1%88%E4%BE%8B) DIY 有趣的微信表情 @goosen + [Lazyva 懒画](https://canvas.lazykit.cn) 在线设计工具（支持移动端） @ozar [简单设计](https://jiandan.link) 免费在线设计、图片处理工具 @Ove🚀 diff --git a/create/leafer.md b/create/leafer.md index 402e096..b64ad79 100644 --- a/create/leafer.md +++ b/create/leafer.md @@ -63,8 +63,8 @@ npm create leafer@latest update Fetching Leafer version... ✔ The following Leafer dependencies can be updated: { - "leafer-editor": "^1.2.2", - "@leafer-in/animate": "^1.2.2" + "leafer-editor": "^1.3.2", + "@leafer-in/animate": "^1.3.2" } Do you want to update them? … yes ✔ Dependencies updated successfully! Please run npm install to install the latest versions. diff --git a/guide/advanced/partRender.md b/guide/advanced/partRender.md index 231d6fc..185dfa9 100644 --- a/guide/advanced/partRender.md +++ b/guide/advanced/partRender.md @@ -20,12 +20,10 @@ <<< @/code/app/config/partRender.ts [Leafer] ::: -## 恭喜 🎉 - -你已完成进阶知识的学习，接下来将带你了解几个重要的 **生命周期**，就算完成入门的学习了。 - ## 下一步 +接下来将带你了解几个重要的 **生命周期**，就算完成入门的学习了。 + ### [生命周期](/guide/life/ui.md)
diff --git a/guide/basic/leafer.md b/guide/basic/leafer.md index fb36fd0..4135ffe 100644 --- a/guide/basic/leafer.md +++ b/guide/basic/leafer.md @@ -20,6 +20,12 @@ view 参数支持 window 、div、canvas 标签对象，注意 view 为 id 字 <<< @/code/basic/app/auto.ts +## 创建自动生长的 Leafer + +画布大小会生长，自动贴合实际内容。 + +<<< @/code/basic/app/grow.ts + ## 配置 Leafer ### [基础](/reference/config/app/base.md)     [视口类型](/reference/config/app/type.md)     [画布](/reference/config/app/canvas.md)     [点按](/reference/config/app/pointer.md)    [触屏](/reference/config/app/touch.md)     [滚轮](/reference/config/app/wheel.md) diff --git a/guide/install/draw/miniapp/start.md b/guide/install/draw/miniapp/start.md index f4f4428..1ec944a 100644 --- a/guide/install/draw/miniapp/start.md +++ b/guide/install/draw/miniapp/start.md @@ -32,9 +32,9 @@ bun add @leafer-draw/miniapp ```sh -https://unpkg.com/@leafer-draw/miniapp@1.2.2/dist/miniapp.module.js +https://unpkg.com/@leafer-draw/miniapp@1.3.2/dist/miniapp.module.js -https://unpkg.com/@leafer-draw/miniapp@1.2.2/dist/miniapp.module.min.js +https://unpkg.com/@leafer-draw/miniapp@1.3.2/dist/miniapp.module.min.js ``` diff --git a/guide/install/draw/start.md b/guide/install/draw/start.md index d619e1d..b3b82b5 100644 --- a/guide/install/draw/start.md +++ b/guide/install/draw/start.md @@ -32,7 +32,7 @@ bun add leafer-draw ::: code-group ```html [web.min] - + + ``` ```html [module] ``` diff --git a/guide/install/draw/worker/start.md b/guide/install/draw/worker/start.md index 9aa080e..2092e4c 100644 --- a/guide/install/draw/worker/start.md +++ b/guide/install/draw/worker/start.md @@ -33,11 +33,11 @@ bun add @leafer-draw/worker ::: code-group ```js [worker.min.js] -importScripts('https://unpkg.com/@leafer-draw/worker@1.2.2/dist/worker.min.js') +importScripts('https://unpkg.com/@leafer-draw/worker@1.3.2/dist/worker.min.js') ``` ```js [worker.js] -importScripts('https://unpkg.com/@leafer-draw/worker@1.2.2/dist/worker.js') +importScripts('https://unpkg.com/@leafer-draw/worker@1.3.2/dist/worker.js') ``` ::: diff --git a/guide/install/editor/miniapp/start.md b/guide/install/editor/miniapp/start.md index 6b2fa27..b9ed9f2 100644 --- a/guide/install/editor/miniapp/start.md +++ b/guide/install/editor/miniapp/start.md @@ -2,7 +2,7 @@ 在小程序环境中运行，[了解小程序使用 npm 包的注意事项](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)。 -基于 [@leafer-ui/miniapp](/guide/install/ui/miniapp/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/view/)、[箭头](/plugin/in/arrow/) 插件，适用于在线图形编辑的场景。 +基于 [@leafer-ui/miniapp](/guide/install/ui/miniapp/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/scroll/)、[箭头](/plugin/in/arrow/)、[查找元素](/plugin/in/find/index.md)、[导出元素](/plugin/in/export/index.md) 插件，适用于在线图形编辑的场景。 ## 安装 @@ -32,9 +32,9 @@ bun add @leafer-editor/miniapp ```sh -https://unpkg.com/@leafer-editor/miniapp@1.2.2/dist/miniapp.module.js +https://unpkg.com/@leafer-editor/miniapp@1.3.2/dist/miniapp.module.js -https://unpkg.com/@leafer-editor/miniapp@1.2.2/dist/miniapp.module.min.js +https://unpkg.com/@leafer-editor/miniapp@1.3.2/dist/miniapp.module.min.js ``` diff --git a/guide/install/editor/node/napi.md b/guide/install/editor/node/napi.md index a737142..0d724f0 100644 --- a/guide/install/editor/node/napi.md +++ b/guide/install/editor/node/napi.md @@ -2,7 +2,7 @@ 在服务端 node 环境中运行，可用于后台绘图、生成图片、自动化测试，能够 [模拟用户交互](/reference/event/simulation.md)。 -基于 [@leafer-ui/node](/guide/install/ui/node/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/view/)、[箭头](/plugin/in/arrow/) 插件，适用于在线图形编辑的场景。 +基于 [@leafer-ui/node](/guide/install/ui/node/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/scroll/)、[箭头](/plugin/in/arrow/)、[查找元素](/plugin/in/find/index.md)、[导出元素](/plugin/in/export/index.md) 插件，适用于在线图形编辑的场景。 ## 安装 diff --git a/guide/install/editor/node/start.md b/guide/install/editor/node/start.md index 1fb2d59..a3cc6ce 100644 --- a/guide/install/editor/node/start.md +++ b/guide/install/editor/node/start.md @@ -2,7 +2,7 @@ 在服务端 node 环境中运行，可用于后台绘图、生成图片、自动化测试，能够 [模拟用户交互](/reference/event/simulation.md)。 -基于 [@leafer-ui/node](/guide/install/ui/node/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/view/)、[箭头](/plugin/in/arrow/) 插件，适用于在线图形编辑的场景。 +基于 [@leafer-ui/node](/guide/install/ui/node/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/scroll/)、[箭头](/plugin/in/arrow/)、[查找元素](/plugin/in/find/index.md)、[导出元素](/plugin/in/export/index.md) 插件，适用于在线图形编辑的场景。 ## 安装 diff --git a/guide/install/editor/start.md b/guide/install/editor/start.md index 3cce9d2..9d4074b 100644 --- a/guide/install/editor/start.md +++ b/guide/install/editor/start.md @@ -6,7 +6,7 @@ import Case from '/component/Case.vue' 在 Web 环境中运行。 -基于 [leafer-ui](/guide/install/ui/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[文本编辑](/plugin/in/text-editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/view/)、[箭头](/plugin/in/arrow/)、[HTML](/plugin/in/html/) 插件，适用于在线图形编辑的场景。 +基于 [leafer-ui](/guide/install/ui/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[文本编辑](/plugin/in/text-editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/scroll/)、[箭头](/plugin/in/arrow/)、[HTML](/plugin/in/html/)、[查找元素](/plugin/in/find/index.md)、[导出元素](/plugin/in/export/index.md) 插件，适用于在线图形编辑的场景。 ## 安装 @@ -37,7 +37,7 @@ bun add leafer-editor ::: code-group ```html [web.min] - + + ``` @@ -69,7 +69,7 @@ bun add leafer-editor Leafer, Editor, Arrow, - } from 'https://unpkg.com/leafer-editor@1.2.2/dist/web.module.js' + } from 'https://unpkg.com/leafer-editor@1.3.2/dist/web.module.js' // ... ``` diff --git a/guide/install/editor/worker/start.md b/guide/install/editor/worker/start.md index 07d420c..da4a461 100644 --- a/guide/install/editor/worker/start.md +++ b/guide/install/editor/worker/start.md @@ -2,7 +2,7 @@ 在 WebWorker 环境中运行。 -基于 [@leafer-ui/worker](/guide/install/ui/worker/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[文本编辑](/plugin/in/text-editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/view/)、[箭头](/plugin/in/arrow/)、[HTML](/plugin/in/html/) 插件，适用于在线图形编辑的场景。 +基于 [@leafer-ui/worker](/guide/install/ui/worker/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[文本编辑](/plugin/in/text-editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/scroll/)、[箭头](/plugin/in/arrow/)、[HTML](/plugin/in/html/)、[查找元素](/plugin/in/find/index.md)、[导出元素](/plugin/in/export/index.md) 插件，适用于在线图形编辑的场景。 ## 安装 @@ -34,12 +34,12 @@ bun add @leafer-editor/worker ```js [worker.min.js] importScripts( - 'https://unpkg.com/@leafer-editor/worker@1.2.2/dist/worker.min.js' + 'https://unpkg.com/@leafer-editor/worker@1.3.2/dist/worker.min.js' ) ``` ```js [worker.js] -importScripts('https://unpkg.com/@leafer-editor/worker@1.2.2/dist/worker.js') +importScripts('https://unpkg.com/@leafer-editor/worker@1.3.2/dist/worker.js') ``` ::: diff --git a/guide/install/game/miniapp/start.md b/guide/install/game/miniapp/start.md index 454a8b6..2103fd7 100644 --- a/guide/install/game/miniapp/start.md +++ b/guide/install/game/miniapp/start.md @@ -2,7 +2,7 @@ 在小程序环境中运行，[了解小程序使用 npm 包的注意事项](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)。 -基于 [@leafer-ui/miniapp](/guide/install/ui/miniapp/start.md)，集成了 [Robot](/plugin/in/robot/) 、[交互状态](/plugin/in/state/) 、 [动画](/plugin/in/animate/)、[运动路径](/plugin/in/motion-path/) 插件，适用于小游戏场景。 +基于 [@leafer-ui/miniapp](/guide/install/ui/miniapp/start.md)，集成了 [Robot](/plugin/in/robot/) 、[交互状态](/plugin/in/state/) 、 [动画](/plugin/in/animate/)、[运动路径](/plugin/in/motion-path/)、[查找元素](/plugin/in/find/index.md) 插件，适用于小游戏场景。 ## 安装 @@ -32,9 +32,9 @@ bun add @leafer-game/miniapp ```sh -https://unpkg.com/@leafer-game/miniapp@1.2.2/dist/miniapp.module.js +https://unpkg.com/@leafer-game/miniapp@1.3.2/dist/miniapp.module.js -https://unpkg.com/@leafer-game/miniapp@1.2.2/dist/miniapp.module.min.js +https://unpkg.com/@leafer-game/miniapp@1.3.2/dist/miniapp.module.min.js ``` diff --git a/guide/install/game/node/napi.md b/guide/install/game/node/napi.md index caa646b..0107f7c 100644 --- a/guide/install/game/node/napi.md +++ b/guide/install/game/node/napi.md @@ -2,7 +2,7 @@ 在服务端 node 环境中运行，可用于后台绘图、生成图片、自动化测试，能够 [模拟用户交互](/reference/event/simulation.md)。 -基于 [@leafer-ui/node](/guide/install/ui/node/start.md)，集成了 [Robot](/plugin/in/robot/) 、[交互状态](/plugin/in/state/) 、 [动画](/plugin/in/animate/)、[运动路径](/plugin/in/motion-path/) 插件，适用于小游戏场景。 +基于 [@leafer-ui/node](/guide/install/ui/node/start.md)，集成了 [Robot](/plugin/in/robot/) 、[交互状态](/plugin/in/state/) 、 [动画](/plugin/in/animate/)、[运动路径](/plugin/in/motion-path/)、[查找元素](/plugin/in/find/index.md)、[导出元素](/plugin/in/export/index.md) 插件，适用于小游戏场景。 ## 安装 diff --git a/guide/install/game/node/start.md b/guide/install/game/node/start.md index c07ee88..507f212 100644 --- a/guide/install/game/node/start.md +++ b/guide/install/game/node/start.md @@ -2,7 +2,7 @@ 在服务端 node 环境中运行，可用于后台绘图、生成图片、自动化测试，能够 [模拟用户交互](/reference/event/simulation.md)。 -基于 [@leafer-ui/node](/guide/install/ui/node/start.md)，集成了 [Robot](/plugin/in/robot/) 、[交互状态](/plugin/in/state/) 、 [动画](/plugin/in/animate/)、[运动路径](/plugin/in/motion-path/) 插件，适用于小游戏场景。 +基于 [@leafer-ui/node](/guide/install/ui/node/start.md)，集成了 [Robot](/plugin/in/robot/) 、[交互状态](/plugin/in/state/) 、 [动画](/plugin/in/animate/)、[运动路径](/plugin/in/motion-path/)、[查找元素](/plugin/in/find/index.md)、[导出元素](/plugin/in/export/index.md) 插件，适用于小游戏场景。 ## 安装 diff --git a/guide/install/game/start.md b/guide/install/game/start.md index a0801ea..1864717 100644 --- a/guide/install/game/start.md +++ b/guide/install/game/start.md @@ -6,7 +6,7 @@ import Case from '/component/Case.vue' 在 Web 环境中运行。 -基于 [leafer-ui](/guide/install/ui/start.md)，集成了 [Robot](/plugin/in/robot/) 、[交互状态](/plugin/in/state/) 、 [动画](/plugin/in/animate/)、[运动路径](/plugin/in/motion-path/) 插件，适用于小游戏场景。 +基于 [leafer-ui](/guide/install/ui/start.md)，集成了 [Robot](/plugin/in/robot/) 、[交互状态](/plugin/in/state/) 、 [动画](/plugin/in/animate/)、[运动路径](/plugin/in/motion-path/)、[查找元素](/plugin/in/find/index.md) 插件，适用于小游戏场景。 ## 安装 @@ -37,7 +37,7 @@ bun add leafer-game ::: code-group ```html [web.min] - + + ``` @@ -69,7 +69,7 @@ bun add leafer-game Leafer, Editor, Arrow, - } from 'https://unpkg.com/leafer-game@1.2.2/dist/web.module.js' + } from 'https://unpkg.com/leafer-game@1.3.2/dist/web.module.js' // ... ``` diff --git a/guide/install/game/worker/start.md b/guide/install/game/worker/start.md index 0439ecf..39818e3 100644 --- a/guide/install/game/worker/start.md +++ b/guide/install/game/worker/start.md @@ -2,7 +2,7 @@ 在 WebWorker 环境中运行。 -基于 [@leafer-ui/worker](/guide/install/ui/worker/start.md)，集成了 [Robot](/plugin/in/robot/) 、[交互状态](/plugin/in/state/) 、 [动画](/plugin/in/animate/)、[运动路径](/plugin/in/motion-path/) 插件，适用于小游戏场景。 +基于 [@leafer-ui/worker](/guide/install/ui/worker/start.md)，集成了 [Robot](/plugin/in/robot/) 、[交互状态](/plugin/in/state/) 、 [动画](/plugin/in/animate/)、[运动路径](/plugin/in/motion-path/)、[查找元素](/plugin/in/find/index.md) 插件，适用于小游戏场景。 ## 安装 @@ -33,11 +33,11 @@ bun add @leafer-game/worker ::: code-group ```js [worker.min.js] -importScripts('https://unpkg.com/@leafer-game/worker@1.2.2/dist/worker.min.js') +importScripts('https://unpkg.com/@leafer-game/worker@1.3.2/dist/worker.min.js') ``` ```js [worker.js] -importScripts('https://unpkg.com/@leafer-game/worker@1.2.2/dist/worker.js') +importScripts('https://unpkg.com/@leafer-game/worker@1.3.2/dist/worker.js') ``` ::: diff --git a/guide/install/ui/miniapp/start.md b/guide/install/ui/miniapp/start.md index 7cef023..2fc829b 100644 --- a/guide/install/ui/miniapp/start.md +++ b/guide/install/ui/miniapp/start.md @@ -46,9 +46,9 @@ var __TEMP2__ =__TEMP__; Object.defineProperty(exports, k, { enumerable: true, c ```sh -https://unpkg.com/@leafer-ui/miniapp@1.2.2/dist/miniapp.module.js +https://unpkg.com/@leafer-ui/miniapp@1.3.2/dist/miniapp.module.js -https://unpkg.com/@leafer-ui/miniapp@1.2.2/dist/miniapp.module.min.js +https://unpkg.com/@leafer-ui/miniapp@1.3.2/dist/miniapp.module.min.js ``` ## 环境 diff --git a/guide/install/ui/start.md b/guide/install/ui/start.md index 4ec2b41..915612d 100644 --- a/guide/install/ui/start.md +++ b/guide/install/ui/start.md @@ -45,7 +45,7 @@ bun add leafer-ui ::: code-group ```html [web.min] - + + ``` ```html [module] ``` diff --git a/guide/install/ui/worker/start.md b/guide/install/ui/worker/start.md index 752d24d..64a8ed9 100644 --- a/guide/install/ui/worker/start.md +++ b/guide/install/ui/worker/start.md @@ -33,11 +33,11 @@ bun add @leafer-ui/worker ::: code-group ```js [worker.min.js] -importScripts('https://unpkg.com/@leafer-ui/worker@1.2.2/dist/worker.min.js') +importScripts('https://unpkg.com/@leafer-ui/worker@1.3.2/dist/worker.min.js') ``` ```js [worker.js] -importScripts('https://unpkg.com/@leafer-ui/worker@1.2.2/dist/worker.js') +importScripts('https://unpkg.com/@leafer-ui/worker@1.3.2/dist/worker.js') ``` ::: diff --git a/guide/runtime.md b/guide/runtime.md index c3441ee..b464f6a 100644 --- a/guide/runtime.md +++ b/guide/runtime.md @@ -1,12 +1,20 @@ # Playground 环境 -我们目前提供了两种 Playground 环境可供你选择。 +我们目前提供了三种 Playground 环境可供你选择。 另外还有 [create-leafer 命令行工具](/create/leafer.md)，可快速创建 Vue + Leafer 项目，管理、升级、开发插件。 +## 在线环境 + +可在线运行官网示例代码的 Playground 环境，即用即走。 + +第一步：前往 https://www.leaferjs.com/playground/ + +第二步：复制官网示例代码到编辑器中，可以实时查看运行效果。 + ## Cloud Studio -可在线运行官网示例代码的 Playground 环境。 +创建专属你自己的在线 playground 环境，可在线运行官网示例代码，能够保存分享。 ::: tip 通过 Cloud Studio 还可分享你的代码片段、demo 案例、小游戏，可直接拉取你的 GitHub 代码运行。 diff --git a/plugin/in/animate/Animate.md b/plugin/in/animate/Animate.md index c578551..405abe1 100644 --- a/plugin/in/animate/Animate.md +++ b/plugin/in/animate/Animate.md @@ -10,9 +10,9 @@ import Case from '/component/Case.vue' ## 关键属性 （只读） -### target: [`UI`](/reference/display/UI.md) +### target: [`UI`](/reference/display/UI.md) ｜ `Object` -动画目标元素。 +动画目标元素，支持普通对象。 ### keyframes: [`IKeyframe`](/api/modules.md#ikeyframe)[] @@ -28,6 +28,9 @@ interface IAnimateKeyframe { delay?: number // 单独设置关键帧延迟播放时长。 duration?: number // 单独设置关键帧的固定时长，设置后将忽略 autoDuration + swing?: number // 摇摆次数（到达 to 的次数），from -> to，to -> from -> to ... ，默认 0 + loop?: number // 循环次数，默认为 0 + // 分配剩余时间：（总时长 - 总关键帧固定时长）/ 总权重 * 当前权重 autoDelay?: number // 自动 delay 的权重， 默认为 0 autoDuration?: number // 自动 duration 的权重， 默认为 1 @@ -124,17 +127,17 @@ from 表示起点样式，to 表示终点样式。 type IAnimateEnding = 'auto' | 'from' | 'to' ``` -### reverse?: boolean +### reverse?: `boolean` 是否反向动画 to -> from，默认为 false -### swing?: boolean +### swing?: `boolean` | `number` -是否摇摆循环播放 from -> to，to -> from ... ，默认 false +是否摇摆循环播放，可设置次数（到达 to 的次数）， from -> to，to -> from -> to ... ，默认 false ### loop: `boolean` | `number` -是否循环播放，可设置循环次数，默认为 false。 +是否循环播放，可设置次数，默认为 false。 ### loopDelay: `number` @@ -232,6 +235,10 @@ const animateOptions = { ## 计算属性（只读） +### style: [`IUIInputData`](/api/interfaces/IUIInputData.md) + +当前动画状态的样式。 + ### fromStyle: [`IUIInputData`](/api/interfaces/IUIInputData.md) from 帧状态的样式。 diff --git a/plugin/in/animate/index.md b/plugin/in/animate/index.md index c4e04b7..5311f23 100644 --- a/plugin/in/animate/index.md +++ b/plugin/in/animate/index.md @@ -46,16 +46,16 @@ bun add @leafer-in/color ::: code-group ```html [animate.min] - - + + ``` ```html [animate] - - + + diff --git a/plugin/in/arrow/index.md b/plugin/in/arrow/index.md index 53d21bd..dda1801 100644 --- a/plugin/in/arrow/index.md +++ b/plugin/in/arrow/index.md @@ -42,14 +42,14 @@ bun add @leafer-in/arrow ::: code-group ```html [arrow.min] - + ``` ```html [arrow] - + diff --git a/plugin/in/color/index.md b/plugin/in/color/index.md index 44d372e..b4add90 100644 --- a/plugin/in/color/index.md +++ b/plugin/in/color/index.md @@ -36,11 +36,11 @@ bun add @leafer-in/color ::: code-group ```html [color.min] - + ``` ```html [color] - + ``` https://unpkg.com 无法访问时，可替换为 https://cdn.jsdelivr.net/npm diff --git a/plugin/in/editor/index.md b/plugin/in/editor/index.md index ef0b552..f6cc2c7 100644 --- a/plugin/in/editor/index.md +++ b/plugin/in/editor/index.md @@ -24,21 +24,25 @@ web 版、小程序版。暂时与有 [自动布局](/plugin/in/flow/) 的元素 ```sh[npm] npm install @leafer-in/editor +npm install @leafer-in/find npm install @leafer-in/resize ``` ```sh[pnpm] pnpm add @leafer-in/editor +pnpm add @leafer-in/find pnpm add @leafer-in/resize ``` ```sh[yarn] yarn add @leafer-in/editor +yarn add @leafer-in/find yarn add @leafer-in/resize ``` ```sh[bun] bun add @leafer-in/editor +bun add @leafer-in/find bun add @leafer-in/resize ``` @@ -50,16 +54,18 @@ bun add @leafer-in/resize ::: code-group ```html [editor.min] - - + + + ``` ```html [editor] - - + + + @@ -70,6 +76,8 @@ https://unpkg.com 无法访问时，可替换为 https://cdn.jsdelivr.net/npm ## 依赖插件 +### [查找元素 插件](/plugin/in/find/index.md) + ### [resize 插件](/plugin/in/resize/) ## 开始体验 diff --git a/plugin/in/export/index.md b/plugin/in/export/index.md new file mode 100644 index 0000000..1a1dee9 --- /dev/null +++ b/plugin/in/export/index.md @@ -0,0 +1,51 @@ +# 导出元素插件 + +导出元素插件。 + +## 适用平台 + +支持所有平台。 + +## 安装插件 + +需要安装 export 插件才能使用，[点此访问 Github 仓库](https://github.com/leaferjs/leafer-in/tree/main/packages/export)。 + +::: code-group + +```sh[npm] +npm install @leafer-in/export +``` + +```sh[pnpm] +pnpm add @leafer-in/export +``` + +```sh[yarn] +yarn add @leafer-in/export +``` + +```sh[bun] +bun add @leafer-in/export +``` + +::: + +### 通过 script 标签引入 + +通过全局变量 LeaferIN.export 访问插件内部功能。 +::: code-group + +```html [export.min] + +``` + +```html [export] + +``` + +https://unpkg.com 无法访问时，可替换为 https://cdn.jsdelivr.net/npm +::: + +## 下一步 + +### [export ()](/reference/property/export.md) diff --git a/plugin/in/find/index.md b/plugin/in/find/index.md new file mode 100644 index 0000000..5291be3 --- /dev/null +++ b/plugin/in/find/index.md @@ -0,0 +1,53 @@ +# 查找元素插件 + +查找元素插件。 + +## 适用平台 + +支持所有平台。 + +## 安装插件 + +需要安装 find 插件才能使用，[点此访问 Github 仓库](https://github.com/leaferjs/leafer-in/tree/main/packages/find)。 + +::: code-group + +```sh[npm] +npm install @leafer-in/find +``` + +```sh[pnpm] +pnpm add @leafer-in/find +``` + +```sh[yarn] +yarn add @leafer-in/find +``` + +```sh[bun] +bun add @leafer-in/find +``` + +::: + +### 通过 script 标签引入 + +通过全局变量 LeaferIN.find 访问插件内部功能。 +::: code-group + +```html [find.min] + +``` + +```html [find] + +``` + +https://unpkg.com 无法访问时，可替换为 https://cdn.jsdelivr.net/npm +::: + +## 下一步 + +### [find ()](/reference/property/find.md) + +### [findOne ()](/reference/property/findOne.md) diff --git a/plugin/in/flow/index.md b/plugin/in/flow/index.md index 8dd07a9..1f9231c 100644 --- a/plugin/in/flow/index.md +++ b/plugin/in/flow/index.md @@ -46,16 +46,16 @@ bun add @leafer-in/resize ::: code-group ```html [flow.min] - - + + ``` ```html [flow] - - + + diff --git a/plugin/in/html/index.md b/plugin/in/html/index.md index 5a2e2e1..55f0f3e 100644 --- a/plugin/in/html/index.md +++ b/plugin/in/html/index.md @@ -42,14 +42,14 @@ bun add @leafer-in/html ::: code-group ```html [html.min] - + ``` ```html [html] - + diff --git a/plugin/in/motion-path/index.md b/plugin/in/motion-path/index.md index 61517dc..cc27510 100644 --- a/plugin/in/motion-path/index.md +++ b/plugin/in/motion-path/index.md @@ -42,11 +42,11 @@ bun add @leafer-in/motion-path ::: code-group ```html [motion-path.min] - + ``` ```html [motion-path] - + ``` https://unpkg.com 无法访问时，可替换为 https://cdn.jsdelivr.net/npm diff --git a/plugin/in/resize/index.md b/plugin/in/resize/index.md index 0521f83..5e64829 100644 --- a/plugin/in/resize/index.md +++ b/plugin/in/resize/index.md @@ -36,11 +36,11 @@ bun add @leafer-in/resize ::: code-group ```html [resize.min] - + ``` ```html [resize] - + ``` https://unpkg.com 无法访问时，可替换为 https://cdn.jsdelivr.net/npm diff --git a/plugin/in/robot/index.md b/plugin/in/robot/index.md index 76daab6..d43d94b 100644 --- a/plugin/in/robot/index.md +++ b/plugin/in/robot/index.md @@ -44,14 +44,14 @@ bun add @leafer-in/robot ::: code-group ```html [robot.min] - + ``` ```html [robot] - + diff --git a/plugin/in/scroll/index.md b/plugin/in/scroll/index.md index 2b9f689..24bcbd7 100644 --- a/plugin/in/scroll/index.md +++ b/plugin/in/scroll/index.md @@ -36,14 +36,14 @@ bun add @leafer-in/scroll ::: code-group ```html [scroll.min] - + ``` ```html [scroll] - + diff --git a/plugin/in/state/index.md b/plugin/in/state/index.md index be85015..ede33e8 100644 --- a/plugin/in/state/index.md +++ b/plugin/in/state/index.md @@ -40,11 +40,11 @@ bun add @leafer-in/state ::: code-group ```html [state.min] - + ``` ```html [state] - + ``` https://unpkg.com 无法访问时，可替换为 https://cdn.jsdelivr.net/npm diff --git a/plugin/in/text-editor/index.md b/plugin/in/text-editor/index.md index b22aa2a..c85302a 100644 --- a/plugin/in/text-editor/index.md +++ b/plugin/in/text-editor/index.md @@ -48,14 +48,14 @@ bun add @leafer-in/text-editor ::: code-group ```html [text-editor.min] - + ``` ```html [text-editor] - + diff --git a/plugin/in/view/index.md b/plugin/in/view/index.md index 5a45525..dd6c6b0 100644 --- a/plugin/in/view/index.md +++ b/plugin/in/view/index.md @@ -36,11 +36,11 @@ bun add @leafer-in/view ::: code-group ```html [view.min] - + ``` ```html [view] - + ``` https://unpkg.com 无法访问时，可替换为 https://cdn.jsdelivr.net/npm diff --git a/plugin/in/viewport/index.md b/plugin/in/viewport/index.md index 5a36588..4fd6bff 100644 --- a/plugin/in/viewport/index.md +++ b/plugin/in/viewport/index.md @@ -36,11 +36,11 @@ bun add @leafer-in/viewport ::: code-group ```html [viewport.min] - + ``` ```html [viewport] - + ``` https://unpkg.com 无法访问时，可替换为 https://cdn.jsdelivr.net/npm diff --git a/reference/config/app/canvas.md b/reference/config/app/canvas.md index 6971531..548c127 100644 --- a/reference/config/app/canvas.md +++ b/reference/config/app/canvas.md @@ -73,6 +73,24 @@ interface ICanvasRenderingContext2DSettings { 距离底部的距离, 默认为 0。 +## 自动生长 + +### grow: `boolean` | `'box'` | `'render'` + +画布是否自动生长， 贴合实际内容，默认为 false。 + +设为 true 或 'render' 表示依据内容的 render 包围盒，重置画布大小。 + +设为 'box' 表示依据内容的 box 包围盒，重置画布大小。 + +### growWidth: `boolean` + +进一步指定宽度是否生长，默认同 grow。 + +### growHeight: `boolean` + +进一步指定高度是否生长， 默认同 grow。 + ## 示例 ### 关闭交互事件 diff --git a/reference/display/Leafer.md b/reference/display/Leafer.md index 66e9112..6bbfeaf 100644 --- a/reference/display/Leafer.md +++ b/reference/display/Leafer.md @@ -14,7 +14,7 @@ Leafer  >  [Group](./Group.md)  >  [UI](./UI.md) ## 版本号 -当前的版本号，默认为 `1.2.2`。 +当前的版本号，默认为 `1.3.2`。 ```ts import { version } from 'leafer-ui' diff --git a/reference/display/Text.md b/reference/display/Text.md index 3f0b772..80677e9 100644 --- a/reference/display/Text.md +++ b/reference/display/Text.md @@ -150,14 +150,15 @@ text.textOverflow = '...' ### textAlign: `ITextAlign` -文本对齐方式。 +文本对齐方式，可以设置 'both' 来强制两端对齐文本。 ```ts type ITextAlign = | 'left' // 左对齐 | 'center' // 居中对齐 | 'right' // 右对齐 - | 'justify' // 两端对齐 + | 'justify' // 两端对齐段落 + | 'both' // 强制两端对齐文本，补充 justify 的不足 ``` ### verticalAlign: `IVerticalAlign` @@ -222,3 +223,11 @@ padding: 20 // all text 属性传入数字，可支持 count [动画](/guide/plugin/animate.md)，示例中的文本将从 0 到 100 动态变化。 <<< @/code/property/animation/count.ts + +### 打字机动画 + +<<< @/code/property/animation/writer.ts + +### 删除文字动画 + +<<< @/code/property/animation/delete.ts diff --git a/reference/display/UI.md b/reference/display/UI.md index 17db7da..35d7ffc 100644 --- a/reference/display/UI.md +++ b/reference/display/UI.md @@ -209,7 +209,7 @@ ## 📐 布局 -### 定位 / 布局 +### 位置 / 缩放 / 旋转 [position](/reference/property/position)     [size](/reference/property/size)     [scale](/reference/property/scale)     [flip()](/reference/property/flip)     [rotation](/reference/property/rotation)     [skew](/reference/property/skew) diff --git a/reference/property/animate.md b/reference/property/animate.md index 76ab5fd..e6b8367 100644 --- a/reference/property/animate.md +++ b/reference/property/animate.md @@ -18,7 +18,7 @@ import Case from '/component/Case.vue' ### animate ( keyframe?: [`IUIInputData`](/api/interfaces/IUIInputData.md) | [`IKeyframe`](/api/modules.md#ikeyframe)[] | [`IAnimation`](/reference/property/animation.md), options?: [`ITranstion`](/api/modules.md#itransition) ) : [`Animate`](/plugin/in/animate/Animate.md) -执行动画方法，并返回 [动画实例](/plugin/in/animate/Animate.md)。详细了解 [动画选项](/plugin/in/animate/Animate.md#动画选项-只读) 。 +执行动画方法，并返回 [动画实例](/plugin/in/animate/Animate.md)。 ```ts // 关键帧 @@ -31,6 +31,9 @@ interface IAnimateKeyframe { delay?: number // 单独设置关键帧延迟播放时长。 duration?: number // 单独设置关键帧的固定时长，设置后将忽略 autoDuration + swing?: number // 摇摆次数（到达 to 的次数），from -> to，to -> from -> to ... ，默认 0 + loop?: number // 循环次数，默认为 0 + // 分配剩余时间：（总时长 - 总关键帧固定时长）/ 总权重 * 当前权重 autoDelay?: number // 自动 delay 的权重， 默认为 0 autoDuration?: number // 自动 duration 的权重， 默认为 1 @@ -38,17 +41,23 @@ interface IAnimateKeyframe { // 过渡选项， object 表示动画选项对象， number 表示duration， string 表示 easing type ITransition = IAnimateOptions | IAnimateEasingName | number +``` + +深入了解 [动画选项属性](/plugin/in/animate/Animate.md#动画选项-只读)。 +```ts // 动画选项 interface IAnimateOptions { easing?: IAnimateEasing // 缓动方式，默认为 ease - direction?: IAnimateDirection // 动画方向，可设置反向、摇摆循环，默认正向 delay?: number // 延迟时间，以秒为单位， 默认为 0 duration?: number // 动画时长，以秒为单位，默认为 0.2 - ending?: IAnimateEnding // 动画结束时的状态，可设置from、to，默认normal + ending?: IAnimateEnding // 动画结束时的状态，可设置from、to，默认auto + + reverse?: boolean // 是否反向动画 to -> from，默认为 false + swing?: boolean | number // 是否摇摆循环播放，可设置次数（到达 to 的次数） from -> to，to -> from -> to ... ，默认 false - loop?: boolean | number // 是否循环播放，可设置循环次数，默认为 false + loop?: boolean | number // 是否循环播放，可设置次数，默认为 false loopDelay?: number // 进入下一次循环播放的延迟时间，默认为0 speed?: number // 动画播放的倍速，值越大播放越快，默认为 1 倍速 diff --git a/reference/property/animation.md b/reference/property/animation.md index fccd01d..92cd714 100644 --- a/reference/property/animation.md +++ b/reference/property/animation.md @@ -16,9 +16,9 @@ import Case from '/component/Case.vue' ## 关键属性 -### animation： [`IAnimation`](/api/modules.md#ianimation) +### animation： [`IAnimation`](/api/modules.md#ianimation) | [`IAnimation`](/api/modules.md#ianimation)[] -动画 / 入场动画，详细了解 [动画选项](/plugin/in/animate/Animate.md#动画选项-只读) 。 +动画 / 入场动画，支持多个动画叠加。 ```ts type IAnimation = IStyleAnimation | IKeyframesAnimation @@ -43,11 +43,18 @@ interface IAnimateKeyframe { delay?: number // 单独设置关键帧延迟播放时长。 duration?: number // 单独设置关键帧的固定时长，设置后将忽略 autoDuration + swing?: number // 摇摆次数（到达 to 的次数），from -> to，to -> from -> to ... ，默认 0 + loop?: number // 循环次数，默认为 0 + // 分配剩余时间：（总时长 - 总关键帧固定时长）/ 总权重 * 当前权重 autoDelay?: number // 自动 delay 的权重， 默认为 0 autoDuration?: number // 自动 duration 的权重， 默认为 1 } +``` +深入了解 [动画选项属性](/plugin/in/animate/Animate.md#动画选项-只读)。 + +```ts // 动画选项 interface IAnimateOptions { easing?: IAnimateEasing // 缓动方式，默认为 ease @@ -57,9 +64,9 @@ interface IAnimateOptions { ending?: IAnimateEnding // 动画结束时的状态，可设置from、to，默认auto reverse?: boolean // 是否反向动画 to -> from，默认为 false - swing?: boolean // 是否摇摆循环播放 from -> to，to -> from ... ，默认 false + swing?: boolean | number // 是否摇摆循环播放，可设置次数（到达 to 的次数） from -> to，to -> from -> to ... ，默认 false - loop?: boolean | number // 是否循环播放，可设置循环次数，默认为 false + loop?: boolean | number // 是否循环播放，可设置次数，默认为 false loopDelay?: number // 进入下一次循环播放的延迟时间，默认为0 speed?: number // 动画播放的倍速，值越大播放越快，默认为 1 倍速 @@ -72,9 +79,9 @@ interface IAnimateOptions { } ``` -### animationOut： [`IAnimation`](/api/modules.md#ianimation) +### animationOut： [`IAnimation`](/api/modules.md#ianimation) | [`IAnimation`](/api/modules.md#ianimation)[] -出场动画， 元素被移除 或 [visible](/reference/property/visible) 为 0 时执行。 +出场动画，支持多个动画叠加， 元素被移除 或 [visible](/reference/property/visible) 为 0 时执行。 ## 归属 diff --git a/reference/property/export.md b/reference/property/export.md index b3d28d9..ac9b7e3 100644 --- a/reference/property/export.md +++ b/reference/property/export.md @@ -2,6 +2,10 @@ 会等待视图内所有网络资源都加载完再进行导出图片。 +::: tip 注意事项 +需安装 [导出元素插件](/plugin/in/export/index.md) 才能使用，或直接安装 [leafer-editor](/guide/install/editor/start.md)、node 版（已集成导出元素插件）。 +::: + ## 关键方法 ### export ( ) diff --git a/reference/property/find.md b/reference/property/find.md index 59c7402..59d8efc 100644 --- a/reference/property/find.md +++ b/reference/property/find.md @@ -4,6 +4,10 @@ 想获取一个元素，请使用 [findOne()](./findOne.md)。 +::: tip 注意事项 +需安装 [查找元素插件](/plugin/in/find/index.md) 才能使用，或直接安装 [leafer-game](/guide/install/game/start.md)、 [leafer-editor](/guide/install/editor/start.md) （已集成导出元素插件） +::: + ## 关键方法 ### find ( condition: `number` | `string` | `IFindMethod` ): [`UI`](/reference/display/UI.md)[] diff --git a/reference/property/findOne.md b/reference/property/findOne.md index 518e584..e37cc93 100644 --- a/reference/property/findOne.md +++ b/reference/property/findOne.md @@ -4,6 +4,10 @@ 想获取一个数组，请使用 [find()](./find.md)。 +::: tip 注意事项 +需安装 [查找元素插件](/plugin/in/find/index.md) 才能使用，或直接安装 [leafer-game](/guide/install/game/start.md)、 [leafer-editor](/guide/install/editor/start.md) （已集成导出元素插件） +::: + ## 关键方法 ### findOne ( condition: `number` | `string` | `IFindMethod` ): [`UI`](/reference/display/UI.md) diff --git a/reference/property/transition.md b/reference/property/transition.md index 4d08f47..e9d2ec5 100644 --- a/reference/property/transition.md +++ b/reference/property/transition.md @@ -25,7 +25,11 @@ import Case from '/component/Case.vue' ```ts // 过渡选项， number 表示duration， string 表示 easing， object 表示动画选项对象， type ITransition = boolean | number | IAnimateEasingName | IAnimateOptions +``` + +深入了解 [动画选项属性](/plugin/in/animate/Animate.md#动画选项-只读)。 +```ts // 动画选项 interface IAnimateOptions { easing?: IAnimateEasing // 缓动方式，默认为 ease @@ -35,9 +39,9 @@ interface IAnimateOptions { ending?: IAnimateEnding // 动画结束时的状态，可设置from、to，默认auto reverse?: boolean // 是否反向动画 to -> from，默认为 false - swing?: boolean // 是否摇摆循环播放 from -> to，to -> from ... ，默认 false + swing?: boolean | number // 是否摇摆循环播放，可设置次数（到达 to 的次数） from -> to，to -> from -> to ... ，默认 false - loop?: boolean | number // 是否循环播放，可设置循环次数，默认为 false + loop?: boolean | number // 是否循环播放，可设置次数，默认为 false loopDelay?: number // 进入下一次循环播放的延迟时间，默认为0 speed?: number // 动画播放的倍速，值越大播放越快，默认为 1 倍速 diff --git a/update/index.md b/update/index.md index 6af8d34..81284df 100644 --- a/update/index.md +++ b/update/index.md @@ -1,7 +1,3 @@ - - # 更新 :::tip 注意事项 @@ -14,6 +10,86 @@ import Case from '/component/Case.vue' ::: +## 2025 / 01 / 09 + +> v1.3.2 + +#### 🍇 社区 + +\- 🌸 [fig2leafer - leafer 渲染 figma 文件](https://fig2leafer.netlify.app) [@jianghanyue](https://github.com/jianghanyue) + +\- 🌸 [音乐律动的背光键盘](https://canvas.xjq.icu/marching-music) [@xjq7](https://github.com/xjq7) + +\- 🌸 [模拟丰富多样的雪花效果](https://canvas.xjq.icu/snowflake) [@xjq7](https://github.com/xjq7) + +\- 🌸 [TO NORTH 在线标注工具](https://tonorth.netlify.app/) @tonorth.netlify.app + +\- 🌸 [不一样的动态时钟 React+Leafer 实现火车动态时钟](https://juejin.cn/post/7454109404122562597) @火树银花 + +\- 🌸 [可快速实时预览的在线 playground 环境（初步完成）](https://www.leaferjs.com/playground/) [@leafer ](https://github.com/leaferjs) + +#### 🌱 新增 + +\- 🌸 应用配置增加 [grow](/guide/basic/leafer.md#创建自动生长的-leafer) 参数, 可以创建 [自动生长](/reference/config/app/canvas.md#自动生长) 的画布，自动贴合实际内容大小 + +\- 🌸 Text 元素的 [textAlign](/reference/display/Text.md#textalign-itextalign) 属性支持设置 'both' 来强制两端对齐文本 + +\- 🌸 [animation](/reference/property/animation.md) 及其他动画参数中的 单个关键帧 支持 单独设置循环、摇摆次数 + +\- 摇摆动画参数 swing 支持设置摇摆次数 (每到达 to 算一次) + +\- 元素的 [animation](/reference/property/animation.md) 属性支持多个动画叠加 + +#### 🪲 修复 + +\- 🌸 元素锁定后，双击还能进入编辑的问题 + +#### 🌿 优化 + +\- 🌸 元素过渡动画方法会中断 animation 的问题，改为只在有动画样式冲突时才中断 + +\- 🌸 通过 Platform.origin.Image 保留原始 Image 对象，防止被全局覆盖造成图片无法显示 + +#### 🌷 感谢反馈 + +@BO @周明 @王进元 + +## 2025 / 01 / 06 + +> v1.3.1 + +:::tip 升级操作 + +为让核心包可以作为其他框架的底层库（进一步减小尺寸），本次升级将查找、导出元素功能，迁移至 [查找元素插件](/plugin/in/find/index.md)、[导出元素插件](/plugin/in/export/index.md)， 或直接安装 [leafer-game](/guide/install/game/start.md)、 [leafer-editor](/guide/install/editor/start.md) 场景包（已集成相关插件）。 + +本轮调整核心包尺寸工作已完毕，后续不会有太大变动。 + +::: + +#### 🍇 社区 + +\- 🌸 [趣设计 - PS 海报头像拼图 LOGO（补发）](https://www.leaferjs.com/ui/guide/install/ui/miniapp/start.html#%E9%87%87%E7%94%A8%E5%B0%8F%E7%A8%8B%E5%BA%8F-web-view-%E7%BB%84%E4%BB%B6%E5%AE%9E%E7%8E%B0%E7%9A%84%E6%A1%88%E4%BE%8B) @BO + +\- 🌸 [创意表情 - DIY 有趣的微信表情（补发）](https://www.leaferjs.com/ui/guide/install/ui/miniapp/start.html#%E9%87%87%E7%94%A8-uniapp-%E5%AE%9E%E7%8E%B0%E7%9A%84%E5%8E%9F%E7%94%9F%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%A1%88%E4%BE%8B) @goosen + +#### 🌱 新增 + +\- 🌸 Text 增加 [打字机](/reference/display/Text.md#打字机动画) / [删除文字](/reference/display/Text.md#删除文字动画) 动画效果，只需将 text 属性作为动画样式即可 + +\- 🌸 Animate 类增加 [style](/plugin/in/animate/Animate.md#style-iuiinputdata) 属性，获取当前动画状态的样式 + +\- 🌸 Animate 类初始化 [target](/plugin/in/animate/Animate.md#target-ui-object) 参数支持普通对象。 + +#### 🌿 优化 + +\- 🌸 find() / export() 功能迁移至插件，未安装插件时，控制台会有安装提示 + +\- 🌸 set() 方法传 入无效数据时进行屏蔽 + +#### 🌷 感谢反馈 + +@火树银花 @BO + ## 2024 / 12 / 31 > v1.2.2 @@ -44,7 +120,7 @@ import Case from '/component/Case.vue' > v1.2.1 -:::tip 升级操作（重大变化） +:::tip 升级操作 1. 为让核心包支持更多的场景，同时减小尺寸，本次升级将 [缩放平移视图](/guide/advanced/viewport) 功能 移动到了 **viewport 视口插件** 中（不影响运行），需安装引入 [视口插件](/plugin/in/viewport/) 才能使用， 或安装 [leafer-editor](/guide/install/editor/start.md)（已集成此插件）。 @@ -1427,8 +1503,6 @@ text.padding // 没有宽高的文本增加padding， 内容的位置会改变 > v1.0.0-rc.7 - - #### 新增 🎉🎉🎉 \- [Anime.js 动画](/plugin/combine/animejs/)，支持关键帧