How to draw an arc in winRT with animation?

Question

I am a newbie to WinRT and Blend and I need to draw digits 1, 2 etc with drawing effect in my WinRT application. The requirement is like the application will be drawing the

Answer 1

WinRT XAML Toolkit has a RingSlice control that you could also use and animate its StartAngle/EndAngle to easily animate an arc turning into a circle. Note though that both this and Iris' solutions require setting EnableDependentAnimation on an animation which is a safeguard telling you that they might not perform very well since they require code running on UI thread and will cause layout recalculations which are slow especially in complicated scenes. One thing I would try if it turns out slow (especially on slow devices like the ARM ones) would be to overlay smaller arcs with same center point and rotate them with RenderTransform animations around that center point to get the same effect. This would be a bit more complicated, but has a chance of running faster. You would balance the cost of animating on UI thread vs. overlaying multiple arcs and orchestrating their animation sequence.

Answer 2

Another general solution for drawing an arc that would allow to use an independent animation and so would possibly run smoother would be to use two overlaid ellipses that are clipped with a RectangleGeometry Clip and animate the Transform of the clip to reveal the arc gradually. You would need two of those to have the beginning and end of the arc to have their caps (ends) at arbitrary angles.

It would also be an easy solution to quickly simulate drawing of an arbitrary shape or element, including a digit.

Answer 3

I think you would need to piece together a couple of storyboards to achieve that, and I would really recommend that you use Blend for that!

Open a blank project, under objects and timeline there is a plus, click on it and add a new story board. Move the yellow bar of the storyboard line a few milliseconds forward. Draw a piece of the animation , click start recording and move that piece a little bit. Stop recording. Keep doing that piece by piece until you have what you want. AS for imitating drawing. Break down how you you want it to be, make all the separate pieces the digit will consist of and set their opacity to O. I would recommend using both keyframe (for movement) and double animation for the opacity.

Here is a quick demo of a piece of path following a curved line, I made this really fast so it's far away from perfect, but it's to demonstrate the start and stop and how they look together:

<Page
x:Class="App10.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" FontFamily="Global User Interface">
<Page.Resources>
    <Storyboard x:Name="StoryboardA">
        <PointAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.StartPoint)" Storyboard.TargetName="path">
            <EasingPointKeyFrame KeyTime="0:0:0.3" Value="107.647,394.591"/>
            <EasingPointKeyFrame KeyTime="0:0:0.6" Value="147.75,352.713"/>
            <EasingPointKeyFrame KeyTime="0:0:0.9" Value="197.45,311.391"/>
            <EasingPointKeyFrame KeyTime="0:0:1.2" Value="268.45,251.392"/>
            <EasingPointKeyFrame KeyTime="0:0:1.4" Value="346.45,196.392"/>
            <EasingPointKeyFrame KeyTime="0:0:1.6" Value="417.45,151.392"/>
            <EasingPointKeyFrame KeyTime="0:0:1.8" Value="503.841,99.7321"/>
            <EasingPointKeyFrame KeyTime="0:0:2" Value="604.45,53.3924"/>
            <EasingPointKeyFrame KeyTime="0:0:2.3" Value="705.45,13.392"/>
        </PointAnimationUsingKeyFrames>
        <PointAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)" Storyboard.TargetName="path">
            <EasingPointKeyFrame KeyTime="0:0:0.3" Value="55.8129,445.539"/>
            <EasingPointKeyFrame KeyTime="0:0:0.6" Value="95.9156,403.661"/>
            <EasingPointKeyFrame KeyTime="0:0:0.9" Value="139.796,364.539"/>
            <EasingPointKeyFrame KeyTime="0:0:1.2" Value="198.646,311.319"/>
            <EasingPointKeyFrame KeyTime="0:0:1.4" Value="266.536,258.09"/>
            <EasingPointKeyFrame KeyTime="0:0:1.6" Value="330.282,210.352"/>
            <EasingPointKeyFrame KeyTime="0:0:1.8" Value="408.248,157.542"/>
            <EasingPointKeyFrame KeyTime="0:0:2" Value="500.776,106.108"/>
            <EasingPointKeyFrame KeyTime="0:0:2.3" Value="597.831,60.216"/>
        </PointAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Path Data="M73.5,639.5 C73.5,639.5 539.5,33.5 1289.5,79.5 L1535,101.5" HorizontalAlignment="Left" Height="572.492" Margin="68.5,72.008,-174,0" Stretch="Fill" Stroke="Red" StrokeThickness="10" UseLayoutRounding="False" VerticalAlignment="Top" Width="1471.5"/>
    <Path x:Name="path" HorizontalAlignment="Left" Height="507.972" Margin="66.05,137.358,0,0" Stroke="#FFFFE100" StrokeThickness="15" UseLayoutRounding="False" VerticalAlignment="Top" Width="712.95">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="53.45,448.392">
                    <LineSegment Point="7.50001,500.472"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
</Grid>

Here is an image of how it looks like, its the yellow thing that moves - the curved movement is just an example to show you can piece together to create any movement you want. Something called easing function can even do this for you, see image below.

Here are easing functions available, play around with them, in combination with the items in the storyboard to create the desired effect.

The different easing functions are well explained here on MSDN

There is no double animation in the examples above, but they look like this:

 <Storyboard x:Name="myStoryboard">
                        <DoubleAnimation Duration="0:0:1"                                 
                            Storyboard.TargetName="myImage"             
                            Storyboard.TargetProperty="Opacity"            
                            From="0" To="1" />
                    </Storyboard>

It's a big job, and will take time. And I would recommend that you sit down and learn how to use Blend and work with storyboards before you do that. There are many great tutorials out there, and it will be worth the time. Personally I tend to let a designer help out with the animations, as you might see in the storyboard above, I'm not a pro at animations - there is a lot to keep in mind, in particular in regards to the app performance.

I would also like to point out some of the main ideas behind the Modern UI , the required design language for Windows Store Apps, and that is to stay authentically digital. The app should not mimic real life things, makes no sense as it is an app and not 'reality'.

From MSDN: Be authentically digital Take full advantage of the digital medium. Remove physical boundaries to create experiences that are more efficient and effortless than reality. Embrace the fact that we are pixels on a screen. Design with bold, vibrant and crisp colors and images that go beyond the limits of real world material.

Video worth watching: http://channel9.msdn.com/Events/Ch9Live/Channel-9-Live-at-Tech-Ed-Europe-2012/Panel-Modern-UI-Development

So think about that, and maybe you don't need a drawing motion. Maybe just a quick fade in, like so:

<Page
x:Class="App10.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" FontFamily="Global User Interface">
<Page.Resources>
    <Storyboard x:Name="StoryboardB">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Height="145" Margin="465,386,0,0" TextWrapping="Wrap" Text="AB" VerticalAlignment="Top" FontSize="50" Width="343"/>
</Grid>

Answer 4

If you build a custom control and need to animate the dependency properties for it, I've written a blog post to help at http://danielgary.net/animating-custom-dependencyproperties/

The gist of it is you wire up an event for when your Dependency Property changes and update your layout code inside there.