Forums

HOW-TO: Animations
Last Post 01 Jun 2015 09:40 AM by Filip Dušek. 1 Replies.
Printer Friendly
  •  
  •  
  •  
  •  
  •  
Sort:
PrevPrev NextNext
You are not authorized to post a reply.
Author Messages
Filip DušekUser is Offline
Advanced Member
Advanced Member
Posts:676


--
01 Feb 2015 02:33 PM
    This post is not about to teach you how to do animations, but to give you info about features, changes and limitations of Empty Keys UI compared to standard WPF. You can find info about WPF animations on http://msdn.microsoft.com/en-us/lib...10%29.aspx

    Empty Keys UI supports animations directly on control, in style and in control template. See Basic UI example on GitHub.- https://github.com/EmptyKeys/UI_Examples You can use only simple path for Storyboard.TargetProperty so (UIElement.Opacity) or Opacity. For example

        <DoubleAnimation
               Storyboard.TargetName="animBorder2" 
               Storyboard.TargetProperty="Opacity"                                
               From="1" To="0" Duration="0:0:4" AutoReverse="True" RepeatBehavior="Forever">
         </DoubleAnimation>
    


    3 types are supported - DoubleAnimation, ThicknessAnimation and custom SolidColorBrushAnimation (see BasicUI example). I will keep adding more in future.
    On each animation there are From, To, By, Duration, AutoReverse, RepeatBehavior, EasingFunction and IsAdditive properties.
    Supported easing functions - BackEase, CubicEase, ElasticEase, ExponentialEase, PowerEase, QuadraticEase and SineEase.

    You need routed event for EventTrigger, standard WPF are supported (not all of them) and 3 custom - VisibleEvent, HiddenEvent and CollapsedEvent. You can use custom events in XAML this way:

      <EventTrigger RoutedEvent="{x:Static ek:RoutedEvents.VisibleEvent}">
    


    ek: is designer namespace - xmlns:ek="clr-namespace:EmptyKeys.UserInterface.Designer;assembly=EmptyKeys.UserInterface.Designer"

    If you need some Routed Event, which is not implemented, let me know.

    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:676


    --
    01 Jun 2015 09:40 AM
    This is supported in version 1.5+. You can use AnimatedImage control for image animation. To be able to use this control in XAML you have to define namespace (XAML root attribute) then you use control.

    xmlns:ek="clr-namespace:EmptyKeys.UserInterface.Designer;assembly=EmptyKeys.UserInterface.Designer"

      <ek:AnimatedImage FrameHeight="128" FrameWidth="128" FramesPerSecond="50" Width="128" Height="128">
        <ek:AnimatedImage.Source>
          <BitmapImage UriSource="Images\LoadingIcon.png" />
        </ek:AnimatedImage.Source>
      </ek:AnimatedImage>
    


    and for ImageBrush

      <ImageBrush ek:AnimatedImageBrush.Animate="True" ek:AnimatedImageBrush.FrameHeight="128" ek:AnimatedImageBrush.FrameWidth="128" ek:AnimatedImageBrush.FramesPerSecond="50">
        <ImageBrush.ImageSource>
          <BitmapImage UriSource="Images\LoadingIcon.png" />
        </ImageBrush.ImageSource>
      </ImageBrush>
    


    You have to set values for FrameHeight and FrameWidth. FramesPerSecond is optional and default is 60.
    Image with animation must follow this:
    - Every frame of the animation needs to be the same size. No padding pixels between animations.
    - Top-Left corner (0,0) is the first frame, bottom-right corner is the last frame
    - Frames goes from left to right, to next row and left to right again. Each row must have same number of frames

    You are not authorized to post a reply.