AnimateElement

Share your advanced knowledge/code with the community.
User avatar
eddy
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

AnimateElement

Post by eddy »

- animate element (Jquery element only) with callback function
- animation options: duration, delay, loop count
- using Animate CSS plugin : http://daneden.github.io/animate.css/
- latest version of this plugin is available here : https://github.com/daneden/animate.css
- using GadgetElement, WindowElement or Jquery command to retrieve Jquery Element

Code: Select all

;{ Animation constants (animateCSS v3.1.1)

;Attention Seekers
#AnimCSS_bounce$="bounce"
#AnimCSS_flash$="flash"
#AnimCSS_pulse$="pulse"
#AnimCSS_rubberBand$="rubberBand"
#AnimCSS_shake$="shake"
#AnimCSS_swing$="swing"
#AnimCSS_tada$="tada"
#AnimCSS_wobble$="wobble"

;Bouncing Entrances
#AnimCSS_bounceIn$="bounceIn"
#AnimCSS_bounceInDown$="bounceInDown"
#AnimCSS_bounceInLeft$="bounceInLeft"
#AnimCSS_bounceInRight$="bounceInRight"
#AnimCSS_bounceInUp$="bounceInUp"

;Bouncing Exits
#AnimCSS_bounceOut$="bounceOut"
#AnimCSS_bounceOutDown$="bounceOutDown"
#AnimCSS_bounceOutLeft$="bounceOutLeft"
#AnimCSS_bounceOutRight$="bounceOutRight"
#AnimCSS_bounceOutUp$="bounceOutUp"

;Fading Entrances
#AnimCSS_fadeIn$="fadeIn"
#AnimCSS_fadeInDown$="fadeInDown"
#AnimCSS_fadeInDownBig$="fadeInDownBig"
#AnimCSS_fadeInLeft$="fadeInLeft"
#AnimCSS_fadeInLeftBig$="fadeInLeftBig"
#AnimCSS_fadeInRight$="fadeInRight"
#AnimCSS_fadeInRightBig$="fadeInRightBig"
#AnimCSS_fadeInUp$="fadeInUp"
#AnimCSS_fadeInUpBig$="fadeInUpBig"

;Fading Exits
#AnimCSS_fadeOut$="fadeOut"
#AnimCSS_fadeOutDown$="fadeOutDown"
#AnimCSS_fadeOutDownBig$="fadeOutDownBig"
#AnimCSS_fadeOutLeft$="fadeOutLeft"
#AnimCSS_fadeOutLeftBig$="fadeOutLeftBig"
#AnimCSS_fadeOutRight$="fadeOutRight"
#AnimCSS_fadeOutRightBig$="fadeOutRightBig"
#AnimCSS_fadeOutUp$="fadeOutUp"
#AnimCSS_fadeOutUpBig$="fadeOutUpBig"

;Flippers
#AnimCSS_flip$="flip"
#AnimCSS_flipInX$="flipInX"
#AnimCSS_flipInY$="flipInY"
#AnimCSS_flipOutX$="flipOutX"
#AnimCSS_flipOutY$="flipOutY"

;Lightspeed
#AnimCSS_lightSpeedIn$="lightSpeedIn"
#AnimCSS_lightSpeedOut$="lightSpeedOut"

;Rotating Entrances
#AnimCSS_rotateIn$="rotateIn"
#AnimCSS_rotateInDownLeft$="rotateInDownLeft"
#AnimCSS_rotateInDownRight$="rotateInDownRight"
#AnimCSS_rotateInUpLeft$="rotateInUpLeft"
#AnimCSS_rotateInUpRight$="rotateInUpRight"

;Rotating Exits
#AnimCSS_rotateOut$="rotateOut"
#AnimCSS_rotateOutDownLeft$="rotateOutDownLeft"
#AnimCSS_rotateOutDownRight$="rotateOutDownRight"
#AnimCSS_rotateOutUpLeft$="rotateOutUpLeft"
#AnimCSS_rotateOutUpRight$="rotateOutUpRight"

;Sliders
#AnimCSS_slideInDown$="slideInDown"
#AnimCSS_slideInLeft$="slideInLeft"
#AnimCSS_slideInRight$="slideInRight"
#AnimCSS_slideOutLeft$="slideOutLeft"
#AnimCSS_slideOutRight$="slideOutRight"
#AnimCSS_slideOutUp$="slideOutUp"

;Specials
#AnimCSS_hinge$="hinge"
#AnimCSS_rollIn$="rollIn"
#AnimCSS_rollOut$="rollOut"

;} 

Procedure AnimateElement(Element, Animation.s, *OnAnimationEndFunction=0, Duration=#PB_Default, Delay=#PB_Default, Loop=1)  
  ;remove previous animation
  !v_Element.attr('animcss') && v_Element.removeClass(v_Element.attr('animcss')).removeAttr('animcss');
  If Animation="" : ProcedureReturn : EndIf   
  
  ;new animation parameters
  !var duration = v_Duration!=-1 ? v_Duration+'ms':''
  !  , delay = v_Delay!=-1 ? v_Delay+'ms':''
  !  , loop = v_Loop!=1? v_Loop>0? v_Loop+',infinite':'infinite':'';
  !v_Element.css({    
  !  '-webkit-animation-duration': duration
  !, '-webkit-animation-iteration-count':loop
  !, '-webkit-animation-delay': delay
  !, '-ms-animation-duration': duration
  !, '-ms-animation-iteration-count':loop  
  !, '-ms-animation-delay': delay
  !, 'animation-duration': duration
  !, 'animation-iteration-count':loop
  !, 'animation-delay': delay
  !});
  ;start animation  
  !v_Element.attr('animcss',v_Animation + ' animated').addClass(v_Element.attr('animcss')).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){  
  AnimateElement(Element,"")
  !  p_OnAnimationEndFunction && p_OnAnimationEndFunction();
  !});  
EndProcedure

CompilerIf #PB_Compiler_IsMainFile
  
  ;{ utility functions  
  CompilerIf Not Defined(GadgetElement,#PB_Procedure)
    Procedure.i GadgetElement(Gadget, UseJquery.b=#True)
      Protected gadgetObject=GadgetID(Gadget) 
      !return (v_gadgetObject && v_gadgetObject.div)? v_UseJquery? $(v_gadgetObject.div):v_gadgetObject.div:null; 
    EndProcedure
  CompilerEndIf 
  
  CompilerIf Not Defined(WindowElement,#PB_Procedure)
    Procedure.i WindowElement(Window, UseJquery.b=#True)
      Protected winObject=WindowID(Window) 
      !return (v_winObject && v_winObject.element)? v_UseJquery? $(v_winObject.element):v_winObject.element:null; 
    EndProcedure
  CompilerEndIf 
  
  CompilerIf Not Defined(LoadAsynchronously,#PB_Procedure)
    Procedure.i LoadAsynchronously(FileName.s, *OnLoadFunction, FileType.s)
      !return $.ajax({ url:v_FileName, dataType:v_FileType, beforeSend:function(jqxhr, settings) { jqxhr.url = settings.url; } })
      !.done(function(data, status, jqxhr) { p_OnLoadFunction(data,status,jqxhr.url); })
      !.fail(function(jqxhr, status, errorThrown) { p_OnLoadFunction('',status,jqxhr.url,jqxhr.status,errorThrown); });
    EndProcedure
  CompilerEndIf 
  
  CompilerIf Not Defined(LoadCSS,#PB_Procedure)
    Procedure.i LoadCSS(FileName.s, *OnLoadFunction)
      Protected jqxhr=LoadAsynchronously(FileName, *OnLoadFunction, "text")
      !return v_jqxhr.done(function(data, status, jqxhr) { 
      !   $('<style></style>').appendTo('head').html(data);
      !})
    EndProcedure
  CompilerEndIf 
  ;} 
  
  ; *****************************
  ; EXAMPLE 
  ; *****************************
  
  Procedure AnimationEnded()
    AnimateElement(GadgetElement(2), #AnimCSS_swing$, #Null, 2000, 1000, 5)
    AnimateElement(GadgetElement(3), #AnimCSS_shake$, #Null, #PB_Default, #PB_Default, -1) ; non-stop animation if Loop < 1
  EndProcedure
  
  Procedure ButtonClicked()
    Debug "Animation is stopped!"
    AnimateElement(GadgetElement(3), "") ;stop animation if Animation=""
  EndProcedure
  
  Procedure Loading()
    Protected element=WindowElement(1)
    HideWindow(1,#False)
    AnimateElement(element, #AnimCSS_flipInY$, @AnimationEnded())
  EndProcedure
  
  OpenWindow(1,330,330,400,250,"Animated Gadgets")
  HideWindow(1,#True)
  ButtonGadget(2,10,10,300,30,"delayed animation")
  ButtonGadget(3,10,50,300,30,"click to stop animation")
  BindGadgetEvent(3, @ButtonClicked())
  
  ;animation provided by this CSS file (lastest version available here: http://daneden.me/animate/ ) 
  LoadCSS("//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css",@Loading())  
CompilerEndIf
Last edited by eddy on Thu May 01, 2014 6:00 pm, edited 2 times in total.
User avatar
eddy
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Re: AnimateElement

Post by eddy »

Updated
- fix delay and loop parameter
poshu
Posts: 96
Joined: Mon Feb 24, 2014 11:46 pm

Re: AnimateElement

Post by poshu »

Looks real nice!
davido
Posts: 10
Joined: Mon Feb 24, 2014 10:22 pm
Location: Uttoxeter UK

Re: AnimateElement

Post by davido »

@eddy
Very nice.
Thank you for sharing. :D
poshu
Posts: 96
Joined: Mon Feb 24, 2014 11:46 pm

Re: AnimateElement

Post by poshu »

All my code is now module based, so here is the module version + example :

Code: Select all

DeclareModule AnimCSS
;Attention Seekers
#bounce$="bounce"
#flash$="flash"
#pulse$="pulse"
#rubberBand$="rubberBand"
#shake$="shake"
#swing$="swing"
#tada$="tada"
#wobble$="wobble"

;Bouncing Entrances
#bounceIn$="bounceIn"
#bounceInDown$="bounceInDown"
#bounceInLeft$="bounceInLeft"
#bounceInRight$="bounceInRight"
#bounceInUp$="bounceInUp"

;Bouncing Exits
#bounceOut$="bounceOut"
#bounceOutDown$="bounceOutDown"
#bounceOutLeft$="bounceOutLeft"
#bounceOutRight$="bounceOutRight"
#bounceOutUp$="bounceOutUp"

;Fading Entrances
#fadeIn$="fadeIn"
#fadeInDown$="fadeInDown"
#fadeInDownBig$="fadeInDownBig"
#fadeInLeft$="fadeInLeft"
#fadeInLeftBig$="fadeInLeftBig"
#fadeInRight$="fadeInRight"
#fadeInRightBig$="fadeInRightBig"
#fadeInUp$="fadeInUp"
#fadeInUpBig$="fadeInUpBig"

;Fading Exits
#fadeOut$="fadeOut"
#fadeOutDown$="fadeOutDown"
#fadeOutDownBig$="fadeOutDownBig"
#fadeOutLeft$="fadeOutLeft"
#fadeOutLeftBig$="fadeOutLeftBig"
#fadeOutRight$="fadeOutRight"
#fadeOutRightBig$="fadeOutRightBig"
#fadeOutUp$="fadeOutUp"
#fadeOutUpBig$="fadeOutUpBig"

;Flippers
#flip$="flip"
#flipInX$="flipInX"
#flipInY$="flipInY"
#flipOutX$="flipOutX"
#flipOutY$="flipOutY"

;Lightspeed
#lightSpeedIn$="lightSpeedIn"
#lightSpeedOut$="lightSpeedOut"

;Rotating Entrances
#rotateIn$="rotateIn"
#rotateInDownLeft$="rotateInDownLeft"
#rotateInDownRight$="rotateInDownRight"
#rotateInUpLeft$="rotateInUpLeft"
#rotateInUpRight$="rotateInUpRight"

;Rotating Exits
#rotateOut$="rotateOut"
#rotateOutDownLeft$="rotateOutDownLeft"
#rotateOutDownRight$="rotateOutDownRight"
#rotateOutUpLeft$="rotateOutUpLeft"
#rotateOutUpRight$="rotateOutUpRight"

;Sliders
#slideInDown$="slideInDown"
#slideInLeft$="slideInLeft"
#slideInRight$="slideInRight"
#slideOutLeft$="slideOutLeft"
#slideOutRight$="slideOutRight"
#slideOutUp$="slideOutUp"

;Specials
#hinge$="hinge"
#rollIn$="rollIn"
#rollOut$="rollOut"

Declare AnimateElement(Element, Animation.s, *OnAnimationEndFunction=0, Duration=#PB_Default, Delay=#PB_Default, Loop=1) 

EndDeclareModule

Module AnimCSS
	
	Procedure AnimateElement(Element, Animation.s, *OnAnimationEndFunction=0, Duration=#PB_Default, Delay=#PB_Default, Loop=1) 
  ;remove previous animation
  !v_Element.attr('animcss') && v_Element.removeClass(v_Element.attr('animcss')).removeAttr('animcss');
  If Animation="" : ProcedureReturn : EndIf   
 
  ;new animation parameters
  !var duration = v_Duration!=-1 ? v_Duration+'ms':''
  !  , delay = v_Delay!=-1 ? v_Delay+'ms':''
  !  , loop = v_Loop!=1? v_Loop>0? v_Loop+',infinite':'infinite':'';
  !v_Element.css({   
  !  '-webkit-animation-duration': duration
  !, '-webkit-animation-iteration-count':loop
  !, '-webkit-animation-delay': delay
  !, '-ms-animation-duration': duration
  !, '-ms-animation-iteration-count':loop 
  !, '-ms-animation-delay': delay
  !, 'animation-duration': duration
  !, 'animation-iteration-count':loop
  !, 'animation-delay': delay
  !});
  ;start animation 
  !v_Element.attr('animcss',v_Animation + ' animated').addClass(v_Element.attr('animcss')).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ 
  AnimateElement(Element,"")
  !  p_OnAnimationEndFunction && p_OnAnimationEndFunction();
  !}); 
EndProcedure

EndModule

CompilerIf #PB_Compiler_IsMainFile
 
  ;{ utility functions 
  CompilerIf Not Defined(GadgetElement,#PB_Procedure)
    Procedure.i GadgetElement(Gadget, UseJquery.b=#True)
      Protected gadgetObject=GadgetID(Gadget)
      !return (v_gadgetObject && v_gadgetObject.div)? v_UseJquery? $(v_gadgetObject.div):v_gadgetObject.div:null;
    EndProcedure
  CompilerEndIf
 
  CompilerIf Not Defined(WindowElement,#PB_Procedure)
    Procedure.i WindowElement(Window, UseJquery.b=#True)
      Protected winObject=WindowID(Window)
      !return (v_winObject && v_winObject.element)? v_UseJquery? $(v_winObject.element):v_winObject.element:null;
    EndProcedure
  CompilerEndIf
 
  CompilerIf Not Defined(LoadAsynchronously,#PB_Procedure)
    Procedure.i LoadAsynchronously(FileName.s, *OnLoadFunction, FileType.s)
      !return $.ajax({ url:v_FileName, dataType:v_FileType, beforeSend:function(jqxhr, settings) { jqxhr.url = settings.url; } })
      !.done(function(data, status, jqxhr) { p_OnLoadFunction(data,status,jqxhr.url); })
      !.fail(function(jqxhr, status, errorThrown) { p_OnLoadFunction('',status,jqxhr.url,jqxhr.status,errorThrown); });
    EndProcedure
  CompilerEndIf
 
  CompilerIf Not Defined(LoadCSS,#PB_Procedure)
    Procedure.i LoadCSS(FileName.s, *OnLoadFunction)
      Protected jqxhr=LoadAsynchronously(FileName, *OnLoadFunction, "text")
      !return v_jqxhr.done(function(data, status, jqxhr) {
      !   $('<style></style>').appendTo('head').html(data);
      !})
    EndProcedure
  CompilerEndIf
  ;}
 
  ; *****************************
  ; EXAMPLE
  ; *****************************
 
  Procedure AnimationEnded()
    AnimCSS::AnimateElement(GadgetElement(2), AnimCSS::#swing$, #Null, 2000, 1000, 5)
    AnimCSS::AnimateElement(GadgetElement(3), AnimCSS::#shake$, #Null, #PB_Default, #PB_Default, -1) ; non-stop animation if Loop < 1
  EndProcedure
 
  Procedure ButtonClicked()
    Debug "Animation is stopped!"
    AnimCSS::AnimateElement(GadgetElement(3), "") ;stop animation if Animation=""
  EndProcedure
 
  Procedure Loading()
    Protected element=WindowElement(1)
    HideWindow(1,#False)
    AnimCSS::AnimateElement(element, AnimCSS::#flipInY$, @AnimationEnded())
  EndProcedure
 
  OpenWindow(1,330,330,400,250,"Animated Gadgets")
  HideWindow(1,#True)
  ButtonGadget(2,10,10,300,30,"delayed animation")
  ButtonGadget(3,10,50,300,30,"click to stop animation")
  BindGadgetEvent(3, @ButtonClicked())
 
  ;animation provided by this CSS file (lastest version available here: http://daneden.me/animate/ )
  LoadCSS("//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css",@Loading()) 
CompilerEndIf
pf shadoko
Posts: 74
Joined: Thu May 26, 2016 11:09 am

Re: AnimateElement

Post by pf shadoko »

Hello everybody,
this code interested me much.
but it does not work for me
I believe the CSS file does not load
may be incompatible with the latest versions of PB
anyone have an explanation?
thank you
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: AnimateElement

Post by Peter »

Hello pf shadoko,

in newer SB-Versions all inline js-variables are lower-case.

v_Element -> v_element
v_Duration -> v_duration

... and so on.

Here is an adapted version of poshus code:

Code: Select all

DeclareModule AnimCSS
;Attention Seekers
#bounce$="bounce"
#flash$="flash"
#pulse$="pulse"
#rubberBand$="rubberBand"
#shake$="shake"
#swing$="swing"
#tada$="tada"
#wobble$="wobble"

;Bouncing Entrances
#bounceIn$="bounceIn"
#bounceInDown$="bounceInDown"
#bounceInLeft$="bounceInLeft"
#bounceInRight$="bounceInRight"
#bounceInUp$="bounceInUp"

;Bouncing Exits
#bounceOut$="bounceOut"
#bounceOutDown$="bounceOutDown"
#bounceOutLeft$="bounceOutLeft"
#bounceOutRight$="bounceOutRight"
#bounceOutUp$="bounceOutUp"

;Fading Entrances
#fadeIn$="fadeIn"
#fadeInDown$="fadeInDown"
#fadeInDownBig$="fadeInDownBig"
#fadeInLeft$="fadeInLeft"
#fadeInLeftBig$="fadeInLeftBig"
#fadeInRight$="fadeInRight"
#fadeInRightBig$="fadeInRightBig"
#fadeInUp$="fadeInUp"
#fadeInUpBig$="fadeInUpBig"

;Fading Exits
#fadeOut$="fadeOut"
#fadeOutDown$="fadeOutDown"
#fadeOutDownBig$="fadeOutDownBig"
#fadeOutLeft$="fadeOutLeft"
#fadeOutLeftBig$="fadeOutLeftBig"
#fadeOutRight$="fadeOutRight"
#fadeOutRightBig$="fadeOutRightBig"
#fadeOutUp$="fadeOutUp"
#fadeOutUpBig$="fadeOutUpBig"

;Flippers
#flip$="flip"
#flipInX$="flipInX"
#flipInY$="flipInY"
#flipOutX$="flipOutX"
#flipOutY$="flipOutY"

;Lightspeed
#lightSpeedIn$="lightSpeedIn"
#lightSpeedOut$="lightSpeedOut"

;Rotating Entrances
#rotateIn$="rotateIn"
#rotateInDownLeft$="rotateInDownLeft"
#rotateInDownRight$="rotateInDownRight"
#rotateInUpLeft$="rotateInUpLeft"
#rotateInUpRight$="rotateInUpRight"

;Rotating Exits
#rotateOut$="rotateOut"
#rotateOutDownLeft$="rotateOutDownLeft"
#rotateOutDownRight$="rotateOutDownRight"
#rotateOutUpLeft$="rotateOutUpLeft"
#rotateOutUpRight$="rotateOutUpRight"

;Sliders
#slideInDown$="slideInDown"
#slideInLeft$="slideInLeft"
#slideInRight$="slideInRight"
#slideOutLeft$="slideOutLeft"
#slideOutRight$="slideOutRight"
#slideOutUp$="slideOutUp"

;Specials
#hinge$="hinge"
#rollIn$="rollIn"
#rollOut$="rollOut"

Declare AnimateElement(Element, Animation.s, *OnAnimationEndFunction=0, Duration=#PB_Default, Delay=#PB_Default, Loop=1) 

EndDeclareModule

Module AnimCSS
   
   Procedure AnimateElement(Element, Animation.s, *OnAnimationEndFunction=0, Duration=#PB_Default, Delay=#PB_Default, Loop=1) 
  ;remove previous animation
  !v_element.attr('animcss') && v_element.removeClass(v_element.attr('animcss')).removeAttr('animcss');
  If Animation="" : ProcedureReturn : EndIf   
 
  ;new animation parameters
  !var duration = v_duration!=-1 ? v_duration+'ms':''
  !  , delay = v_delay!=-1 ? v_delay+'ms':''
  !  , loop = v_loop!=1? v_loop>0? v_loop+',infinite':'infinite':'';
  !v_element.css({   
  !  '-webkit-animation-duration': duration
  !, '-webkit-animation-iteration-count':loop
  !, '-webkit-animation-delay': delay
  !, '-ms-animation-duration': duration
  !, '-ms-animation-iteration-count':loop 
  !, '-ms-animation-delay': delay
  !, 'animation-duration': duration
  !, 'animation-iteration-count':loop
  !, 'animation-delay': delay
  !});
  ;start animation 
  !v_element.attr('animcss',v_animation + ' animated').addClass(v_element.attr('animcss')).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ 
  AnimateElement(Element,"")
  !  p_onanimationendfunction && p_onanimationendfunction();
  !}); 
EndProcedure

EndModule

CompilerIf #PB_Compiler_IsMainFile
 
  ;{ utility functions 
  CompilerIf Not Defined(GadgetElement,#PB_Procedure)
    Procedure.i GadgetElement(Gadget, UseJquery.b=#True)
      Protected gadgetObject=GadgetID(Gadget)
      !return (v_gadgetobject && v_gadgetobject.div)? v_usejquery? $(v_gadgetobject.div):v_gadgetobject.div:null;
    EndProcedure
  CompilerEndIf
 
  CompilerIf Not Defined(WindowElement,#PB_Procedure)
    Procedure.i WindowElement(Window, UseJquery.b=#True)
      Protected winObject=WindowID(Window)
      !return (v_winobject && v_winobject.element)? v_usejquery? $(v_winobject.element):v_winobject.element:null;
    EndProcedure
  CompilerEndIf
 
  CompilerIf Not Defined(LoadAsynchronously,#PB_Procedure)
    Procedure.i LoadAsynchronously(FileName.s, *OnLoadFunction, FileType.s)
      !return $.ajax({ url:v_filename, dataType:v_filetype, beforeSend:function(jqxhr, settings) { jqxhr.url = settings.url; } })
      !.done(function(data, status, jqxhr) { p_onloadfunction(data,status,jqxhr.url); })
      !.fail(function(jqxhr, status, errorThrown) { p_onloadfunction('',status,jqxhr.url,jqxhr.status,errorThrown); });
    EndProcedure
  CompilerEndIf
 
  CompilerIf Not Defined(LoadCSS,#PB_Procedure)
    Procedure.i LoadCSS(FileName.s, *OnLoadFunction)
      Protected jqxhr=LoadAsynchronously(FileName, *OnLoadFunction, "text")
      !return v_jqxhr.done(function(data, status, jqxhr) {
      !   $('<style></style>').appendTo('head').html(data);
      !})
    EndProcedure
  CompilerEndIf
  ;}
 
  ; *****************************
  ; EXAMPLE
  ; *****************************
 
  Procedure AnimationEnded()
    AnimCSS::AnimateElement(GadgetElement(2), AnimCSS::#swing$, #Null, 2000, 1000, 5)
    AnimCSS::AnimateElement(GadgetElement(3), AnimCSS::#shake$, #Null, #PB_Default, #PB_Default, -1) ; non-stop animation if Loop < 1
  EndProcedure
 
  Procedure ButtonClicked()
    Debug "Animation is stopped!"
    AnimCSS::AnimateElement(GadgetElement(3), "") ;stop animation if Animation=""
  EndProcedure
 
  Procedure Loading()
    Protected element=WindowElement(1)
    HideWindow(1,#False)
    AnimCSS::AnimateElement(element, AnimCSS::#flipInY$, @AnimationEnded())
  EndProcedure
 
  OpenWindow(1,330,330,400,250,"Animated Gadgets")
  HideWindow(1,#True)
  ButtonGadget(2,10,10,300,30,"delayed animation")
  ButtonGadget(3,10,50,300,30,"click to stop animation")
  BindGadgetEvent(3, @ButtonClicked())
 
  ;animation provided by this CSS file (lastest version available here: http://daneden.me/animate/ )
  LoadCSS("//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css",@Loading()) 
CompilerEndIf
Greetings ... Peter
pf shadoko
Posts: 74
Joined: Thu May 26, 2016 11:09 am

Re: AnimateElement

Post by pf shadoko »

thank you very much
very nice
I adopt
Post Reply