locked
Character animations in Windows phone and RT apps

    Question

  • Hi i am currently developing an app but i want to have some animated characters in it. Sort of like dumb ways to die. But i'm wondering what is the best way to do this i've tried using gifs and loading them with a timer but the amount of assets gets out of control because i have got more than one animated character. If there is no other solution i might have to use mp4 but the sizes would be too big can someone suggest a bit of advice.
    Thursday, July 3, 2014 2:44 PM

Answers

  • By the way see this:

    <Page
        x:Class="App2.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App2"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Page.Resources>
            <Storyboard x:Name="AnimateText" RepeatBehavior="Forever">
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="Text1">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="25"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Text2">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1.25"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Text2">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1.25"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.SkewX)" Storyboard.TargetName="Text3">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.25"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.SkewY)" Storyboard.TargetName="Text3">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.25"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Text4">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-1"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-1"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Text4">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-1"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Text5">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Text5">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="Text5">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Text5">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-1.25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Text5">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.SkewX)" Storyboard.TargetName="Text5">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-0.25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.SkewY)" Storyboard.TargetName="Text5">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-0.25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            	</DoubleAnimationUsingKeyFrames>
            	<PointAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="Text5">
            		<EasingPointKeyFrame KeyTime="0:0:0.5" Value="0.5,0.5"/>
            	</PointAnimationUsingKeyFrames>
            </Storyboard>
        </Page.Resources>
        <StackPanel Margin="10">
            <StackPanel Orientation="Horizontal">
                <TextBlock FontSize="24" x:Name="Text1" Text="A" RenderTransformOrigin="0.5,0.5">
                	<TextBlock.RenderTransform>
                		<CompositeTransform/>
                	</TextBlock.RenderTransform>
                </TextBlock>
                <TextBlock FontSize="24" x:Name="Text2" Text="B" RenderTransformOrigin="0.5,0.5">
                    <TextBlock.RenderTransform>
                        <CompositeTransform/>
                    </TextBlock.RenderTransform>
                </TextBlock>
                <TextBlock FontSize="24" x:Name="Text3" Text="C" RenderTransformOrigin="0.5,0.5">
                    <TextBlock.RenderTransform>
                        <CompositeTransform/>
                    </TextBlock.RenderTransform>
                </TextBlock>
                <TextBlock FontSize="24" x:Name="Text4" Text="D" RenderTransformOrigin="0.5,0.5">
                    <TextBlock.RenderTransform>
                        <CompositeTransform/>
                    </TextBlock.RenderTransform>
                </TextBlock>
                <TextBlock FontSize="24" x:Name="Text5" Text="E" RenderTransformOrigin="0.5,0.5">
                    <TextBlock.RenderTransform>
                        <CompositeTransform/>
                    </TextBlock.RenderTransform>
                </TextBlock>
            </StackPanel>
        </StackPanel>
    </Page>
    


    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Navigation;
    
    
    namespace App2
    {
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
    
                this.NavigationCacheMode = NavigationCacheMode.Required;
            }
    
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                AnimateText.Begin();
            }
        }
    }
    

    This is how you can Animate text using storyboard. You need to use Blend for Visual Studio to do such things.

    As a better version I will suggest make a Custom Control that takes Text as one property. Then it will render each character in Stack Panel as I have shown and while doing so will associate Animation (may be random) with each character. This can also include changing color, font family, font size etc.


    -- Vishal Kaushik --

    Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!

    Thursday, July 3, 2014 6:55 PM

All replies

  • Can you post one GIF that has that animation so that one can suggest what to do.

    -- Vishal Kaushik --

    Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!

    Thursday, July 3, 2014 6:12 PM
  • By the way see this:

    <Page
        x:Class="App2.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App2"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Page.Resources>
            <Storyboard x:Name="AnimateText" RepeatBehavior="Forever">
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="Text1">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="25"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Text2">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1.25"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Text2">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1.25"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.SkewX)" Storyboard.TargetName="Text3">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.25"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.SkewY)" Storyboard.TargetName="Text3">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.25"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Text4">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-1"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-1"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Text4">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-1"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Text5">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Text5">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="Text5">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Text5">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-1.25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Text5">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.SkewX)" Storyboard.TargetName="Text5">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-0.25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            	</DoubleAnimationUsingKeyFrames>
            	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.SkewY)" Storyboard.TargetName="Text5">
            		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-0.25"/>
            		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            	</DoubleAnimationUsingKeyFrames>
            	<PointAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="Text5">
            		<EasingPointKeyFrame KeyTime="0:0:0.5" Value="0.5,0.5"/>
            	</PointAnimationUsingKeyFrames>
            </Storyboard>
        </Page.Resources>
        <StackPanel Margin="10">
            <StackPanel Orientation="Horizontal">
                <TextBlock FontSize="24" x:Name="Text1" Text="A" RenderTransformOrigin="0.5,0.5">
                	<TextBlock.RenderTransform>
                		<CompositeTransform/>
                	</TextBlock.RenderTransform>
                </TextBlock>
                <TextBlock FontSize="24" x:Name="Text2" Text="B" RenderTransformOrigin="0.5,0.5">
                    <TextBlock.RenderTransform>
                        <CompositeTransform/>
                    </TextBlock.RenderTransform>
                </TextBlock>
                <TextBlock FontSize="24" x:Name="Text3" Text="C" RenderTransformOrigin="0.5,0.5">
                    <TextBlock.RenderTransform>
                        <CompositeTransform/>
                    </TextBlock.RenderTransform>
                </TextBlock>
                <TextBlock FontSize="24" x:Name="Text4" Text="D" RenderTransformOrigin="0.5,0.5">
                    <TextBlock.RenderTransform>
                        <CompositeTransform/>
                    </TextBlock.RenderTransform>
                </TextBlock>
                <TextBlock FontSize="24" x:Name="Text5" Text="E" RenderTransformOrigin="0.5,0.5">
                    <TextBlock.RenderTransform>
                        <CompositeTransform/>
                    </TextBlock.RenderTransform>
                </TextBlock>
            </StackPanel>
        </StackPanel>
    </Page>
    


    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Navigation;
    
    
    namespace App2
    {
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
    
                this.NavigationCacheMode = NavigationCacheMode.Required;
            }
    
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                AnimateText.Begin();
            }
        }
    }
    

    This is how you can Animate text using storyboard. You need to use Blend for Visual Studio to do such things.

    As a better version I will suggest make a Custom Control that takes Text as one property. Then it will render each character in Stack Panel as I have shown and while doing so will associate Animation (may be random) with each character. This can also include changing color, font family, font size etc.


    -- Vishal Kaushik --

    Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!

    Thursday, July 3, 2014 6:55 PM