JS LCD 切换示例分享

$ H: s% C1 r5 J& n4 U这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   * m+ q- K) h; T& u: q4 ]
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   
7. 
   
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   ! N" b. F2 v4 l- ^
10.     bounds = font.getStringBounds(str, frc);
    
11.     return Math.ceil(bounds.getWidth());
    
12. }
    7 D7 Z& _+ {$ U4 Q4 n
13. 
    0 L6 E0 V0 Q4 X2 q; U, X! `
14. da = (g) => {//底图绘制
    $ x0 r# w5 Z4 a- Q& g
15.     g.setColor(Color.BLACK);
    % i" O: o/ M" \- I  \
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    ' {* W1 D2 ]2 I9 e
18. 
    
19. db = (g) => {//上层绘制
    
20.     g.setColor(Color.WHITE);
      m( B2 R$ D$ @( m
21.     g.fillRect(0, 0, 400, 400);
    " j- \' O/ a/ J3 A9 g8 B
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    + S( _0 U: R: B7 ^1 T6 p
24.     let str = "晴纱是男娘";
    
25.     let ww = 400;
    
26.     let w = getW(str, font0);
    , T7 |$ q0 c7 j, e  H! ]* E3 P3 W
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    
29. 
    + s, K- L7 f9 ]3 M4 W
30. const mat = new Matrices();
    / v9 f/ `5 w3 d" k8 L
31. mat.translate(0, 0.5, 0);
    
32. 
    - e: Q/ f* t% z
33. function create(ctx, state, entity) {
    # i1 V) t- ^+ a! _7 l
34.     let info = {
    & @$ H7 Q4 h8 O: r- h
35.         ctx: ctx,
    0 i' D$ B! Y5 ~' C/ M5 t
36.         isTrain: false,
    * \0 L( ]1 }/ V, |+ S
37.         matrices: [mat],
    ! Q& e* E* |3 Q
38.         texture: [400, 400],
    1 G$ N3 t8 O$ J3 k! n9 N
39.         model: {
    & |/ ~; U8 I; l/ x- Q8 l' s- y8 h
40.             renderType: "light",
    
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    4 t1 ^7 X+ O4 P; [
43.         }
    
44.     }
    ( d) L0 B6 I2 K3 a( X3 w
45.     let f = new Face(info);
    8 G! t) B' Y4 |& N1 f" r
46.     state.f = f;
    
47. 
    
48.     let t = f.texture;
    ( p/ J2 [: G# c; a" J
49.     let g = t.graphics;
      Q5 l- b2 [; d; z8 E" P
50.     state.running = true;
    
51.     let fps = 24;
    
52.     da(g);//绘制底图
    
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    9 l  e# Y% V7 ?! O( B2 ?
57.     smooth = (k, v) => {// 平滑变化
    9 x2 ~3 W2 f  i9 \$ z2 M
58.         if (v > k) return k;
      w* ?+ R3 _. {: C5 o7 ~9 ^
59.         if (k < 0) return 0;
    
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    9 q* b" v3 m" ^, Q) T
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    
65.         while (state.running) {
    
66.             try {
    5 `, c, Q9 }( C1 p
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    ; ~4 j) z4 a: U8 G, o8 p8 Q. L# ]
68.                 ti = Date.now();
    ) g. r" j5 ^$ D5 A
69.                 if (k > 1.5) {
    6 }' R) }2 L- P+ L- k
70.                     k = 0;
    
71.                 }
    
72.                 setComp(g, 1);
    & u- D5 C" l& a4 W" I7 Q* Z: z
73.                 da(g);
    
74.                 let kk = smooth(1, k);//平滑切换透明度
    ' s  h% p4 t6 ]: }
75.                 setComp(g, kk);
    
76.                 db(g);
    : `4 `% u" O, l7 ~+ G0 y
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    + d* [3 z2 j5 S! w
79.                 ctx.setDebugInfo("k", k);
    
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    , j. ~+ P* `1 u$ W( S! {- G4 C3 B( h
82.                 Thread.sleep(ck(rt - 1000 / fps));
    
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    
85.                 ctx.setDebugInfo("error", e);
    3 h$ {# C9 |4 g/ y
86.             }
    
87.         }
    
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    * w$ S/ g& {; L
91.     th.start();
    
92. }
    
93. 
    
94. function render(ctx, state, entity) {
    ( k; R7 i) x* H+ @( V; B
95.     state.f.tick();
    7 e$ S1 b( M' ^4 h
96. }
    
97. 
    - i. y# Y, X# M% x
98. function dispose(ctx, state, entity) {
    " v; @( X% e& T+ @# o" _+ J3 V
99.     print("Dispose");
    
100.     state.running = false;
     $ S0 r4 }8 _. |# r: S5 T7 K
101.     state.f.close();
     
102. }
     
103. 
     9 Z; f6 }5 Q; w) W! s
104. function setComp(g, value) {
     ' [3 H. s$ I/ p0 `4 k$ m
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     
106. }

复制代码

% J( [* `# C" G* y- e( {/ R写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。

) {  j3 D3 Y' ^; u, w9 p, b
4 D0 P- i6 X- _6 `* e# c) M顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)

看不懂，但我大受震撼

全场最瞩目：晴纱是男娘[狗头保命]
! W- K8 v$ q5 I+ u7 k. X# ?

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

5 M4 }' a( u3 E) t# n甚至双引号里面的自动加粗