Blog de Gilles Vasseur - Pascal et compagnie

[Actualité] Les interpolations et fonctions d'easing avec Lazarus IV - La partie interface d'une application de test

par

, 19/01/2019 à 19h06 (3954 Affichages)

Pour un aperçu efficace des courbes d'easing, nous allons créer une application sans prétention dont l'interface ressemblera à ceci :

Nom : interface.png
Affichages : 3553
Taille : 18,1 Ko

Nous reconnaissons :

trois zones délimitées par des panneaux TPanel (un pour les contrôles de types Out ou In, un pour les contrôles de types InOut ou OutIn et un pour un composant TTrackBar afin d'ajuster la vitesse de l'animation ;
une séparation ajustable TSplitter entre les deux panneaux supérieurs afin de moduler les distances à parcourir par les contrôles animés (elle est à deviner ;-) ) ;
des boutons TButton qui serviront d'objets animés (21 dans chaque panneau : 1 pour un repère linéaire et 10 pour chaque type).

Voici le fichier LFM correspondant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
object MainForm: TMainForm
  Left = 304
  Height = 623
  Top = 197
  Width = 953
  Caption = 'Test des interpolations - © G. Vasseur 2018'
  ClientHeight = 623
  ClientWidth = 953
  OnCreate = FormCreate
  LCLVersion = '1.8.2.0'
  object pnlMain: TPanel
    Left = 10
    Height = 553
    Top = 10
    Width = 933
    Align = alClient
    BorderSpacing.Around = 10
    ClientHeight = 553
    ClientWidth = 933
    TabOrder = 0
    OnClick = btnLinear2Click
    object pnlLeft: TPanel
      Left = 1
      Height = 551
      Top = 1
      Width = 474
      Align = alLeft
      ClientHeight = 551
      ClientWidth = 474
      TabOrder = 0
      OnClick = btnLinear2Click
      object btnEaseOutBounce: TButton
        Left = 0
        Height = 25
        Top = 256
        Width = 120
        Caption = 'EaseOutBounce'
        OnClick = btnEaseOutQuadClick
        TabOrder = 0
      end
      object btnEaseOutBack: TButton
        Left = 0
        Height = 25
        Top = 232
        Width = 120
        Caption = 'EaseOutBack'
        OnClick = btnEaseOutQuadClick
        TabOrder = 1
      end
      object btnEaseOutElastic: TButton
        Left = 0
        Height = 25
        Top = 208
        Width = 120
        Caption = 'EaseOutElastic'
        OnClick = btnEaseOutQuadClick
        TabOrder = 2
      end
      object btnEaseOutCirc: TButton
        Left = 0
        Height = 25
        Top = 184
        Width = 120
        Caption = 'EaseOutCirc'
        OnClick = btnEaseOutQuadClick
        TabOrder = 3
      end
      object btnEaseOutSine: TButton
        Left = 0
        Height = 25
        Top = 136
        Width = 120
        Caption = 'EaseOutSine'
        OnClick = btnEaseOutQuadClick
        TabOrder = 4
      end
      object btnEaseOutQuint: TButton
        Left = 0
        Height = 25
        Top = 112
        Width = 120
        Caption = 'EaseOutQuint'
        OnClick = btnEaseOutQuadClick
        TabOrder = 5
      end
      object btnEaseOutQuad: TButton
        Left = 0
        Height = 25
        Top = 40
        Width = 120
        Caption = 'EaseOutQuad'
        OnClick = btnEaseOutQuadClick
        TabOrder = 6
      end
      object btnEaseOutCubic: TButton
        Left = 0
        Height = 25
        Top = 64
        Width = 120
        Caption = 'EaseOutCubic'
        OnClick = btnEaseOutQuadClick
        TabOrder = 7
      end
      object btnEaseOutQuart: TButton
        Left = 0
        Height = 25
        Top = 88
        Width = 120
        Caption = 'EaseOutQuart'
        OnClick = btnEaseOutQuadClick
        TabOrder = 8
      end
      object btnEaseOutExpo: TButton
        Left = 0
        Height = 25
        Top = 160
        Width = 120
        Caption = 'EaseOutExpo'
        OnClick = btnEaseOutQuadClick
        TabOrder = 9
      end
      object btnEaseInQuad: TButton
        Left = 1
        Height = 25
        Top = 296
        Width = 120
        Caption = 'EaseInQuad'
        OnClick = btnEaseInQuadClick
        TabOrder = 10
      end
      object btnEaseInCubic: TButton
        Left = 1
        Height = 25
        Top = 320
        Width = 120
        Caption = 'EaseInCubic'
        OnClick = btnEaseInQuadClick
        TabOrder = 11
      end
      object btnEaseInQuart: TButton
        Left = 1
        Height = 25
        Top = 344
        Width = 120
        Caption = 'EaseInQuart'
        OnClick = btnEaseInQuadClick
        TabOrder = 12
      end
      object btnEaseInQuint: TButton
        Left = 1
        Height = 25
        Top = 368
        Width = 120
        Caption = 'EaseInQuint'
        OnClick = btnEaseInQuadClick
        TabOrder = 13
      end
      object btnEaseInSine: TButton
        Left = 1
        Height = 25
        Top = 392
        Width = 120
        Caption = 'EaseInSine'
        OnClick = btnEaseInQuadClick
        TabOrder = 14
      end
      object btnEaseInExpo: TButton
        Left = 1
        Height = 25
        Top = 416
        Width = 120
        Caption = 'EaseInExpo'
        OnClick = btnEaseInQuadClick
        TabOrder = 15
      end
      object btnEaseInCirc: TButton
        Left = 1
        Height = 25
        Top = 440
        Width = 120
        Caption = 'EaseInCirc'
        OnClick = btnEaseInQuadClick
        TabOrder = 16
      end
      object btnEaseInElastic: TButton
        Left = 1
        Height = 25
        Top = 464
        Width = 120
        Caption = 'EaseInElastic'
        OnClick = btnEaseInQuadClick
        TabOrder = 17
      end
      object btnEaseInBack: TButton
        Left = 1
        Height = 25
        Top = 488
        Width = 120
        Caption = 'EaseInBack'
        OnClick = btnEaseInQuadClick
        TabOrder = 18
      end
      object btnEaseInBounce: TButton
        Left = 1
        Height = 25
        Top = 512
        Width = 120
        Caption = 'EaseInBounce'
        OnClick = btnEaseInQuadClick
        TabOrder = 19
      end
      object btnLinear: TButton
        Left = 0
        Height = 25
        Top = 8
        Width = 120
        Caption = 'Linear'
        Font.Style = [fsBold]
        OnClick = btnLinear2Click
        ParentFont = False
        TabOrder = 20
      end
    end
    object pnlRight: TPanel
      Left = 480
      Height = 551
      Top = 1
      Width = 452
      Align = alClient
      ClientHeight = 551
      ClientWidth = 452
      TabOrder = 1
      OnClick = btnLinear2Click
      object btnLinear2: TButton
        Left = 0
        Height = 25
        Top = 8
        Width = 120
        Caption = 'Linear'
        Font.Style = [fsBold]
        OnClick = btnLinear2Click
        ParentFont = False
        TabOrder = 0
      end
      object btnEaseInOutCubic: TButton
        Left = 0
        Height = 25
        Top = 320
        Width = 120
        Caption = 'EaseInOutCubic'
        OnClick = btnEaseInOutQuadClick
        TabOrder = 1
      end
      object btnEaseInOutQuart: TButton
        Left = 0
        Height = 25
        Top = 344
        Width = 120
        Caption = 'EaseInOutQuart'
        OnClick = btnEaseInOutQuadClick
        TabOrder = 2
      end
      object btnEaseOutInQuart: TButton
        Left = 0
        Height = 25
        Top = 88
        Width = 120
        Caption = 'EaseOutInQuart'
        OnClick = btnEaseOutInQuadClick
        TabOrder = 3
      end
      object btnEaseOutInCubic: TButton
        Left = 0
        Height = 25
        Top = 64
        Width = 120
        Caption = 'EaseOutInCubic'
        OnClick = btnEaseOutInQuadClick
        TabOrder = 4
      end
      object btnEaseOutInQuint: TButton
        Left = 0
        Height = 25
        Top = 112
        Width = 120
        Caption = 'EaseOutInQuint'
        OnClick = btnEaseOutInQuadClick
        TabOrder = 5
      end
      object btnEaseInOutQuint: TButton
        Left = 0
        Height = 25
        Top = 368
        Width = 120
        Caption = 'EaseInOutQuint'
        OnClick = btnEaseInOutQuadClick
        TabOrder = 6
      end
      object btnEaseOutInSine: TButton
        Left = 0
        Height = 25
        Top = 136
        Width = 120
        Caption = 'EaseOutInSine'
        OnClick = btnEaseOutInQuadClick
        TabOrder = 7
      end
      object btnEaseInOutQuad: TButton
        Left = 0
        Height = 25
        Top = 296
        Width = 120
        Caption = 'EaseInOutQuad'
        OnClick = btnEaseInOutQuadClick
        TabOrder = 8
      end
      object btnEaseOutInQuad: TButton
        Left = 0
        Height = 25
        Top = 40
        Width = 120
        Caption = 'EaseOutInQuad'
        OnClick = btnEaseOutInQuadClick
        TabOrder = 9
      end
      object btnEaseInOutSine: TButton
        Left = 0
        Height = 25
        Top = 392
        Width = 120
        Caption = 'EaseInOutSine'
        OnClick = btnEaseInOutQuadClick
        TabOrder = 10
      end
      object btnEaseOutInCirc: TButton
        Left = 0
        Height = 25
        Top = 184
        Width = 120
        Caption = 'EaseOutInCirc'
        OnClick = btnEaseOutInQuadClick
        TabOrder = 11
      end
      object btnEaseOutInElastic: TButton
        Left = 0
        Height = 25
        Top = 208
        Width = 120
        Caption = 'EaseOutInElastic'
        OnClick = btnEaseOutInQuadClick
        TabOrder = 12
      end
      object btnEaseOutInBack: TButton
        Left = 0
        Height = 25
        Top = 232
        Width = 120
        Caption = 'EaseOutInBack'
        OnClick = btnEaseOutInQuadClick
        TabOrder = 13
      end
      object btnEaseOutInBounce: TButton
        Left = 0
        Height = 25
        Top = 256
        Width = 120
        Caption = 'EaseOutInBounce'
        OnClick = btnEaseOutInQuadClick
        TabOrder = 14
      end
      object btnEaseOutInExpo: TButton
        Left = 0
        Height = 25
        Top = 160
        Width = 120
        Caption = 'EaseOutInExpo'
        OnClick = btnEaseOutInQuadClick
        TabOrder = 15
      end
      object btnEaseInOutExpo: TButton
        Left = 0
        Height = 25
        Top = 416
        Width = 120
        Caption = 'EaseInOutExpo'
        OnClick = btnEaseInOutQuadClick
        TabOrder = 16
      end
      object btnEaseInOutCirc: TButton
        Left = 0
        Height = 25
        Top = 440
        Width = 120
        Caption = 'EaseInOutCirc'
        OnClick = btnEaseInOutQuadClick
        TabOrder = 17
      end
      object btnEaseInOutElastic: TButton
        Left = 0
        Height = 25
        Top = 464
        Width = 120
        Caption = 'EaseInOutElastic'
        OnClick = btnEaseInOutQuadClick
        TabOrder = 18
      end
      object btnEaseInOutBack: TButton
        Left = 0
        Height = 25
        Top = 488
        Width = 120
        Caption = 'EaseInOutBack'
        OnClick = btnEaseInOutQuadClick
        TabOrder = 19
      end
      object btnEaseInOutBounce: TButton
        Left = 0
        Height = 25
        Top = 512
        Width = 120
        Caption = 'EaseInOutBounce'
        OnClick = btnEaseInOutQuadClick
        TabOrder = 20
      end
    end
    object Splitter1: TSplitter
      Left = 475
      Height = 551
      Top = 1
      Width = 5
    end
  end
  object pnlBottom: TPanel
    Left = 0
    Height = 50
    Top = 573
    Width = 953
    Align = alBottom
    BorderSpacing.InnerBorder = 10
    ClientHeight = 50
    ClientWidth = 953
    TabOrder = 1
    object tbarWait: TTrackBar
      Left = 11
      Height = 28
      Top = 11
      Width = 301
      Max = 100
      OnChange = tbarWaitChange
      Position = 0
      Align = alLeft
      BorderSpacing.Around = 10
      TabOrder = 0
    end
  end
end

En dehors de gestionnaires d'événements sur lesquels nous reviendrons plus tard, ce fichier reprend les noms des catégories auxquelles seront appliqués les types déjà décrits.

Après ce court billet, nous nous plongerons dans le coeur du sujet avec l'implémentation des fonctions elles-mêmes.