git.iko.soy/skrepka
on master help sign in
Implement smooth button animation with programmatic TransformOperations and Component state
96a28d4iko
client/Buttons.fs+26−28
compare with master
unifiedsplit
@@ -7,28 +7,31 @@ open Fabulous.Avalonia
7open type Fabulous.Avalonia.View
7open type Fabulous.Avalonia.View
8
8
9module Buttons =
9module Buttons =
10+ open Avalonia.Media.Transformation
11+ open System
10
12
11− let button (text: string) (msg: 'msg) =
13+ let private animationDuration: int64 = 60
12− let shadowRef = ViewRef<Avalonia.Controls.Shapes.Rectangle>()
14+
13−
15+ let private translate x y =
14− let animate pressed =
16+ let b = TransformOperations.CreateBuilder 1
15− match shadowRef.TryValue with
17+ b.AppendTranslate(x, y)
16− | None -> ()
18+ b.Build() :> ITransform
17− | Some c ->
18− let offset = if pressed then 4. else 12.
19− match c.RenderTransform with
20− | :? TranslateTransform as t ->
21− t.X <- offset
22− t.Y <- offset
23− | _ ->
24− c.RenderTransform <- TranslateTransform(offset, offset)
25
19
20+ let button (text: string) (msg: 'msg) =
26 Component(text) {
21 Component(text) {
22+ let! pressed = Context.State(false)
23+ let offset = if pressed.Current then 4. else 8.
24+
27− Grid() {
25+ (Grid() {
28 Rectangle()
26 Rectangle()
29− .reference(shadowRef)
30 .fill(SolidColorBrush(Colors.Black))
27 .fill(SolidColorBrush(Colors.Black))
31− .renderTransform (TranslateTransform(12., 12.))
28+ .renderTransform(translate offset offset)
29+ .transition (
30+ TransformOperationsTransition(
31+ Avalonia.Visual.RenderTransformProperty,
32+ TimeSpan.FromMilliseconds animationDuration
33+ )
34+ )
32
35
33 Rectangle().fill (SolidColorBrush(Constants.accentColor))
36 Rectangle().fill (SolidColorBrush(Constants.accentColor))
34
37
@@ -39,15 +42,10 @@ module Buttons =
39 .fontWeight(FontWeight.Bold)
42 .fontWeight(FontWeight.Bold)
40 .center()
43 .center()
41 .margin (8.)
44 .margin (8.)
42−
45+ })
43− Button(msg, Rectangle().strokeThickness(4.).stroke(SolidColorBrush(Colors.Black)).margin (-3.))
46+ .background(Brushes.Transparent)
44− .onPointerPressed(fun _ -> animate true)
47+ .onPointerPressed(fun _ -> pressed.Set true)
45− .onPointerReleased(fun _ -> animate false)
48+ .onPointerReleased(fun _ -> pressed.Set false)
46− .onPointerExited(fun _ -> animate false)
49+ .onPointerExited(fun _ -> pressed.Set false)
47− .background(Brushes.Transparent)
50+ .onTapped (fun _ -> msg)
48− .borderThickness(0.)
49− .padding(0.)
50− .horizontalAlignment(Avalonia.Layout.HorizontalAlignment.Stretch)
51− .verticalAlignment (Avalonia.Layout.VerticalAlignment.Stretch)
52− }
53 }
51 }