Create a program with a view like desktop Mac in Delphi using the library LayerFormEffect

For a start, we need high-quality icons, preferably in Portable Network Graphics format with alpha channel. Archive of icons for this article can be downloaded here. Create a new project, set in the form BorderStyle in bsNone and throw at her from the library the components LayerFormEffect.

Associate components lfeLayerForm1, lfeLayerEffectList1 and lfeLayerEffectControl1 together, the component lfeLayerForm1 FormNormalState property set in fsBottom. Set in lfeLayerEffectControl1 size 200 by 200.

Load the icons in lfeBitmapsList1.

I wanted to try to make the shadow of the images and the effect of light, so painted and added two more to the list of the drawing - a star and a shadow. In 6th and 7th pictures (I have an asterisk and shadow respectively) Trim the edges (the "Trim"). Preparation is completed, we will now cast over effects. A few words about how it works from the inside - a component lfeLayerEffectList1 through lfeLayerForm1 intercepts events (which are assigned effects) coming in lfeLayerEffectControl1, announced and published in the section beginning with "On". Event "OnDesigned" is used only in Design style, all the rest in the working. So let's begin. I thought of so - Icons will be a shadow, when you move the mouse, it will increase the angle of the center and after the increase will be flashing asterisk. On clicking the icon will emulate pressing. Choosing lfeLayerEffectList1, bind to a component of the effect,

assign a component event "OnDesigned"

and adding the first step.

Animation can take place in several steps (at the event "OnMouseEnter" we shall see), now only one. A few words about the effects of their figurative fall into two types, those that can be executed at any stage (three phases: initialization, animation and finalization) and those in which the procedure for performing predetermined. The first type includes discharges, cleaning, as well as the effect of "drawing component." Drawing is as follows, all actions are performed with a temporary canvas, then it is copied to the canvas component. Add to Step1 discharges matrix transformations, color matrix, and the purification of the canvas and the temporary component. Given that this event will not be an animation, put all the effects in the property TypeAnimates only lfetaInit (though here you can set and lfetaAnimate).

For high-quality display of icons we initially reduce, so choose and add effect "Scale" and set the values in section ValueAnimate 0.75, TypeScale in tsRightBottom:

Add effect "Move", in the section ValueAnimate set -25 (we will need to put a shadow under the icon), add effect "Draw on the canvas" with Image=0 and ImageState=isRightBottom. Let's add a shadow under the icon, add "Move" c -6, 22 coordinates in section ValueAnimate , the "Draw on the canvas" Image=7 and ImageState=isRightBottom. And at the end add "Draw components" with lfetaAnimate = True. Click test:

Choose event "OnDesigned", copy it and paste in the "OnLoad", "OnMouseDown", "OnMouseUp" In the last two events remove the effect of scale and work with the movement of "OnMouseDown" (the first "Move" set of -20 -20, the second -4, 19). Further work is with the size of the image, do so - choose "OnMouseUp" and click test. Now on form adjust the sizes of a component so that the image in it fits:

Adding to form another 4-th component. Select the "Collection of Effects" lfeLayerEffectControl1, copy and paste the tree effects on the newly created ones. We change all the components in effect "Paint on canvas" of the image on the dates and customize their sizes by the method described above:

Return to the first component. Choose event "OnDesigned", copy it and paste in the "OnMouseEnter". As implied animation, do the following:

• the effects of the "Reset transformation matrix", "Clear component", "Clear the canvas" lfetaAnimate = True;
• the scale set up:

i.e. we will change linearly scales for both coordinates from 0.75 to 1 in 10 easy steps. With the first step of all, add the step 2 and step 3. Give the order of effects and their settings:

Step2

1. "Clear the canvas, Reset the matrix color, Reset transformation matrix", "Clear component" set lfetaAnimate = True;
2. "Drawing canvas" do not change (i.e. we copied the canvas previous step on the canvas this step);
3. "Draw component", "Clear the canvas" set lfetaAnimate = True;
4. "Change color" ValueInitial.Alpha.TypeInitialValue = tivValue (use the initial value) and ValueInitial.Alpha.Value = 0 (sets the initial value to 0). ValueAnimate.Alpha.Value = 255 (sets the final value of 255), ValueAnimate.Alpha.Animate.Animation = True (will animate), ValueAnimate.Alpha.Animate.Countstep = 40 (40 steps) and ValueAnimate.Alpha.Animate.TypeChange = tcSin (and change the value of a sinusoid);
5. "Rotate" ValueAnimate.Angle.Value = 90 (rotate 900) ValueAnimate.Angle.Animate.Animation = True (will animate) ValueAnimate.Angle.Animate.Countstep = 50 (50 steps), ValueAnimate.X.Value = 102 and ValueAnimate.Y.Value = 24. A small digression - rotates the entire canvas relative to the coordinates ValueAnimate.X.Value and ValueAnimate.Y.Value, therefore, that the chosen point of rotation has remained in place, the following effect must be the effects of the "Move" with a compensating offset coordinates. Define X, Y both effects, the information displayed under the image, you just have to determine the pivot point. I put so, the "Turn" 102, 24 the "Move" 29, -56 (the size of the component 146, 160) More coordinate won't change anyt
6. 
7. "Move" ValueAnimate.X.Value = 29 and ValueAnimate.Y.Value = -56;
8. "Draw on the canvas" Image = 6 (drawing asterisk);
9. "Draw component" lfetaAnimate = True.

Step3

1. "Clear the Canvas ", " Reset matrix of colors ", " Reset transformation matrix ", "Clean Component" set lfetaAnimate = True;
2. "Move " ValueAnimate.X.Value = -25 and ValueAnimate.Y.Value = -25;
3. "Draw on the canvas" Image = 0 ImageState = isRightBottom;
4. "Move" ValueAnimate.X.Value = -6 and ValueAnimate.Y.Value = -22;
5. "Draw on the canvas " Image = 7 ImageState = isRightBottom;
6. "Draw component " lfetaAnimate = True;
7. " Clear Canvas " lfetaAnimate = True;
8. " Reset transformation matrix" lfetaAnimate = True;
9. " Change Color" at ValueInitial.Alpha.TypeInitialValue = tivValue and ValueInitial.Alpha.Value = 255. ValueAnimate.Alpha.Value = 0 , ValueAnimate.Alpha.Animate.Animation = True, ValueAnimate.Alpha.Animate.CountStep = 50 and ValueAnimate.Alpha.Animate.TypeChange = tcSin;
10. "Rotate " ValueInitial.Angle.Value = 90 , ValueInitial.Angle.TypeInitialValue = tivValue. ValueAnimate.Angle.Value = 180 ValueAnimate.Angle.Animate.Animation = True, ValueAnimate.Angle.Animate.CountStep = 50 , ValueAnimate.X.Value = 102 and ValueAnimate.Y.Value = 24;
11. "Move" ValueInitial.X.Value = 29 ValueInitial and ValueInitial.Y.Value = -56;
12. "Draw on the canvas" Image = 6 ;
13. "Draw component" lfetaAnimate = True.

Select the event "OnDesigned", copy it and paste in the "OnMouseLeave" and will vary linearly scales for both coordinates from 1 to 0.75 in 10 steps. The order of effects and their settings:

1. "Clear the Canvas", "Reset matrix of colors", "Reset transformation matrix" Clear component "set lfetaAnimate = True;
2. "Scale" ValueInitial.X.Value = 1 ValueInitial.TypeInitialValue = tivValue and ValueInitial.Y.Value = 1 ValueInitial.TypeInitialValue = tivValue. ValueAnimate.X.Value = 0,75 ValueAnimate.X.Animate.Animation = True, ValueAnimate.X.Animate.CountStep = 10 and ValueAnimate.Y.Value = 0,75 ValueAnimate.Y.Animate.Animation = True, ValueAnimate. Y.Animate.CountStep = 10;
3. "Move" ValueAnimate.X.Value = -25 and ValueAnimate.Y.Value = -25;
4. "Draw on the canvas" Image = 0 ImageState = isRightBottom;
5. "Move" ValueAnimate.X.Value = -6 and ValueAnimate.Y.Value = -22;
6. "Draw on the canvas" Image = 9 ImageState = isRightBottom;
7. "Draw component" lfetaAnimate = True.

 

Here is the order of effects and settings for the component lfeLayerEffectControl2, which will table:

1. "Clear Canvas", "Reset transformation matrix" Delete component "set lfetaInit = True;
2. "Draw on the canvas" Image = 5 ImageState = isBottom;
3. "Draw component" lfetaAnimate = True;
4. "Move" ValueAnimate.X.Value = -0,6;
5. "Move" ValueAnimate.X.Value = 80 and ValueAnimate.Y.Value = -8;
6. "Draw the text" Then I entered text and play with the size and transparency;
7. "Draw component" lfetaAnimate = True.

Copy the "OnDesigned" on "OnLoaded". Adding Popup menu on the form, add to it the line "Close" and bind to lfeLayerEffectControl2. In lfeLayerEffectList1 lfeLayerEffectControl2 add to the effect of "Edit" to the event OnMouseUp (respectively, attend and pitch) and in response to an event is inserted:

procedure TForm1.lfeLayerEffectControl2MouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);

begin
if Button = mbRight then lfeLayerEffectControl2.PopupAtCursor;
end;

procedure TForm1.Close1Click(Sender: TObject);

begin
Close;
end;

That's all. The source code and the result.