JS LCD 切换示例分享

2 n* W: s$ }+ f0 V5 m' N这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   : c3 b0 ~$ ?( ^9 K* U4 P
5. 
   % u" S% H- U4 C& S( d" |
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   0 ^: Z" z, G8 f. W. _
7. 
   
8. function getW(str, font) {
   & x; m6 Z' u* _0 y. i! i" ^
9.     let frc = Resources.getFontRenderContext();
   7 g; a8 I; u/ e1 t4 t5 z
10.     bounds = font.getStringBounds(str, frc);
    ( n. H1 M% {4 a; H) g$ g" s
11.     return Math.ceil(bounds.getWidth());
    ' S% s4 M" I6 k$ ]% N. J
12. }
    2 _8 M* d2 O: W; m' L4 V
13. 
    
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    ' p! _# t- V! o  ^/ c
17. }
    
18. 
    # w6 N2 f* ~4 C6 ?! V+ [* h
19. db = (g) => {//上层绘制
    - e# H$ ^6 A+ X% c) g# {+ l
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    2 e( \* v$ l0 {# E7 n0 d/ R4 P
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    3 m* x" C2 w& i' d+ E
26.     let w = getW(str, font0);
    
27.     g.drawString(str, ww / 2 - w / 2, 200);
    2 P, Z6 Z4 ]5 B7 f8 N* p" N7 _
28. }
    6 e( J# Z* B' b0 M1 E5 O
29. 
    ' b* R; a8 N* p' m  b& r
30. const mat = new Matrices();
    
31. mat.translate(0, 0.5, 0);
    $ |( E8 x; ~1 d4 E
32. 
    / M; A8 G" u, ?: d
33. function create(ctx, state, entity) {
    
34.     let info = {
    ; L6 v2 y' E9 e7 I* C, T. E
35.         ctx: ctx,
    . _2 R. R: ^8 [4 h
36.         isTrain: false,
    
37.         matrices: [mat],
    
38.         texture: [400, 400],
      s! v9 z' ^( Z
39.         model: {
    0 h0 i; N! U4 u7 z0 F
40.             renderType: "light",
    
41.             size: [1, 1],
    9 |  d! X. G, i- T8 S/ X
42.             uvSize: [1, 1]
    5 |3 X; Q8 F' N0 V7 ^2 X
43.         }
    
44.     }
    
45.     let f = new Face(info);
    
46.     state.f = f;
    $ M/ L8 X. j3 ?9 ^% p
47. 
    
48.     let t = f.texture;
    # N/ ]- g7 K4 p
49.     let g = t.graphics;
      J" v4 V& `8 i6 ^0 s: g
50.     state.running = true;
    
51.     let fps = 24;
    : Z* d# z  N$ g) K: Z9 p
52.     da(g);//绘制底图
    8 U# s1 e8 R7 h" p" c
53.     t.upload();
    " Y+ s4 ~8 o% V0 h: P* l
54.     let k = 0;
    8 t; W( F0 e1 x6 t& E: X+ j
55.     let ti = Date.now();
    $ |" ~/ F1 g5 @8 [8 |. V8 `
56.     let rt = 0;
      z! q# Z5 S$ g4 |1 p' M/ \
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    ; T- G4 @+ f6 J/ W- ]2 j6 r
61.     }
    
62.     run = () => {// 新线程
    8 o5 R) |  B7 T) K# R
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    5 y9 U; ?! y7 o5 r$ P  a' X
66.             try {
    7 I* t; X. }. Y# i- `7 E
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    / Y' U2 A( N% v4 h' _8 t1 \
69.                 if (k > 1.5) {
    5 g0 E; t! V& k0 m3 S8 v
70.                     k = 0;
    . V5 M+ D- a$ ^0 U" c  ?
71.                 }
      g$ Z3 b  z7 Q' C. I+ `. A
72.                 setComp(g, 1);
    
73.                 da(g);
    / W% x3 g  R9 @  P, q
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
    ! p0 R+ v4 \0 H( g# f" B6 n1 b
77.                 t.upload();
    & ], L: i% d1 s
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    $ x. z, U- B% g( p9 \9 L, r
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    ( @5 d0 ?* p: A
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    ! k$ X; B& _1 `+ O
88.         print("Thread end:" + id);
    
89.     }
    7 F! O- `% ^& e! \8 [+ Z6 _
90.     let th = new Thread(run, "qiehuan");
    ; ~! e- r5 I+ b4 S
91.     th.start();
    + T6 D" G: B* n
92. }
    * E- g# F0 f8 z) b9 s2 u7 @
93. 
    ; ?8 J; m0 _% {1 J4 P4 ?6 b
94. function render(ctx, state, entity) {
    . \# K# u/ c, _* \6 Z, V
95.     state.f.tick();
    
96. }
    
97. 
    0 x# |3 @+ o2 Y
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    8 R2 ]8 V7 b7 I$ x
100.     state.running = false;
     
101.     state.f.close();
     * T  p6 W$ T2 Q; a8 ]8 a
102. }
     7 V0 C2 v3 Z$ O! E
103. 
     
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

0 B6 q9 ~1 v& g4 d2 d写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
0 q# n- `% N+ s; J4 i4 L/ d6 X
# J3 r2 U4 P+ G# O4 \& T
顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]

Hobbytimeblank 发表于 2024-11-16 20:38
全场最瞩目：晴纱是男娘[狗头保命]

4 U5 x) V0 r& V6 T1 T, ?/ {. w$ l甚至双引号里面的自动加粗