Author: Developer Skill Sprints

Learn to apply Effects, Animations & Transitions on FireMonkey controls.

Why Use Animations, Transitions and Effects?

• Give you user interface life
• Make application more interactive
• Keep users attention
• Use motion to provide meaning
• Implement Google’s Material Design
• Skumorphic behavior
• Less code and better UI performance
• Add affordance to user interface

FireMonkey Basics

• Anything can be nested
• Most numeric properties are a single & animatable
  • Position (X, Y), RotationCenter, Scale, Size (Height & Width), Opacity, & RotationAngle
• Use MakeScreenshot method to get Bitmap of layout
• VCL Developers Guide to FireMonkey by Robert Love, MVP – On YouTube from CodeRage 8

---

Animations 

• Modify property values over duration
• Automatic or manual start
• Optional delay, loop, inverse, etc.
• Triggers (or True or False)
  • IsMouseOver, IsDragOver, IsFocused, IsVisible, IsPressed, IsChecked, IsSelected, IsExpanded
• Events OnProcess & OnFinish
• Can also use the Animate* methods
• Note: Multiple animation instances are not necessarily synchronized (noticeable over time).

Interpolation

• Determines how the rate of the value changes over time
• Linear is default and changes at a constant rate
  • All options: Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back, & Bounce
• AnimationType controls how Interpolation is applied (start vs. end)
  • In – The curve applies to the starting value of the property animated.
  • Out – The curve applies to the ending value of the property animated and proceeds backwards to the starting value.
  • InOut – The curve applies to the both the starting value and the ending value of the property animated and meets at the center point.

Effects 

• Over 40 GPU powered effects (not counting transition effects)
• Built using shader filters
• Supports optional trigger for automatic enable or disable
• Apply to image or control

Transition Effects 

• Over 20 Transition Effects
• A subset of regular Effects
• Changes parent image (or control) into target image
• Progress property represents percentage of application (can be animated over time)
• For control transitions use MakeScreenshot to get Target image

Code Samples

• ShaderFilters Sample (Ships with Delphi & RAD Studio 10 Seattle)
  • \Samples\Object Pascal\Multi-Device Samples\User Interface
• Samples from Skill Sprint (GitHub) – updated with Page Turn sample

---