Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/XiaomaiTX/zeppos-fx
A library for building advanced animations in ZeppOS. 一个用于在ZeppOS中制作进阶动画的库
https://github.com/XiaomaiTX/zeppos-fx
Last synced: about 2 months ago
JSON representation
A library for building advanced animations in ZeppOS. 一个用于在ZeppOS中制作进阶动画的库
- Host: GitHub
- URL: https://github.com/XiaomaiTX/zeppos-fx
- Owner: XiaomaiTX
- License: mit
- Created: 2023-02-19T06:53:33.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-07-20T13:35:05.000Z (about 2 months ago)
- Last Synced: 2024-07-20T14:51:05.734Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 52.7 KB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: License
Awesome Lists containing this project
- awesome-zeppos - zeppos-fx - A library for providing simple animations in ZeppOS. (Libraries / Lib)
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
fx.js
A library for providing simple animations in ZeppOS.
中文文档（在写了别催了） »
Download
·
Report Bug
·
Request Feature
Table of Contents
## About The Project
A library for providing simple animations in ZeppOS.
You can use simple functions to add animations to your UI widgets
Here's why:
- In ZeppOS 1.0, there is no official animation interface for the control, so developers need to write their own animation libraries to implement animation features.
- In order to save your developers' work at the bottom, we have created an animation library for ZeppOS that helps developers to quickly build UI controls with linear or non-linear animations in ZeppOS applets
- You can also easily add custom animations to your UI widgets
Use the Usage to easily get started.
## Getting Started
The content here will help you get familiar with the program quickly.
### Prerequisites
Before using this library, please make sure you already have an understanding of ZeppOS applet development, you can refer to the [ZeppOS official documentation](https://docs.zepp.com/docs/intro/).
Also, you need a `code editor(Like Microsoft VSCode)` and `knowledge of JavaScript`.
### Installation
1. To use this library, you need to create a ZeppOS applet project first.refer to the [ZeppOS quick start](https://docs.zepp.com/docs/guides/quick-start/).
2. Please download the latest `fx.js` file in the [Releases](https://github.com/XiaomaiTX/zeppos-fx/releases), and place `fx.js` in the `utils/` directory of the root of the applet
3. Add a reference to fx.js in the project
```js
import { Fx } from "../utils/fx"; // Replace with the path to your fx.js
```
At this point, you're ready to use the `fx.js` library
## Usage
You can refer to the following example to use this library and you should get the expected results like this:
The position of the text moves from x=100 to x=200 with a non-linear motion effect
```js
const text = hmUI.createWidget(hmUI.widget.TEXT, {
// create a text widget
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, // Initial value of function.
end: 200, // Target value of function.
fps: 60, // FPS.
time: 1, // Total during time (s).
style: Fx.Styles.EASE_IN_OUT_QUAD, // Types of animation presets used, seeing @Fx.Style.
onStop() {
console.log("anim stop");
}, // Callback function at the end of the animation.
// Callback function for each frame, the parameter is the current function value, the value range is [begin, end]
func: (result) => text.setProperty(hmUI.prop.X, result),
});
fx.restart(); // Replay animation can be called multiple times.
```
## Roadmap
- [x] Add basic presets
- [x] Add function to mix colors
- [ ] Add more presets
- [ ] Multi-language Support for README
- [x] English
- [ ] 中文
See the [open issues](https://github.com/XiaomaiTX/zeppos-fx/issues) for a full list of proposed features (and known issues).
## 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
## License
Distributed under the MIT License. See `LICENSE.txt` for more information.
## Contact
XiaomaiTX - [email protected]
Project Link: [https://github.com/your_username/repo_name](https://github.com/your_username/repo_name)
[contributors-shield]: https://img.shields.io/github/contributors/XiaomaiTX/zeppos-fx.svg?style=for-the-badge
[contributors-url]: https://github.com/XiaomaiTX/zeppos-fx/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/XiaomaiTX/zeppos-fx.svg?style=for-the-badge
[forks-url]: https://github.com/XiaomaiTX/zeppos-fx/network/members
[stars-shield]: https://img.shields.io/github/stars/XiaomaiTX/zeppos-fx.svg?style=for-the-badge
[stars-url]: https://github.com/XiaomaiTX/zeppos-fx/stargazers
[issues-shield]: https://img.shields.io/github/issues/XiaomaiTX/zeppos-fx.svg?style=for-the-badge
[issues-url]: https://github.com/XiaomaiTX/zeppos-fx/issues
[license-shield]: https://img.shields.io/github/license/XiaomaiTX/zeppos-fx.svg?style=for-the-badge
[license-url]: https://github.com/XiaomaiTX/zeppos-fx/blob/master/LICENSE.txt