new feature: 1. 基础动态功能上线 2. 基础动画引擎上线

quickapp.config.js

@@ -35,6 +35,7 @@ module.exports = {
             alias: {
                 '@components': path.resolve(__dirname, 'src/components'),
                 '@less': path.resolve(__dirname, 'src/less'),
+                '@protobuf': path.resolve(__dirname, 'src/protobuf'),
                 '$buildinfo': buildInfoPath
             }
         }

src/animation/defaults.ts

@@ -0,0 +1,4 @@
+import * as loading from "./defaults/loading"
+import * as page from "./defaults/page"
+
+export { loading, page }

src/animation/defaults/loading.ts

@@ -0,0 +1,21 @@
+export function CreateLoadingAnimation(pageModel: any){
+    // anims存在性检测
+    if(!pageModel.anims){
+        pageModel.anims = {}
+    }
+
+    // 创建动画元素
+    pageModel.anims.loading_src = { value: "/common/seqanims/loadingWhite/icons8-loading_颜色反转-1.png" }
+
+    pageModel.anims.loading = new global.animengine.SequenceAnim(
+        pageModel.$page.name,
+        pageModel.anims.loading_src,
+        28,
+        "/common/seqanims/loadingWhite/icons8-loading_颜色反转-*.png",
+        1000,
+        true
+    )
+    pageModel.anims.show_loading = true
+
+    global.logger.log("[Animation Engine] Created Loading Animation for page", pageModel.$page.name)
+}

src/animation/defaults/page.ts

@@ -0,0 +1,3 @@
+export function PlayPageAnimation(){
+
+}

src/animation/engine.ts

@@ -1,3 +1,5 @@
+import * as defaults from "./defaults"
+
 interface GlobalAnimations {
     [key: string]: Array<Anim>;
 }
@@ -133,4 +135,4 @@ function clearPageAnims(pageId: string): void {
     }
 }
 
-export { SequenceAnim, DomAnim, clearPageAnims };
+export { SequenceAnim, DomAnim, clearPageAnims, defaults };

src/app.ux

@@ -26,13 +26,15 @@ export default {
   htmlparser: htmlparser,
   savedcontent: savedcontent,
   bgimg: bgimg,
-  logger: logger,
   DEVICE_INFO: null,
   async onCreate() {
     console.log("app created")
 
     console.log("create global logger")
-    global.logger = this.logger
+    global.logger = logger
+
+    console.log("create global animengine")
+    global.animengine = this.animengine
 
     console.log("appinit > loadSettings")
     settings.loadSettings()

src/bilibiliclient/client.ts

@@ -11,6 +11,7 @@ import { BilibiliClientCommentMethods } from './comment/comment';
 import { BilibiliClientMessageMethods } from './message/message';
 import { BilibiliClientSearchMethods } from './search/search';
 import { BilibiliClientAPIRequestMethods } from './api/request';
+import { BilibiliClientDynamicMethods } from './dynamic/dynamic';
 
 class BilibiliClient {
     // 版本号
@@ -63,6 +64,7 @@ Object.assign(BilibiliClient.prototype,
     BilibiliClientCommentMethods,
     BilibiliClientMessageMethods,
     BilibiliClientSearchMethods,
+    BilibiliClientDynamicMethods
 );
 
 export { BilibiliClient };

src/bilibiliclient/dynamic/dynamic.ts

@@ -0,0 +1,10 @@
+export const BilibiliClientDynamicMethods = {
+    async getDynamicList(this: any, host_mid: number = 0, offset: number = 0): Promise<any>{
+        let url = `https://api.bilibili.com/x/polymer/web-dynamic/v1/feed/all?platform=web`
+        if (host_mid) url += `&host_mid=${host_mid}`;
+        if (offset) url += `&offset=${offset}`;
+
+        const response = await this.getRequest(url);
+        return response.data.data;
+    }
+}

src/components/BetterOnlineImage/BetterOnlineImage.ux

@@ -114,6 +114,6 @@ export default {
 @import '@less/global.less';
 
 .img {
-    border-radius: 30px;
+    border-radius: 25px;
 }
 </style>

src/components/DynShow/DynShow.ux

@@ -0,0 +1,82 @@
+<import name="online-image" src="../BetterOnlineImage/BetterOnlineImage.ux"></import>
+
+<template>
+    <div class="comp-root">
+        <div class="user">
+            <image class="userface" src="{{dyn.modules.module_author.face}}@65w_65h"></image>
+            <div class="userinfo">
+                <text class="username">{{ dyn.modules.module_author.name }}</text>
+                <text style="font-size: 18px; color: #5e5e5e; margin-top: 3px">
+                    {{ dyn.modules.module_author.pub_time }}
+                </text>
+                <text style="font-size: 18px; color: #5e5e5e">
+                    {{ dyn.modules.module_author.pub_action }}
+                </text>
+            </div>
+        </div>
+        <div class="content" if="{{dyn.type == 'DYNAMIC_TYPE_DRAW'}}">
+            <text class="dyn-content-text">{{ dyn.modules.module_dynamic.desc.text }}</text>
+            <online-image class="dyn-content-draw-preview" width="180px" height="100px" margin-top="5px"
+                lock-size="true" loading-anim="true" src="{{ dyn.modules.module_dynamic.major.draw.items[0].src }}@180w_100h"></online-image>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  props: {
+    dyn: {
+      type: Object,
+      default: {}
+    }
+  }
+}
+</script>
+
+<style lang="less">
+@import "@less/global.less";
+
+.comp-root {
+  flex-direction: column;
+  background-color: #262626af;
+  border-radius: 25px;
+  width: 190px;
+  padding: 10px;
+  margin-top: 10px;
+}
+
+.user {
+  align-items: center;
+  flex-direction: row;
+}
+
+.userinfo {
+  margin-left: 10px;
+  flex-direction: column;
+}
+
+.userface {
+  border-radius: 50%;
+  min-width: 65px;
+  min-height: 65px;
+  max-width: 65px;
+  max-height: 65px;
+}
+
+.username {
+  font-size: 22px;
+  font-weight: 600;
+  lines: 1;
+  text-overflow: ellipsis;
+}
+
+.content {
+  flex-direction: column;
+}
+
+.dyn-content-text {
+  font-size: 20px;
+  font-weight: 600;
+  max-width: 100%;
+}
+</style>

src/components/Video/Video.ux

@@ -91,7 +91,7 @@ export default {
 .vid {
   margin-top: 10px;
   padding: 15px 15px;
-  border-radius: 30px;
+  border-radius: 25px;
   background-color: #262626af;
   justify-content: center;
   align-items: center;

src/pages/app/arealist/arealist.ux

@@ -92,10 +92,15 @@ export default {
         this.colors[this.lastpage] = "#FF7DA8"
     },
     GoPage(pagename){
-        router.clear()
+        try{
-        router.replace({
+            router.clear()
-            uri: "pages/" + pagename
+            router.replace({
-        })
+                uri: "pages/" + pagename
+            })
+        }
+        catch(e){
+            global.logger.error(e.toString())
+        }
     }
 }
 </script>

src/pages/app/entry/eularead/eularead.ux

@@ -3,7 +3,7 @@
 
 <template>
   <div class="page">
-    <image style="position: absolute; margin-top: 300px" if="{{show_loading}}" src="{{anims.loading_src.value}}"></image>
+    <image style="position: absolute; margin-top: 300px" if="{{anims.show_loading}}" src="{{anims.loading_src.value}}"></image>
     <text style="font-weight: 600; margin-top: 45px; font-size: 40px">{{ $t("eularead.title") }}</text>
     <text style="font-weight: 600; margin-top: 15px; font-size: 24px; width: 75%">{{ $t("eularead.sectitle") }}</text>
     <div if="{{show_content}}" style="margin-top: 20px; width: 75%; flex-direction: column; align-items: center">
@@ -19,16 +19,14 @@
 import router from "@system.router"
 export default {
   private: {
-    show_loading: false,
     show_content: false,
     content: false,
     anims: {
-      loading: null,
+      show_loading: false
-      loading_src: {value: "/common/seqanims/loadingWhite/icons8-loading_颜色反转-1.png"}
     }
   },
   async LoadEula(){
-    this.show_loading = true
+    this.anims.show_loading = true
     this.anims.loading.start()
 
     // 预留init时间
@@ -37,7 +35,7 @@ export default {
       this.content = this.$app.$def.htmlparser.parseContentHtml(html)
 
       this.show_content = true
-      this.show_loading = false
+      this.anims.show_loading = false
       this.anims.loading.stop()
     }, 1500);
   },
@@ -56,15 +54,7 @@ export default {
     router.back()
   },
   onInit(){
-    this.anims.loading = new this.$app.$def.animengine.SequenceAnim(
+    global.animengine.defaults.loading.CreateLoadingAnimation(this)
-      "eulaReadPage",
-      this.anims.loading_src,
-      28,
-      "/common/seqanims/loadingWhite/icons8-loading_颜色反转-*.png",
-      1000,
-      true
-    )
-
     this.LoadEula()
   }
 }

src/pages/app/entry/login/login.ux

@@ -5,7 +5,7 @@
       <text style="font-weight: bold; margin-top: 35px">{{ $t("login.scanToLogin") }}</text>
       <div class="qr_code">
         <qrcode value="{{qr_value}}" show="{{show_qr}}" style="width: 210px; height: 210px"></qrcode>
-        <image style="position: absolute" show="{{show_loading}}" src="{{anims.loading_img_src.value}}"></image>
+        <image style="position: absolute" show="{{anims.show_loading}}" src="{{anims.loading_src.value}}"></image>
       </div>
       <text style="margin-top: 20px; font-size: 26px; font-weight: bold">{{ $t("login.goToOfficialApp") }}</text>
       <text style="font-size: 20px">{{ $t("login.doScan") }}</text>
@@ -21,11 +21,9 @@ export default {
   private: {
     qr_value: "",
     show_qr: false,
-    show_loading: true,
     qrpoll_interval: null,
     anims: {
-      loading_img: null,
+      show_loading: false,
-      loading_img_src: {value: "/common/seqanims/loading/icons8-loading-1.png"},
       pagediv: null,
       pagediv_mgt: {value: "800"}
     }
@@ -51,13 +49,13 @@ export default {
       this.qr_value = get_result.url
       global.logger.log(get_result)
       this.show_qr = true
-      this.show_loading = false
+      this.anims.show_loading = false
 
       this.qrpoll_interval = setInterval(() => this.PollQR(), 1500)
     } catch (error) {
       global.logger.error("获取QR码时出错:", error)
       prompt.showToast({message: "无法获取QR码，请重试", duration: 3000})
-      this.show_loading = false
+      this.anims.show_loading = false
     }
   },
   onReady() {
@@ -73,15 +71,8 @@ export default {
     )
     if (this.anims.pagediv) this.anims.pagediv.start()
 
-    this.anims.loading_img = new this.$app.$def.animengine.SequenceAnim(
+    global.animengine.defaults.loading.CreateLoadingAnimation(this)
-      "loginPage",
+    this.anims.loading.start()
-      loading_img_src,
-      28,
-      "/common/seqanims/loading/icons8-loading-*.png",
-      1000,
-      true
-    )
-    if (this.anims.loading_img) this.anims.loading_img.start()
 
     this.GetQR()
   }

src/pages/app/features/dynamic/dynamic.less

@@ -4,12 +4,14 @@
 // 瀑布流总框架
 .waterfall {
     flex-direction: row;
-    align-items: center;
     justify-content: center;
-    width: 340px;
+    width: 400px;
 }
 
 // 竖向瀑布流框架
 .waterfall-column {
-    .flex-column(0, @blankColor);
+    .flex-column(10px, @blankColor);
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-top: 0px;
 }

src/pages/app/features/dynamic/dynamic.ux

@@ -1,55 +1,71 @@
 <import name="switch-bar" src="@components/SwitchBar/SwitchBar.ux"></import>
-<import name="dynamic-show" src="@components/Dynamic/Dynamic.ux"></import>
+<import name="dyn-show" src="@components/DynShow/DynShow.ux"></import>
 
 <template>
   <div class="page">
-    <scroll class="scroll">
+    <image style="position: absolute; left: 0px" src="{{this.$app.$def.bgimg.GetBackgroundImageSrc()}}"></image>
+    <scroll class="scroll" scroll-y="true">
       <switch-bar title="动态" static></switch-bar>
-      <div class="waterfall">
+      <div class="waterfall" if="show_content">
         <div class="waterfall-column">
-          <dynamic-show for="{{dynamic.items}}"></dynamic-show>
+          <dyn-show for="{{dynamic.render_split_1}}" dyn="{{$item}}"></dyn-show>
         </div>
         <div class="waterfall-column">
-
+          <dyn-show for="{{dynamic.render_split_2}}" dyn="{{$item}}"></dyn-show>
         </div>
       </div>
+      <text style="margin-top: 25px"></text>
     </scroll>
+    <image style="position: absolute; margin-top: 245px" if="{{anims.show_loading}}" src="{{anims.loading_src.value}}"></image>
   </div>
 </template>
 
 <script>
 export default {
   private: {
+    show_content: false,
+    anims: {
+      show_loading: false
+    },
     dynamic: {
-      items: [
+      render_split_1: {},
-        // 带图动态
+      render_split_2: {}
-        {
-          id_str: "xxx",
-          type: "DYNAMIC_TYPE_DRAW",
-          modules: {
-            module_author: {
-              face: "https://i2.hdslb.com/bfs/face/779056d80a36cbd1ae276067e208007ae0da18f6.jpg",
-              name: "OneMicroSpace"
-            },
-            module_dynamic: {
-              desc: {
-                text: "SpaceX龙飞船下一次发射即将开始"
-              },
-              major: {
-                type: "MAJOR_TYPE_DRAW",
-                draw: {
-                  items: [
-                    {
-                      src: "https://i0.hdslb.com/bfs/new_dyn/3f30beecf4c48a263e658b6a5d92ed2413945088.jpg"
-                    }
-                  ]
-                }
-              }
-            }
-          }
-        }
-      ]
     }
+  },
+  SplitWaterfallArea(arr) {
+    const arr1 = [];
+    const arr2 = [];
+
+    arr.forEach((value, index) => {
+        if (index % 2 === 0) {
+            arr1.push(value);
+        } else {
+            arr2.push(value);
+        }
+    });
+
+    return { arr1, arr2 };
+  },
+  async LoadDynamics(){
+    try{
+      this.anims.loading.start()
+
+      var dynamic = await this.$app.$def.biliclient.getDynamicList()
+      var split_result = this.SplitWaterfallArea(dynamic.items)
+      this.dynamic.render_split_1 = split_result.arr1
+      this.dynamic.render_split_2 = split_result.arr2
+
+      this.anims.loading.stop()
+      this.anims.show_loading = false
+      this.show_content = true
+    }
+    catch(e){
+      global.logger.error(e.toString())
+    }
+  },
+  onReady(){
+    global.animengine.defaults.loading.CreateLoadingAnimation(this)
+    this.LoadDynamics()
   }
 }
 </script>

src/pages/app/features/main/main.ux

@@ -7,7 +7,7 @@
     <scroll scroll-y="true" class="scroll" bounces="true">
       <switch-bar title="main.title"></switch-bar>
       <text class="tip">{{ funnytip }}</text>
-      <image style="position: absolute; margin-top: 265px" if="{{show_loading}}" src="{{anims.loading_src.value}}">
+      <image style="position: absolute; margin-top: 265px" if="{{anims.show_loading}}" src="{{anims.loading_src.value}}">
       </image>
       <div class="recommend_div" if="{{show_recommend_div}}">
         <videoshow for="{{recommend_vids}}" video="{{$item}}" tid="vids"></videoshow>
@@ -31,12 +31,10 @@ import prompt from "@system.prompt"
 export default {
   private: {
     recommend_vids: [],
-    show_loading: true,
     show_recommend_div: false,
     funnytip: "",
     anims: {
-      loading: null,
+      show_loading: false,
-      loading_src: {value: "/common/seqanims/loadingWhite/icons8-loading_颜色反转-1.png"},
       refresh: null,
       showRefreshFX: false,
       refresh_bottom: {value: "-350"}
@@ -46,7 +44,7 @@ export default {
   async Refresh() {
     if (!this.anims.showRefreshFX) {
       this.recommend_vids = []
-      this.show_loading = true
+      this.anims.show_loading = true
       this.show_recommend_div = false
       this.anims.showRefreshFX = true
 
@@ -76,7 +74,7 @@ export default {
       prompt.showToast({message: "获取推荐视频失败，请重试。"})
     } finally {
       this.anims.loading.stop()
-      this.show_loading = false
+      this.anims.show_loading = false
       this.show_recommend_div = true
     }
   },
@@ -98,14 +96,7 @@ export default {
   onReady() {
     const {loading_src, refresh_bottom} = this.anims
 
-    this.anims.loading = new this.$app.$def.animengine.SequenceAnim(
+    global.animengine.defaults.loading.CreateLoadingAnimation(this)
-      "mainPage",
-      loading_src,
-      28,
-      "/common/seqanims/loadingWhite/icons8-loading_颜色反转-*.png",
-      1000,
-      true
-    )
     this.anims.loading.start()
 
     this.anims.refresh = new this.$app.$def.animengine.DomAnim(

src/pages/article/articleshow/articleshow.ux

@@ -4,7 +4,7 @@
 <template>
   <div class="page">
     <title-bar title="专栏阅读" static></title-bar>
-    <image style="position: absolute; margin-top: 245px" if="{{show_loading}}" src="{{anims.loading_src.value}}"></image>
+    <image style="position: absolute; margin-top: 245px" if="{{anims.show_loading}}" src="{{anims.loading_src.value}}"></image>
     <div if="{{showarticle}}" class="articlebox">
       <div class="infobox">
         <text class="title">{{ article.readInfo.title }}</text>
@@ -41,12 +41,11 @@ export default {
     article: {},
     article_content: {},
     showarticle: false,
-    show_loading: false,
+    
     current_page_num: 0,
     max_page_num: 0,
     anims: {
-      loading: null,
+      show_loading: false
-      loading_src: {value: "/common/seqanims/loadingWhite/icons8-loading_颜色反转-1.png"}
     }
   },
   SplitArticle(arr, split_count) {
@@ -57,7 +56,7 @@ export default {
     return result;
   },
   async LoadArticle() {
-    this.show_loading = true
+    this.anims.show_loading = true
     this.anims.loading.start()
 
     // 预留加载delay以避免页面切换的卡顿
@@ -85,7 +84,7 @@ export default {
         global.logger.log(JSON.stringify(this.article_content))
 
         this.anims.loading.stop()
-        this.show_loading = false
+        this.anims.show_loading = false
         global.runGC()
         this.showarticle = true
       }
@@ -95,15 +94,7 @@ export default {
     }, 1000)
   },
   onInit() {
-    this.anims.loading = new this.$app.$def.animengine.SequenceAnim(
+    global.animengine.defaults.loading.CreateLoadingAnimation(this)
-      "articleShowPage",
-      this.anims.loading_src,
-      28,
-      "/common/seqanims/loadingWhite/icons8-loading_颜色反转-*.png",
-      1000,
-      true
-    )
-
     this.LoadArticle()
   }
 }

src/pages/folders/favfolders/favfolders.ux

@@ -3,7 +3,7 @@
 <template>
     <div class="page">
         <title-bar title="favfolders.title"></title-bar>
-        <image style="position: absolute; margin-top: 245px" if="{{show_loading}}" src="{{anims.loading_src.value}}">
+        <image style="position: absolute; margin-top: 245px" if="{{anims.show_loading}}" src="{{anims.loading_src.value}}">
         </image>
         <list style="width: 77%; height: 100%" class="folderlist">
             <list-item type="folders" class="folder" for="{{folders}}"
@@ -27,10 +27,8 @@ import router from "@system.router"
 export default {
   private: {
     folders: [],
-    show_loading: true,
     anims: {
-      loading: null,
+      show_loading: false
-      loading_src: {value: "/common/seqanims/loadingWhite/icons8-loading_颜色反转-1.png"}
     }
   },
   public: {
@@ -53,21 +51,12 @@ export default {
     } catch (error) {
       global.logger.error("加载收藏夹时发生错误:", error)
     } finally {
-      this.show_loading = false
+      this.anims.show_loading = false
       this.anims.loading.stop()
     }
   },
   onInit() {
-    const {loading_src} = this.anims
+    global.animengine.defaults.loading.CreateLoadingAnimation(this)
-    this.anims.loading = new this.$app.$def.animengine.SequenceAnim(
-      "favfoldersPage",
-      loading_src,
-      28,
-      "/common/seqanims/loadingWhite/icons8-loading_颜色反转-*.png",
-      1000,
-      true
-    )
-
     this.anims.loading.start()
     this.LoadFolders()
   },

src/pages/folders/favfolders/foldervideos/foldervideos.ux

@@ -25,7 +25,7 @@
         <videoshow video="{{$item}}" for="{{foldervid_vids}}"></videoshow>
     </div>
     <text style="margin-top: 25px"></text>
-    <image style="position: absolute; margin-top: 265px" if="{{show_loading}}" src="{{anims.loading_src.value}}"></image>
+    <image style="position: absolute; margin-top: 265px" if="{{anims.show_loading}}" src="{{anims.loading_src.value}}"></image>
   </div>
 </template>
 
@@ -37,10 +37,8 @@ export default {
     foldervid_vids: [],
     current_pn: 1,
     maxpn: 0,
-    show_loading: true,
     anims: {
-      loading: null,
+      show_loading: false
-      loading_src: {value: "/common/seqanims/loadingWhite/icons8-loading_颜色反转-1.png"}
     }
   },
   public: {
@@ -73,7 +71,7 @@ export default {
     return isLastItem ? "80px" : "0px"
   },
   async LoadVideos() {
-    this.show_loading = true
+    this.anims.show_loading = true
     this.foldervid_vids = [] // Clear Array
     this.anims.loading.start()
 
@@ -92,7 +90,7 @@ export default {
     } catch (error) {
       global.logger.error("加载视频时发生错误:", error)
     } finally {
-      this.show_loading = false
+      this.anims.show_loading = false
       this.anims.loading.stop()
     }
   },
@@ -100,15 +98,7 @@ export default {
     this.maxpn = Math.ceil(this.vidcount / 5)
     global.logger.log("maxpn=" + this.maxpn)
 
-    this.anims.loading = new this.$app.$def.animengine.SequenceAnim(
+    global.animengine.defaults.loading.CreateLoadingAnimation(this)
-      "folderVideosPage",
-      this.anims.loading_src,
-      28,
-      "/common/seqanims/loadingWhite/icons8-loading_颜色反转-*.png",
-      1000,
-      true
-    )
-
     this.LoadVideos()
   }
 }

src/pages/folders/history/history.ux

@@ -4,7 +4,7 @@
 <template>
     <div class="page">
         <title-bar title="history.title"></title-bar>
-        <image style="position: absolute; margin-top: 245px" if="{{show_loading}}" src="{{anims.loading_src.value}}">
+        <image style="position: absolute; margin-top: 245px" if="{{anims.show_loading}}" src="{{anims.loading_src.value}}">
         </image>
         <div class="historylist">
           <videoshow for="{{history}}" video="{{$item}}"></videoshow>
@@ -18,14 +18,12 @@ import router from "@system.router"
 export default {
   private: {
     history: null,
-    show_loading: false,
     anims: {
-      loading: null,
+      show_loading: false
-      loading_src: {value: "/common/seqanims/loadingWhite/icons8-loading_颜色反转-1.png"}
     }
   },
   async LoadHistory(){
-    this.show_loading = true
+    this.anims.show_loading = true
     this.history = []
     this.anims.loading.start()
 
@@ -41,7 +39,7 @@ export default {
     } catch (error) {
       global.logger.error("加载历史记录时发生错误:", error)
     } finally {
-      this.show_loading = false
+      this.anims.show_loading = false
       this.anims.loading.stop()
     }
   },
@@ -52,15 +50,7 @@ export default {
     })
   },
   onInit(){
-    this.anims.loading = new this.$app.$def.animengine.SequenceAnim(
+    global.animengine.defaults.loading.CreateLoadingAnimation(this)
-      "historyVideosPage",
-      this.anims.loading_src,
-      28,
-      "/common/seqanims/loadingWhite/icons8-loading_颜色反转-*.png",
-      1000,
-      true
-    )
-
     this.LoadHistory()
   }
 }

src/pages/message/dmlist/dmlist.ux

@@ -3,7 +3,7 @@
 <template>
   <div class="page">
     <title-bar title="dmlist.title"></title-bar>
-    <image style="position: absolute; margin-top: 245px" if="{{show_loading}}" src="{{anims.loading_src.value}}"></image>
+    <image style="position: absolute; margin-top: 245px" if="{{anims.show_loading}}" src="{{anims.loading_src.value}}"></image>
     <div class="dmlist" for="{{sessions}}" if="{{show_dmlist}}">
       <div class="user" onclick="GoDMPage({{$item.talker_id}})">
         <image class="userface" src="{{session_cards[$item.talker_id].face}}@75w_75h" alt="/common/fullgray.png"></image>
@@ -33,18 +33,17 @@ export default {
   private: {
     sessions: [],
     session_cards: {},
-    show_loading: false,
+    
     show_dmlist: false,
     Show20UserLimit: false,
     anims: {
-      loading: null,
+      show_loading: false
-      loading_src: {value: "/common/seqanims/loadingWhite/icons8-loading_颜色反转-1.png"}
     }
   },
   async InitSessions(){
     try{
       this.anims.loading.start()
-      this.show_loading = true
+      this.anims.show_loading = true
 
       this.sessions = (await this.$app.$def.biliclient.getDMSessions(1, 2)).session_list
       // 裁切至10个
@@ -64,7 +63,7 @@ export default {
       this.session_cards = await this.$app.$def.biliclient.getMultiUserInfoByUID(session_uids)
 
       this.anims.loading.stop()
-      this.show_loading = false
+      this.anims.show_loading = false
       this.Show20UserLimit = true
       this.show_dmlist = true
     }
@@ -84,15 +83,7 @@ export default {
     })
   },
   onInit(){
-    this.anims.loading = new this.$app.$def.animengine.SequenceAnim(
+    global.animengine.defaults.loading.CreateLoadingAnimation(this)
-      "dmlistPage",
-      this.anims.loading_src,
-      28,
-      "/common/seqanims/loadingWhite/icons8-loading_颜色反转-*.png",
-      1000,
-      true
-    )
-
     this.InitSessions()
   }
 }

src/pages/message/dmpage/dmpage.ux

@@ -3,7 +3,7 @@
 
 <template>
   <div class="page">
-    <image style="position: absolute; margin-top: 233px" if="{{show_loading}}" src="{{anims.loading_src.value}}"></image>
+    <image style="position: absolute; margin-top: 233px" if="{{anims.show_loading}}" src="{{anims.loading_src.value}}"></image>
     <scroll class="scroll" scroll-y="true" id="mainscroll" bounces="true">
       <div for="{{messages}}">
         <div class="targetmsg-container" if="{{$item.receiver_id == myId}}">
@@ -79,10 +79,8 @@ export default {
       }
     ],
     inputmode: false,
-    show_loading: true,
     anims: {
-      loading: null,
+      show_loading: false
-      loading_src: {value: "/common/seqanims/loadingWhite/icons8-loading_颜色反转-1.png"}
     },
     input_text: ""
   },
@@ -180,8 +178,8 @@ export default {
         setTimeout(this.ScrollToEnd, 500)
       }
 
-      if (initial && this.show_loading) {
+      if (initial && this.anims.show_loading) {
-        this.show_loading = false
+        this.anims.show_loading = false
         this.anims.loading.stop()
       }
 
@@ -210,14 +208,7 @@ export default {
     clearInterval(this.messageUpdateInterval)
   },
   onInit() {
-    this.anims.loading = new this.$app.$def.animengine.SequenceAnim(
+    global.animengine.defaults.loading.CreateLoadingAnimation(this)
-      "dmPage",
-      this.anims.loading_src,
-      28,
-      "/common/seqanims/loadingWhite/icons8-loading_颜色反转-*.png",
-      1000,
-      true
-    )
     this.anims.loading.start()
   }
 }

src/pages/reply/replys/replys.ux

@@ -9,7 +9,7 @@
 <template>
   <div class="page">
     <title-bar title="{{titletext}}"></title-bar>
-    <image style="position: absolute; margin-top: 245px" if="{{show_loading}}" src="{{anims.loading_src.value}}"></image>
+    <image style="position: absolute; margin-top: 245px" if="{{anims.show_loading}}" src="{{anims.loading_src.value}}"></image>
     <list class="replylist">
       <list-item type="replies"
         style="width: 100%; justify-content: center; margin-top: 10px; height: {{PlaceHolderShowCheck($item.rpid)}}"
@@ -41,10 +41,8 @@ export default {
     replies: [],
     maxpn: 1,
     current_pn: 1,
-    show_loading: false,
     anims: {
-      loading: null,
+      show_loading: false
-      loading_src: {value: "/common/seqanims/loadingWhite/icons8-loading_颜色反转-1.png"}
     },
     replymode: false,
     reply_target: null,
@@ -121,7 +119,7 @@ export default {
   },
   async LoadReplies() {
     this.replies = []
-    this.show_loading = true
+    this.anims.show_loading = true
     this.anims.loading.start()
 
     try {
@@ -140,7 +138,7 @@ export default {
       prompt.showToast({message: "加载评论失败，请重试。", duration: 4000})
     } finally {
       this.anims.loading.stop()
-      this.show_loading = false
+      this.anims.show_loading = false
       global.runGC()
     }
   },
@@ -148,15 +146,7 @@ export default {
     this.maxpn = Math.ceil(this.replycount / 10)
     global.logger.log("maxpn=", this.maxpn)
 
-    this.anims.loading = new this.$app.$def.animengine.SequenceAnim(
+    global.animengine.defaults.loading.CreateLoadingAnimation(this)
-      "replysPage",
-      this.anims.loading_src,
-      28,
-      "/common/seqanims/loadingWhite/icons8-loading_颜色反转-*.png",
-      1000,
-      true
-    )
-
     if (this.secmode) {
       this.titletext = "子评论"
     }

src/pages/search/search/search.ux

@@ -18,7 +18,7 @@
       <text class="hotword-text">{{ $item.show_name }}</text>
     </div>
     <text style="margin-top: 25px"></text>
-    <image style="position: absolute; margin-top: 305px" if="{{show_loading}}" src="{{anims.loading_src.value}}"></image>
+    <image style="position: absolute; margin-top: 305px" if="{{anims.show_loading}}" src="{{anims.loading_src.value}}"></image>
     <full-screen-input style="position: absolute" if="{{input_mode}}" @send="GoSearch" @exit="ExitInput"></full-screen-input>
   </div>
 </template>
@@ -29,11 +29,9 @@ export default {
   private: {
     hotwords: {},
     showHotwordsList: false,
-    show_loading: true,
     input_mode: false,
     anims: {
-      loading: null,
+      show_loading: false
-      loading_src: {value: "/common/seqanims/loadingWhite/icons8-loading_颜色反转-1.png"}
     },
   },
   ExitInput() {
@@ -52,24 +50,17 @@ export default {
     this.input_mode = true
   },
   async GetHotWords() {
-    this.show_loading = true
+    this.anims.show_loading = true
     this.anims.loading.start()
 
     this.hotwords = await this.$app.$def.biliclient.getSearchHotwords()
     this.showHotwordsList = true
 
     this.anims.loading.stop()
-    this.show_loading = false
+    this.anims.show_loading = false
   },
   onInit() {
-    this.anims.loading = new this.$app.$def.animengine.SequenceAnim(
+    global.animengine.defaults.loading.CreateLoadingAnimation(this)
-      "searchPage",
-      this.anims.loading_src,
-      28,
-      "/common/seqanims/loadingWhite/icons8-loading_颜色反转-*.png",
-      1000,
-      true
-    )
   },
   onShow(){
     this.GetHotWords()

src/pages/search/searchresult/searchresult.ux

@@ -19,7 +19,7 @@
         <text class="typetext" style="color: {{typebar_colors.c4}}; margin-left: 20px;">{{ $t("searchresult.article") }}</text>
       </div>
       <swiper indicator="false" @change="UpdateTypeBarColors" class="swipermain" style="margin-top: 15px"
-        if="{{!show_loading}}" duration="10">
+        if="{{!anims.show_loading}}" duration="10">
         <div class="swiper_box">
           <scroll class="swiper_container" scroll-y="true" if="{{typebar_if.c1}}" @scroll="ScrollOverviewCheck">
             <div class="tiplabel" if="{{comprehensive_status.has_users_result}}">
@@ -70,7 +70,7 @@
         </div>
       </swiper>
     </scroll>
-    <image style="position: absolute; margin-top: 305px" if="{{show_loading}}" src="{{anims.loading_src.value}}"></image>
+    <image style="position: absolute; margin-top: 305px" if="{{anims.show_loading}}" src="{{anims.loading_src.value}}"></image>
   </div>
 </template>
 
@@ -80,7 +80,6 @@ export default {
   private: {
     search: {},
     overview_mode: false,
-    show_loading: true,
     comprehensive_status: {
       has_users_result: true,
       has_video_result: true
@@ -98,9 +97,7 @@ export default {
       c4: false
     },
     anims: {
-      loading: null,
+      show_loading: false
-      loading_src: {value: "/common/seqanims/loadingWhite/icons8-loading_颜色反转-1.png"},
-      loading_position: "305"
     }
   },
   public: {
@@ -247,7 +244,7 @@ export default {
     }
   },
   async DoSearch() {
-    this.show_loading = true
+    this.anims.show_loading = true
     this.anims.loading.start()
 
     // 搜视频+推荐用户
@@ -261,22 +258,14 @@ export default {
 
     await this.PatchSearchResult()
 
-    this.show_loading = false
+    this.anims.show_loading = false
     this.anims.loading.stop()
   },
   onInit() {
     global.runGC()
     this.UpdateTypeBarColors({index: 0})
 
-    this.anims.loading = new this.$app.$def.animengine.SequenceAnim(
+    global.animengine.defaults.loading.CreateLoadingAnimation(this)
-      "searchresultPage",
-      this.anims.loading_src,
-      28,
-      "/common/seqanims/loadingWhite/icons8-loading_颜色反转-*.png",
-      1000,
-      true
-    )
-
     this.DoSearch()
   }
 }