@x1a0ma17x/zeppos-fx 2.0.3 → 2.0.4

package/example/page/index.js

@@ -1,19 +1,45 @@
-import hmUI from "@zos/ui";
-import { getText } from "@zos/i18n";
-import * as Styles from "zosLoader:./index.[pf].layout.js";
-import { Fx } from "../../fx";
-import { AnimProfile } from "./index.anim";
-import * as STYLE from "./index.style";
-
-Page({
-	build() {
-		console.log(getText("example"));
-		const button = hmUI.createWidget(hmUI.widget.BUTTON, STYLE.BUTTON);
-		const anim = new Fx(AnimProfile, button);
-		anim.start();
-		// anim.stop();
-		// anim.pause();
-		// anim.restart();
-		// anim.status();
-	},
-});
+import * as hmUI from "@zos/ui";
+import { Fx } from "@x1a0ma17x/zeppos-fx";
+
+Page({
+    build() {
+        const text = hmUI.createWidget(hmUI.widget.TEXT, {
+            // 创建一个简单的 TEXT 控件
+            x: 0,
+            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",
+        });
+
+        const fx = new Fx({
+            delay: 0, // 延迟执行的时间(毫秒)
+            begin: 0, // 初始函数值
+            end: 1, // 结束函数值
+            fps: 60, // 帧率
+            time: 1000, // 总时长(毫秒)
+            style: Fx.Styles.EASE_IN_OUT_QUAD, // 预设类型
+            enabled: true, // 是否默认启用（即创建Fx实例时自动启动）
+            onStop() {
+                // 动画结束后的回调函数
+                console.log("anim stop");
+            },
+            func: (result) => {
+                // 每一帧的回调函数，参数为当前函数值，取值范围为[begin, end]
+                text.setProperty(hmUI.prop.MORE, {
+                    x: 300 * result,
+                });
+            },
+        });
+
+        // 状态控制
+        fx.start();
+        // fx.pause();
+        // fx.stop();
+    },
+});

package/example/page/index.r.layout.js

@@ -1,6 +1,6 @@
-import { px } from "@zos/utils";
-
-export const TEXT_STYLE = {
-  x: px(0),
-  y: px(0),
-}
+import { px } from "@zos/utils";
+
+export const TEXT_STYLE = {
+  x: px(0),
+  y: px(0),
+}

package/example/pnpm-lock.yaml

@@ -0,0 +1,31 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@x1a0ma17x/zeppos-fx':
+        specifier: ^2.0.3
+        version: 2.0.3
+    devDependencies:
+      '@zeppos/device-types':
+        specifier: ^3.0.0
+        version: 3.0.1
+
+packages:
+
+  '@x1a0ma17x/zeppos-fx@2.0.3':
+    resolution: {integrity: sha512-mhZhlWRZjNXyhNrKHHjtp4Z9rOIQhDd5SxDoPIqVwdy8tialvAAe4qjxCcB+tAMYkLgs6CUj9uDmq7ZQZnxwfQ==}
+
+  '@zeppos/device-types@3.0.1':
+    resolution: {integrity: sha512-7rUsKLFiTdwIU3NarEKbEoQjr2X1kE6/8ra+mM3+zXDnwhELPowwC4Sl5UGS71PjTa9Rb+s4WygOHkjeEmJcoA==}
+
+snapshots:
+
+  '@x1a0ma17x/zeppos-fx@2.0.3': {}
+
+  '@zeppos/device-types@3.0.1': {}

package/fx.js

@@ -39,7 +39,7 @@ export class Fx {
      * @param {number} [options.end=100] 目标函数值
      * @param {number} [options.x_start] 自定义函数的开始x坐标
      * @param {number} [options.x_end] 自定义函数的结束x坐标
-     * @param {number} [options.time=1] 执行总时间(秒)
+     * @param {number} [options.time=1000] 执行总时间(毫秒)
      * @param {Function} [options.fx] 自定义x=>y动画函数
      * @param {Function} options.func 每帧执行的回调函数，参数为当前值
      * @param {number} [options.fps=60] 动画帧率
@@ -53,7 +53,7 @@ export class Fx {
         end = 100,
         x_start,
         x_end,
-        time = 1,
+        time = 1000,
         fx,
         func,
         fps = 60,
@@ -77,13 +77,13 @@ export class Fx {
             this.x_start = x_start != null ? x_start * 1.0 : 0;
             this.x_end = x_end != null ? x_end * 1.0 : 1;
             this.fx = fx;
-            this.speed = (this.x_end - this.x_start) / (time * fps);
+            this.speed = (this.x_end - this.x_start) / (fps * time / 1000);
         } else {
             // 使用预设样式
             const styleName = this._getStyleName(style);
-            this.fx = (x) => Fx.Easing[styleName](x, begin, end, fps * time);
+            this.fx = (x) => Fx.Easing[styleName](x, begin, end, fps * time / 1000);
             this.x_start = 0;
-            this.x_end = fps * time;
+            this.x_end = fps * time / 1000;
             this.speed = 1;
         }
 
@@ -191,7 +191,7 @@ export class Fx {
             this.func(this.fx(this.x_now));
         }, this.per_clock);
 
-        this.timer.start();
+        this.timer.start(this.delay);
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x1a0ma17x/zeppos-fx",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "A library for providing simple animations in ZeppOS.",
   "main": "index.js",
   "directories": {

package/example/app-side/i18n/en-US.po

@@ -1,2 +0,0 @@
-msgid "example"
-msgstr "This is an example in app-side"

package/example/app-side/index.js

@@ -1,13 +0,0 @@
-import { gettext } from 'i18n'
-
-AppSideService({
-  onInit() {
-    console.log(gettext('example'))
-  },
-
-  onRun() {
-  },
-
-  onDestroy() {
-  }
-})

package/example/page/i18n/fr-FR.po

@@ -1,4 +0,0 @@
-
-
-msgid "example"
-msgstr "Exemple"

package/example/page/i18n/ru-RU.po

@@ -1,4 +0,0 @@
-
-
-msgid "example"
-msgstr "Образец"

package/example/page/i18n/zh-CN.po

@@ -1,2 +0,0 @@
-msgid "example"
-msgstr "示例"

package/example/page/i18n/zh-TW.po

@@ -1,4 +0,0 @@
-
-
-msgid "example"
-msgstr "範例"

package/example/page/index.anim.js

@@ -1,37 +0,0 @@
-import { Fx } from "../../fx";
-const Track_1 = [
-	{
-		props: {
-			startTime: 1,
-			duration: 1,
-			fps: 1,
-			fx_style: Fx.Styles.LINEAR,
-			repeat: true,
-		},
-		func: (result) => {
-			console.log("result1 ", result);
-			return;
-		},
-		onStop: (result) => {
-			return;
-		},
-	},
-	{
-		props: {
-			startTime: 1,
-			duration: 1,
-			fps: 1,
-			fx_style: Fx.Styles.LINEAR,
-			repeat: true,
-		},
-		func: (result) => {
-			console.log("result2 ", result);
-			return;
-		},
-		onStop: (result) => {
-			return;
-		},
-	},
-];
-
-export const AnimProfile = [Track_1];

package/example/page/index.style.js

@@ -1,13 +0,0 @@
-export const BUTTON = {
-	x: (480 - 400) / 2,
-	y: 240,
-	w: 400,
-	h: 100,
-	radius: 12,
-	normal_color: 0xfc6950,
-	press_color: 0xfeb4a8,
-	text: "Hello",
-	click_func: () => {
-		console.log("click");
-	},
-};

package/example/setting/i18n/en-US.po

@@ -1,2 +0,0 @@
-msgid "example"
-msgstr "This is an example in app-side"

package/example/setting/index.js

@@ -1,7 +0,0 @@
-import { gettext } from 'i18n'
-
-AppSettingsPage({
-  build() {
-    console.log(gettext('example'))
-  }
-})

package/src/example/app.js

@@ -1,10 +0,0 @@
-App({
-  globalData: {},
-  onCreate(options) {
-    console.log('app on create invoke')
-  },
-
-  onDestroy(options) {
-    console.log('app on destroy invoke')
-  }
-})

package/src/example/app.json

@@ -1,46 +0,0 @@
-{
-  "configVersion": "v3",
-  "app": {
-    "appId": 25966,
-    "appName": "Empty",
-    "appType": "app",
-    "version": {
-      "code": 1,
-      "name": "1.0.0"
-    },
-    "icon": "icon.png",
-    "vender": "zepp",
-    "description": "empty application"
-  },
-  "permissions": [],
-  "runtime": {
-    "apiVersion": {
-      "compatible": "3.0.0",
-      "target": "3.0.0",
-      "minVersion": "3.0"
-    }
-  },
-  "targets": {
-    "default": {
-      "module": {
-        "page": {
-          "pages": [
-            "page/index"
-          ]
-        }
-      },
-      "platforms": [
-        {
-          "st": "r",
-          "dw": 480
-        }
-      ]
-    }
-  },
-  "i18n": {
-    "en-US": {
-      "appName": "Empty"
-    }
-  },
-  "defaultLanguage": "en-US"
-}

package/src/example/global.d.ts

@@ -1 +0,0 @@
-/// <reference path="node_modules/@zeppos/device-types/dist/index.d.ts" />

package/src/example/jsconfig.json

@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "commonjs",
-    "target": "es6",
-    "checkJs": true
-  },
-  "exclude": ["node_modules", "**/node_modules/*"],
-  "files": ["node_modules/@zeppos/device-types/dist/index.d.ts"]
-}

package/src/example/libs/fx.js

@@ -1,325 +0,0 @@
-/**
- * fx.js
- * @description A library for providing animations in ZeppOS. 一个用于在ZeppOS中提供动画的库
- * @version 3.0.0
- * @date 2024/11/02
- * @author XiaomaiTX
- * @license MIT
- * https://github.com/XiaomaiTX/zeppos-fx
- *
- * **/
-
-export class Fx {
-    constructor(params) {
-        this.tracks = params.tracks;
-        this.metadata = params.metadata;
-        this.status = "stop";
-    }
-
-    start() {
-        if (this.status == "stop" || this.status == "pause") {
-            this.status = "start";
-            for (let i = 0; i < this.tracks.length; i++) {
-                let track = this.tracks[i];
-            }
-        }
-    }
-    tick(track) {
-        /**
-         * @param track
-         * @param track.progress 进度
-         * @param track.totalFrame 总帧数
-         */
-        if (
-            this.status == "start" &&
-            track.progress < track.totalFrame
-        ) {
-            
-        }
-    }
-    stop() {
-        if (this.status != "stop") {
-            this.status = "stop";
-        }
-    }
-
-    restart() {
-        this.status = "start";
-    }
-    pause() {
-        if (this.status == "start") {
-            this.status = "pause";
-        }
-    }
-    getStatus() {
-        return this.status;
-    }
-}
-Fx.Styles = {
-    /**
-     * List of preset styles
-     * @example EXAMPLE: indexNumber,
-     *
-     * */
-    // TODO Add more style
-
-    // The following presets are available for reference https://easings.net/
-    // 以下预设可参考 https://easings.net/
-
-    LINEAR: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return x;
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_SINE: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return 1 - cos((x * Math.PI) / 2);
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_OUT_SINE: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return sin((x * Math.PI) / 2);
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_OUT_SINE: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return -(cos(Math.PI * x) - 1) / 2;
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_QUAD: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return x * x;
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_OUT_QUAD: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return 1 - (1 - x) * (1 - x);
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_OUT_QUAD: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_CUBIC: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return x * x * x;
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_OUT_CUBIC: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return 1 - Math.pow(1 - x, 3);
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_OUT_CUBIC: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_QUART: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return x * x * x * x;
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_OUT_QUART: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return 1 - Math.pow(1 - x, 4);
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_OUT_QUART: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return x < 0.5
-                ? 8 * x * x * x * x
-                : 1 - Math.pow(-2 * x + 2, 4) / 2;
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_QUINT: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return x * x * x * x * x;
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_OUT_QUINT: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return 1 - Math.pow(1 - x, 4);
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_OUT_QUINT: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return x < 0.5
-                ? 16 * x * x * x * x * x
-                : 1 - Math.pow(-2 * x + 2, 5) / 2;
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_EXPO: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return x === 0 ? 0 : Math.pow(2, 10 * x - 10);
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_OUT_EXPO: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_OUT_EXPO: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return x === 0
-                ? 0
-                : x === 1
-                ? 1
-                : x < 0.5
-                ? Math.pow(2, 20 * x - 10) / 2
-                : (2 - Math.pow(2, -20 * x + 10)) / 2;
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_CIRC: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return 1 - Math.sqrt(1 - Math.pow(x, 2));
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_OUT_CIRC: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return Math.sqrt(1 - Math.pow(x - 1, 2));
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_OUT_CIRC: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return x < 0.5
-                ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2
-                : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2;
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_BACK: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return 1.70158 + 1 * x * x * x - 1.70158 * x * x;
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_OUT_BACK: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return (
-                1 +
-                1.70158 +
-                1 * Math.pow(x - 1, 3) +
-                1.70158 * Math.pow(x - 1, 2)
-            );
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_OUT_BACK: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return x < 0.5
-                ? (Math.pow(2 * x, 2) *
-                      ((1.70158 * 1.525 + 1) * 2 * x - 1.70158 * 1.525)) /
-                      2
-                : (Math.pow(2 * x - 2, 2) *
-                      ((1.70158 * 1.525 + 1) * (x * 2 - 2) + 1.70158 * 1.525) +
-                      2) /
-                      2;
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_ELASTIC: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return x === 0
-                ? 0
-                : x === 1
-                ? 1
-                : -Math.pow(2, 10 * x - 10) *
-                  sin(((x * 10 - 10.75) * (2 * Math.PI)) / 3);
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_OUT_ELASTIC: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return x === 0
-                ? 0
-                : x === 1
-                ? 1
-                : Math.pow(2, -10 * x) *
-                      sin(((x * 10 - 0.75) * (2 * Math.PI)) / 3) +
-                  1;
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_OUT_ELASTIC: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return x === 0
-                ? 0
-                : x === 1
-                ? 1
-                : x < 0.5
-                ? -(
-                      Math.pow(2, 20 * x - 10) *
-                      sin(((20 * x - 11.125) * (2 * Math.PI)) / 4.5)
-                  ) / 2
-                : (Math.pow(2, -20 * x + 10) *
-                      sin(((20 * x - 11.125) * (2 * Math.PI)) / 4.5)) /
-                      2 +
-                  1;
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_BOUNCE: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return 1 - Fx.Styles.bounceOut(1 - x);
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_OUT_BOUNCE: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return Fx.Styles.bounceOut(x);
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    EASE_IN_OUT_BOUNCE: function (now_x, begin, end, max_x) {
-        function math_func(x) {
-            return x < 0.5
-                ? (1 - Fx.Styles.bounceOut(1 - 2 * x)) / 2
-                : (1 + Fx.Styles.bounceOut(2 * x - 1)) / 2;
-        }
-        return begin + (end - begin) * math_func(now_x / max_x);
-    },
-    bounceOut: function (x) {
-        /**
-         * Returns the bounce out result of x
-         * @param {number} x
-         * @returns {number}
-         */
-        const n1 = 7.5625;
-        const d1 = 2.75;
-
-        if (x < 1 / d1) {
-            return n1 * x * x;
-        } else if (x < 2 / d1) {
-            return n1 * (x -= 1.5 / d1) * x + 0.75;
-        } else if (x < 2.5 / d1) {
-            return n1 * (x -= 2.25 / d1) * x + 0.9375;
-        } else {
-            return n1 * (x -= 2.625 / d1) * x + 0.984375;
-        }
-    },
-};
-
-export default Fx;