Skip to content

Latest commit

 

History

History
196 lines (141 loc) · 7.13 KB

README_zh-CN.md

File metadata and controls

196 lines (141 loc) · 7.13 KB
Raw

在写了，别急

Contributors Forks Stargazers Issues MIT License


Logo

fx.js

一个用于在ZeppOS中提供简单动画的库
English Document »

我在写文档的时候优先用的英语哦~建议优先读完英文版 当然，中文版更方便大部分大陆开发者使用习惯

下载稳定版 · 反馈Bug · 提交新建议

目录
  1. 关于 fx.js
  2. 快速开始
  3. 如何使用
  4. TODO
  5. Contributing
  6. 开源协议
  7. 联系我们

关于 fx.js

这是一个一个用于在ZeppOS中提供简单动画的库 你可以用非常简单的方式来为现有的UI控件添加各种动画效果

为什么选择fx.js呢:

  • 在 ZeppOS 1.0中，官方并没有提供控件动画效果的接口，我们认为开发者可以通过这个fx库来为 ZeppOS 1.0 小程序添加有意思的动画（比如给小米手环7写小程序）
  • 为了方便开发者快速接入现有项目，开发者可以极为方便的使用fx.js来添加线性或非线性动画，而这一切只需要引入fx.js这个库即可
  • 当然，也欢迎各位开发者们添加更多有意思的动画效果

快速开始？看看下面的 Usage 吧

(back to top)

快速开始

以下内容可以让开发者们快速上手

前期准备

在接入fx.js库之前，请确保你已经对 ZeppOS 小程序开发有了一定了解，当然，你也可以从头开始，从 ZeppOS 官方文档入手，相信你一定可以快速掌握的 Also, you need a code editor(Like Microsoft VSCode) and knowledge of JavaScript. emmm，你还需要一个代码编辑器（比如微软的VSCode），以及有关JavaScript的知识

安装

  1. 使用fx.js之前，你需要准备一个 ZeppOS 小程序项目，如果还没有创建，你可以参考这部分的文档 ZeppOS quick start.

  2. 请前往 Releases 下载最新稳定版fx.js，然后把fx.js放到项目根目录的 utils/ 目录中

  3. 在项目中添加对fx.js的引用

import { Fx } from "../utils/fx"; // 这里换成fx.js相对于该文件的相对路径

至此，你可以尽情享受fx.js带来的动画效果了，什么？不知道怎么用？那就看看Usage吧

(back to top)

如何使用

可以参考这个简单的示例，如果正常运行，文本控件的x值应该由100变为200，即向右进行非线性移动 如果有什么问题可以提交issue或联系XiaomaiTX，但是在发问前请确保自己已经经过思考 当然，你可以先看看我博客的文章《提问的智慧》

    const text = hmUI.createWidget(hmUI.widget.TEXT, {
      // 创建一个简单的 TEXT 控件
      x: 100,
      y: 120,
      w: 288,
      h: 46,
      color: 0xffffff,
      text_size: 36,
      align_h: hmUI.align.CENTER_H,
      align_v: hmUI.align.CENTER_V,
      text_style: hmUI.text_style.NONE,
      text: 'HELLO ZEPPOS'
    })

let fx = new Fx({
    begin: 100, // 初始函数值
    end: 200, // 目标函数值
    fps: 60, // 帧率
    time: 1, // 总时长(秒)
     style: Fx.Styles.EASE_IN_OUT_QUAD, //   预设类型 见fx.js中的Fx.Style

     onStop() {
       console.log("anim stop");
     }, // 动画结束后的回调函数

     // 每一帧的回调函数，参数为当前函数值，取值范围为[begin, end]
      func: (result) => text.setProperty(hmUI.prop.X, result),
});
fx.restart(); // 播放动画 可以重复多次调用

(back to top)

Roadmap

  • 添加一些基本的动画预设
  • 添加颜色混合动画函数
  • 添加更多的预设（咕咕咕，靠大家的贡献啦~）
  • 为README编写多语言适配（感觉中英就够了？）
    • English
    • 中文

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

XiaomaiTX - i@lenrome.cn

Project Link: https://github.com/XiaomaiTX/zeppos-fx

(back to top)