Skill Sprint: Using Effects, Animations & Transitions on FireMonkey Components

by Feb 9, 2016

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


Delphi Replay

C++Builder Replay