fx.js

A library for providing simple animations in ZeppOS.
中文文档（在写了别催了） »

Download · Report Bug · Request Feature

Table of Contents

1. About The fx.js
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact

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.

(back to top)

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. 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.

2. Please download the latest fx.js file in the 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

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

(back to top)

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

    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. 

(back to top)

Roadmap

• Add basic presets
• Add function to mix colors
• Add more presets
• Multi-language Support for 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 - [email protected]

Project Link: https://github.com/your_username/repo_name

(back to top)