Animate a button?

[atostaine]

Is animating a button a good idea? I want a button to flash or get bigger for a half a second to indicate what button the user needs to press.

How could I do that? make it bigger than smaller?

[jyoung]

IMHO things like buttons, inputs and form components in general should not be animated.

If you are trying to draw attention to a specific button use a color scheme with primary and neutral colors such as bootstrap https://getbootstrap.com/docs/4.0/compo ... /#examples and semantic ui https://semantic-ui.com/elements/button.html#emphasis

I am including the links above as a reference point, not that we can actually use Bootstrap or Semantic UI in VL Web.

Use a primary color on the button you want to draw attention to.

Another way I have seen it done is to use a button as your primary action and link as your secondary action. For example in an "Ok / Cancel" scenario, the "Ok" would be a button and the "Cancel" would be link.

If you do want to animate it, you could hook up with PRIM_ANIM.

Code: Select all

begin_com role(*EXTENDS #PRIM_WEB)

define_com class(#PRIM_PHBN) name(#Button1) caption('Button1') displayposition(1) left(392) parent(#COM_OWNER) tabposition(1) top(291)

define_com class(#PRIM_ANIM) name(#Embiggen)
define_com class(#PRIM_ANIM.Scale) name(#Animation1) parent(#Embiggen) scaleheight(110) scalewidth(110) duration(100) manage(#Button1)
define_com class(#PRIM_ANIM.Scale) name(#Animation2) parent(#Embiggen) starttime(100) duration(100) manage(#Button1)

evtroutine handling(#Com_owner.Initialize)

endroutine

evtroutine handling(#Button1.Click)
#Embiggen.Start
endroutine

end_com

All kinds of fun stuff in http://docs.lansa.com/14/en/lansa016/prim_anim.htm and http://docs.lansa.com/14/en/lansa016/pr ... .scale.htm
Check out the PRIM_ANIM classes in http://docs.lansa.com/14/en/lansa016/index.htm

[atostaine]

Thanks for the excellent answer. I was using animation.scale and it's very subtle. I'll check out the examples and links you sent.

Art

[Stewart Marshall]

Hi Art

If you're going to use animations, and you should keep them extremely simple, it's a good idea to centralize them.

Rather than coding them where they're used, you can create a set of methods that contain all the necessary definitions. You can then wrap all of these up and make them available via an application scoped object or have a part that you include as required.

The code below is a simple version with the method defined locally, but the idea is the same.

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<2015Indigo>)

Define_Com Class(#PRIM_LABL) Name(#Label1) DisplayPosition(3) Ellipses(Word) Height(65) Left(64) Parent(#COM_OWNER) TabPosition(3) TabStop(False) Top(72) VerticalAlignment(Center) Width(105) Alignment(Center) Caption('Label 1') ThemeDrawStyle('MediumTitle')
Define_Com Class(#PRIM_LABL) Name(#Label2) DisplayPosition(2) Ellipses(Word) Height(65) Left(64) Parent(#COM_OWNER) TabPosition(2) TabStop(False) Top(144) VerticalAlignment(Center) Width(105) Alignment(Center) Caption('Label 2') ThemeDrawStyle('MediumTitle')
Define_Com Class(#PRIM_LABL) Name(#Label3) DisplayPosition(1) Ellipses(Word) Height(65) Left(64) Parent(#COM_OWNER) TabPosition(1) TabStop(False) Top(216) VerticalAlignment(Center) Width(105) Alignment(Center) Caption('Label 3') ThemeDrawStyle('MediumTitle')

Evtroutine Handling(#Label1.MouseEnter #Label2.MouseEnter #Label3.MouseEnter) Com_Sender(#Sender)

#Com_owner.AnimateMouseEnter( #Sender )

Endroutine

Mthroutine Name(AnimateMouseEnter)
Define_Map For(*Input) Class(#Prim_ctrl) Name(#Control) Pass(*By_Reference)

Define_Com Class(#prim_anim) Name(#Animation)
Define_Com Class(#prim_anim.Scale) Name(#Animation1) Parent(#Animation) ScaleHeight(110) ScaleWidth(110) Duration(100)
Define_Com Class(#prim_anim.Scale) Name(#Animation2) Parent(#Animation) StartTime(100) Duration(100)

#Animation1.Manage #Animation2.Manage <= #Control

#Animation.Start

Endroutine

End_Com

Regards

[atostaine]

Thanks Stewart.