How do I add a fade effect to this?

[masterelf425900]

This is what I'm trying to copy https://imgur.com/dqmpe6h (It's from nightTab firefox extension)
This is what I've been able make so far https://imgur.com/LyGIZOr
as you can see its instant and looks laggy as their's no animation or fade delay. At best I want to make the animation smooth like in the first link and at worst a simple fade effect will do. I have no knowledge in programming and thanks in advance

This is the code from the .ini file

Code: Select all

[STEAM]
Meter=Image
ImageName=#@#Images\steam-hover-1.png
W=507
H=195
MouseOverAction=[!SetOption #CURRENTSECTION# ImageName "#@#Images\steam-hover-2.png"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# ImageName "#@#Images\steam-hover-1.png"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
LeftMouseUpAction=["A:\Applications\Steam\steam.exe"]


[Rainmeter]
Update=1000

[Metadata]
Name=STEAM
Author=APIUM
Information=
License=
Version=

[balala]

This is what I'm trying to copy https://imgur.com/dqmpe6h (It's from nightTab firefox extension)
This is what I've been able make so far https://imgur.com/LyGIZOr
as you can see its instant and looks laggy as their's no animation or fade delay. At best I want to make the animation smooth like in the first link and at worst a simple fade effect will do. I have no knowledge in programming and thanks in advance

For this you'll need an ActionTimer plugin measure. Such a measure can do what you asked for.
Here is a short example, but this can't be applied directly to your skin. I've created here a simple String meter, showing an A, but in your case this should be an Image meter (I used a String meter, because you didn't post an image). If you're hovering the mouse over the meter you'll see the result. There are some possibilities even if you use images instead of string, however (at least) one of the used images would be needed, for a better code.
So try out this code, to see if you like it:

Code: Select all

[Rainmeter]
Update=1000
BackgroundMode=2
Solidcolor=255,0,0,100

[Variables]
Alpha=0

[MeasureFade]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat FadeIn,20,10
FadeIn=[!SetVariable Alpha "(Clamp((#Alpha#+22),0,220))"][!UpdateMeasure "MeasureFade"][!UpdateMeter "MeterString"][!Redraw]
ActionList2=Repeat FadeOut,20,10
FadeOut=[!SetVariable Alpha "(Clamp((#Alpha#-22),0,220))"][!UpdateMeasure "MeasureFade"][!UpdateMeter "MeterString"][!Redraw]
DynamicVariables=1

[MeterString]
Meter=STRING
X=90
Y=55
W=160
H=100
Padding=15,5,15,5
FontColor=(220-#Alpha#),(220-#Alpha#),(220-#Alpha#)
FontEffectColor=#Alpha#,#Alpha#,#Alpha#
StringEffect=Shadow
SolidColor=0,150,0,150
FontSize=38
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=CenterCenter
AntiAlias=1
Text=A
DynamicVariables=1
MouseOverAction=[!CommandMeasure "MeasureFade" "Execute 1"][!CommandMeasure "MeasureFade" "Stop 2"]
MouseLeaveAction=[!CommandMeasure "MeasureFade" "Stop 1"][!CommandMeasure "MeasureFade" "Execute 2"]

If you like it, upload one of those images, please. The speed of animation can easily be adapted to your needs.

[masterelf425900]

thank you for taking the time to help. are you talking about these images?

[Yincognito]

as you can see its instant and looks laggy as their's no animation or fade delay. At best I want to make the animation smooth like in the first link and at worst a simple fade effect will do.

In addition to balala's reply, which mainly handles the fade part, for the animation of the bottom label's text and background, you'd also use a Container meter to hide the desired parts, along with the proper change in size and coordinates of the image, background and text done through the ActionTimer plugin. Hopefully balala can teach you how to work with the latter, because otherwise it's just about gradually changing the Y (vertical coordinate) and H (height) on some meters in the ActionTimer and displaying the text in a visible container (somewhat similar to the container example from the manual I linked to above).

[balala]

are you talking about these images?

Yep, exactly.
For now I just faded in and out the two images. Obviously the below posted code can be further improved (as Yincognito suggested above), but this requires little bit more time. For first try out this please this code and let me know what you think about it:

Code: Select all

[Rainmeter]
Update=1000

[Variables]
Alpha=0

[MeasureFade]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat FadeIn,20,10
FadeIn=[!SetVariable Alpha "(Clamp((#Alpha#+22.5),0,255))"][!UpdateMeasure "MeasureFade"][!UpdateMeterGroup "Icon1"][!UpdateMeter "MeterString"][!Redraw]
ActionList2=Repeat FadeOut,20,10
FadeOut=[!SetVariable Alpha "(Clamp((#Alpha#-22.5),0,255))"][!UpdateMeasure "MeasureFade"][!UpdateMeterGroup "Icon1"][!UpdateMeter "MeterString"][!Redraw]
DynamicVariables=1

[Meter1]
Meter=Image
ImageName=#@#kBP1Eq6.png
X=0
Y=0
ImageAlpha=(255-#Alpha#)
DynamicVariables=1
Group=Icon1
MouseOverAction=[!CommandMeasure "MeasureFade" "Execute 1"][!CommandMeasure "MeasureFade" "Stop 2"]
MouseLeaveAction=[!CommandMeasure "MeasureFade" "Stop 1"][!CommandMeasure "MeasureFade" "Execute 2"]

[Meter2]
Meter=Image
ImageName=#@#HPmQtgZ.png
X=0
Y=0
ImageAlpha=#Alpha#
DynamicVariables=1
Group=Icon1
MouseOverAction=[!CommandMeasure "MeasureFade" "Execute 1"][!CommandMeasure "MeasureFade" "Stop 2"]
MouseLeaveAction=[!CommandMeasure "MeasureFade" "Stop 1"][!CommandMeasure "MeasureFade" "Execute 2"]

[MeterString]
Meter=STRING
X=10
Y=10
Padding=15,5,15,5
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
SolidColor=0,0,0,150
FontSize=8
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=Left
AntiAlias=1
Text=#Alpha#
DynamicVariables=1

I left the [MeterString] meter, to let you see how the Alpha variable is changing when you're hovering the mouse over or leave the skin. Obviously this will have to be removed.

[masterelf425900]

Thank you so much. At the start of the day I knew nothing and just decided to make my windows look a bit different and now at the end I find myself learning things I never imagined myself to even touch.

Once again, thanks for taking the time and hope you're all having a great day.

[Yincognito]

Once again, thanks for taking the time and hope you're all having a great day.

The big thanks go to balala for this one, but you should know that much more can be achieved, if desired. One minor observation regarding the above code: you probably noticed that towards the middle of the fading, the result becomes almost transparent since both images have a low alpha (opacity). If by any chance you don't want that (e.g. the stuff behind the skin to be briefly visible in those moments), you can set the Alpha option from Meter1 to a plain 255, instead of (255-#Alpha#). The fading will still happen by gradually increasing the opacity of the image from Meter2 over the one from Meter1, while the brief near-transparency in the middle of the process will not occur anymore.