Author: Developer Skill Sprints
Learn to apply Effects, Animations & Transitions on FireMonkey controls.
Table of Contents
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
- 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
- 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).
- 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.
- 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
- 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
- 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