JS LCD 切换示例分享

这些天想了想怎么给LCD做丝滑的动画，稍微想了想，便有了下面这些代码。
' c' I4 i* m7 u! P. w  K0 m( A5 W

1. importPackage (java.lang);
   
2. importPackage (java.awt);
   
3. 
   
4. include(Resources.id("mtrsteamloco:library/code/face.js"));
   
5. 
   3 F$ s8 z. t3 q
6. const font0 = Resources.getSystemFont("Serif").deriveFont(Font.PLAIN, 80);
   ! `: C0 Q4 U1 q
7. 
   8 A0 M8 V, z0 H. f
8. function getW(str, font) {
   
9.     let frc = Resources.getFontRenderContext();
   
10.     bounds = font.getStringBounds(str, frc);
    8 ~2 V6 }) A( r1 P  m  H8 W- ^
11.     return Math.ceil(bounds.getWidth());
    / j% a# D; c/ P1 @" d7 V9 Z, O
12. }
    3 f, J% s* X& i9 G  F
13. 
    : b0 g# Q  Y9 f( R9 p
14. da = (g) => {//底图绘制
    
15.     g.setColor(Color.BLACK);
    
16.     g.fillRect(0, 0, 400, 400);
    
17. }
    6 \8 u% C! ~9 z2 `# q5 P- K# l! x
18. 
    
19. db = (g) => {//上层绘制
    0 |- \. M* j3 M1 A! W) ^' O
20.     g.setColor(Color.WHITE);
    
21.     g.fillRect(0, 0, 400, 400);
    
22.     g.setColor(Color.RED);
    
23.     g.setFont(font0);
    : p+ D; W; ]6 t* r' c( C2 t3 e+ }
24.     let str = "晴纱是男娘";
    9 T, B- u4 j) M. _/ U
25.     let ww = 400;
    8 N  j" u1 z# N( s2 G0 H1 m
26.     let w = getW(str, font0);
      e2 p$ i0 k- E8 M' |
27.     g.drawString(str, ww / 2 - w / 2, 200);
    
28. }
    
29. 
    
30. const mat = new Matrices();
    " i+ `7 C$ w% e3 M! K8 ~
31. mat.translate(0, 0.5, 0);
    , o' L2 ^( O6 N0 F
32. 
    
33. function create(ctx, state, entity) {
    - Z( A2 h" F; I4 B
34.     let info = {
    - I3 A0 }3 t# i4 ]2 \
35.         ctx: ctx,
    
36.         isTrain: false,
    
37.         matrices: [mat],
    / ~( ?3 f+ ^: \) K( V# J
38.         texture: [400, 400],
    5 G& k$ _9 J2 i+ y
39.         model: {
    ; u9 _/ F& r" {9 o, k9 L, o2 t
40.             renderType: "light",
    5 K" h/ E2 q& m+ E. B, i2 K6 }1 F
41.             size: [1, 1],
    
42.             uvSize: [1, 1]
    6 N: ]$ g5 ]" z1 }. `: X
43.         }
    - x# y9 Z3 w% a+ X: W
44.     }
    + H: L# q1 C: C9 F! s/ n
45.     let f = new Face(info);
    
46.     state.f = f;
    
47. 
    # Y* Q7 A8 W. ?( E% _
48.     let t = f.texture;
    ' V! w7 C4 d& w4 h8 j" ~& S
49.     let g = t.graphics;
    
50.     state.running = true;
    
51.     let fps = 24;
    0 F2 s# K0 V: U- H1 x' i; ]9 }; O
52.     da(g);//绘制底图
    ) s; d3 t- `* U4 B- x  @9 Q7 u6 h
53.     t.upload();
    
54.     let k = 0;
    
55.     let ti = Date.now();
    
56.     let rt = 0;
    0 X  G( N5 T) x& ~5 f9 N
57.     smooth = (k, v) => {// 平滑变化
    
58.         if (v > k) return k;
    6 A! X4 x0 m' [; m- N4 Q& ^- p0 I% n
59.         if (k < 0) return 0;
    # ~: o. o, Z# T4 F+ ?
60.         return (Math.cos(v / k * Math.PI + Math.PI) + 1) / 2 * k;
    
61.     }
    
62.     run = () => {// 新线程
    * w/ u) d4 q0 O; M8 Y! G5 @
63.         let id = Thread.currentThread().getId();
    
64.         print("Thread start:" + id);
    ( f. ?, d' k6 ]7 [; N$ _/ E+ J8 ~6 D4 T
65.         while (state.running) {
    
66.             try {
    
67.                 k += (Date.now() - ti) / 1000 * 0.2;
    
68.                 ti = Date.now();
    
69.                 if (k > 1.5) {
    ' a& T6 `5 y* W, _0 s
70.                     k = 0;
    0 I; ^1 Z6 w$ t) s0 |
71.                 }
    $ d" N* N# F  V& S; R8 a7 H1 r
72.                 setComp(g, 1);
    
73.                 da(g);
    ( a* V, U, B; W. h! J% q( R! m* p6 z9 p
74.                 let kk = smooth(1, k);//平滑切换透明度
    
75.                 setComp(g, kk);
    
76.                 db(g);
    
77.                 t.upload();
    
78.                 ctx.setDebugInfo("rt" ,Date.now() - ti);
    
79.                 ctx.setDebugInfo("k", k);
    , u7 p/ @$ c  E9 u
80.                 ctx.setDebugInfo("sm", kk);
    
81.                 rt = Date.now() - ti;
    ! J$ G2 K6 a9 M  j8 `) `4 c
82.                 Thread.sleep(ck(rt - 1000 / fps));
    # D0 `1 A7 d7 ]; a
83.                 ctx.setDebugInfo("error", 0)
    
84.             } catch (e) {
    , ?! W. ?1 e* O# m. F; m- B# i
85.                 ctx.setDebugInfo("error", e);
    
86.             }
    
87.         }
    " e; V& t8 n5 ^: Q1 R
88.         print("Thread end:" + id);
    
89.     }
    
90.     let th = new Thread(run, "qiehuan");
    
91.     th.start();
    
92. }
    , L7 C& M% r3 `% k+ w
93. 
    
94. function render(ctx, state, entity) {
    
95.     state.f.tick();
    
96. }
    
97. 
    7 R, d! p" _8 B
98. function dispose(ctx, state, entity) {
    
99.     print("Dispose");
    % `2 W3 a# A5 i6 {8 M( d( a
100.     state.running = false;
     3 P2 x* J  ~; W$ e$ a
101.     state.f.close();
     
102. }
     . z/ f7 ^% h  b+ }- _/ ~/ v
103. 
     ' I5 h# C6 N0 N
104. function setComp(g, value) {
     
105.     g.setComposite(AlphaComposite.SrcOver.derive(value));
     6 \: E' S1 F! q6 k  t) Y9 H  O6 ^
106. }

复制代码

( Q! Y. S0 p* W6 g3 M写了这么久的js，我便渐渐发觉使用 render 来写更新内容有局限性，比如说会拉高延迟.....等等(但可能也没什么影响？)。在这里我用新建 Thread (线程) 然后在新的 Thread 里来处理图片更新逻辑，实现丝滑切换。
8 v; H* G/ K+ d: i
$ t. Y1 j9 p  ]# S& S1 Y2 \: U
! n3 x7 d6 F1 l5 \+ ^# L. E顺带一提，完成的时间挺短的，一次是 2 ms 左右(当前情况下)
5 t# m, a7 p  b; M4 G

看不懂，但我大受震撼

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

Hobbytimeblank 发表于 2024-11-16 20:38
. B  \/ @/ N$ p! O全场最瞩目：晴纱是男娘[狗头保命]

- z$ S9 Y# n( l/ b+ D: W/ P甚至双引号里面的自动加粗