- 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