Im trying to animate a image that moves from the right side of the screen to the left, i guess thats what translate is for, but not really sure how it works, or whats the best solution. So far i have this:
<Image Height="50" Width="50" Source="/Assets/Img/cloud.png" Stretch="Uniform">
<Image.RenderTransform>
<TranslateTransform x:Name="p1Translate" X="0" Y="0"/>
</Image.RenderTransform>
</Image>
Which is nothing!
So can someone help me, translate the cloud.png just in the X axis?
Greets,
José Correia
Did you try using the CompositeTransform for your image? You could use Blend to come up with a storyboard animation.
XAML storyboard animation moving images from outside viewport-windows phone 8
For further reference:
Images Animation By Using Story Board in Windows Phone 8/8.1
I believe this article should answer all your questions: Quickstart: Animations for Windows Phone
While you can use the RenderTransform in order to position objects relative to where the layouting engine puts them the easier way is to place the Control you want to move around inside a Canvas which directly attaches position properties to that Control. This is shown in one of the samples in the article I linked to.
Thanks for all the help, heres how i did it:
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0" Value="-90"/>
<EasingDoubleKeyFrame KeyTime="0:0:8" Value="-598.826"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</phone:PhoneApplicationPage.Resources>
<Image x:Name="image" Source="/Assets/Img/bg_cloud.png" Stretch="Fill" RenderTransformOrigin="50,50" Width="70" Height="40" Margin="497,596,-87,164">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
And Blend really helped me out!
Best regards,
José Correia
Related
Scenario as follows.
I have an canvas on which I want to move, lets say an rectangel, across the screen. The way the rectangle is supposed to move is determined by one specific path (like a railway, the rectangle is supposed to only move on the rails). The position on which the rectangle is currently located is provided by external source.
Current Location is provided every ~200-500ms.
So far I have tried the following:
simple TranslateTransform. Does the trick, but the rectangle jumps from Point a to b. No smooth Translation.
Storyboard with a doubleAnimation
Smoother, but the rectangle doesn´t follow the required path.
DoubleAnimationUsingPath. Rectangle is moving on the path. But now I am not able to provide the current position by external source.
Easiest for me would be a way to use an DoubleAnimationUsingPath and providing the X-Koordinate by external source.
But I am not sure if overall storyboards and animations are the best way to tackel that Problem.
If you know of any completely different Approach I am more than happy hear about it.
Kind regards
Just to get an idea of what can be done with animations, take a look at this little demo of a object moving along a track:
<Canvas>
<Canvas.Resources>
<PathGeometry x:Key="track">
<PathFigure StartPoint="200,100" IsClosed="True">
<LineSegment Point="300,100"/>
<ArcSegment SweepDirection="Clockwise"
Size="100,100" Point="300,300"/>
<LineSegment Point="200,300"/>
<ArcSegment SweepDirection="Clockwise"
Size="100,100" Point="200,100"/>
</PathFigure>
</PathGeometry>
</Canvas.Resources>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<MatrixAnimationUsingPath
Storyboard.TargetName="train"
Storyboard.TargetProperty="RenderTransform.Matrix"
PathGeometry="{StaticResource track}"
DoesRotateWithTangent="True"
Duration="0:0:10"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Path Data="{StaticResource track}" Stroke="Black"
StrokeThickness="6"/>
<Path Data="{StaticResource track}" Stroke="White"
StrokeThickness="4" StrokeDashArray="2,2"/>
<Rectangle x:Name="train" Width="10" Height="6" Fill="Red"
Canvas.Left="-5" Canvas.Top="-3"
RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<MatrixTransform />
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
I'm attempting to build an odometer like effect in UWP where when a number is incremented it slides up and dissappears while the incremented number appears by sliding up from the bottom (in a very similar mannor to how the Odometer JS library works).
I have the number contained in a text block, that is animating properly.
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="Digit1">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-80" />
</DoubleAnimationUsingKeyFrames>
Currently, when the number moves up it is still completely visible. I want the TextBlock to be "clipped" to its containing Canvas so that it progressively dissappears as it moves outside the bounds of the Canvas.
I have tried both clipping the TextBlock to the Canvas and visa versa, neither of which had the desired effect.
<Canvas x:Name="Odometer"
Clip="{Binding Clip, ElementName=Digit1}">
<TextBlock x:Name="Digit1"
FontSize="100"
Text="8"
Canvas.Left="-104"
Canvas.Top="-30"
RenderTransformOrigin="0.5,0.5"
Clip="{Binding Clip, ElementName=Odometer}">
<TextBlock.RenderTransform> <CompositeTransform /> </TextBlock.RenderTransform>
</TextBlock>
</Canvas>
I do not need to use a Canvas, it's just what I was playing around with. I'm still very new to UWP, so any help would be appreciated.
If you refer to UIElement.Clip:
The clipping geometry for UIElement.Clip in the Windows Runtime API must be a RectangleGeometry.
So, if you want to give a outline for canvas, you need to specify a RectangleGeometry for your canvas.clip, which take a rect of your canvas's actual size.
You can achieve this progrmmatically:
private void Odometer_Loaded(object sender, RoutedEventArgs e)
{
RectangleGeometry rectangle = new RectangleGeometry();
rectangle.Rect = new Rect(0, 0, Odometer.ActualWidth, Odometer.ActualHeight);
Odometer.Clip = rectangle;
}
And don't forget to remove the clip in xaml:
<Canvas x:Name="Odometer" Loaded="Odometer_Loaded">
<TextBlock x:Name="Digit1"
FontSize="100"
Text="8"
Canvas.Left="104"
Canvas.Top="10"
RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<CompositeTransform />
</TextBlock.RenderTransform>
</TextBlock>
</Canvas>
I don't know how to name this, but the purpose is to when I click the right mouse button and then the left button right after (without opening the popup that usually opens with the right mouse button), it should popup this "settings menu" with an animation like this one:
or just a "size in". If it is not possible or its to complicate to open with the mouse buttons, it could be done with any key/combination from the keyboard.
Anyone has any idea how I could do this? Im using C# WPF and Blend.
I may have a partial answer for you. You can use a Radial Menu as the popup. There are many paid Radial Menu controls, but this (nugget package here) one seems open source and looks good (I haven't used it).
Regarding that loading animation, Expression Drawing might have a convenient Arc drawing to do that.
<ed:Arc x:Name="arc" Stretch="None" Height="64" Width="64" ArcThicknessUnit="Pixel" EndAngle="360" HorizontalAlignment="Stretch" Stroke="Red" StrokeThickness="5" StartAngle="0" />
And a simple storyboard can animate it.
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ed:Arc.EndAngle)" Storyboard.TargetName="arc">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Visual Studio Blend should help you do it very easily.
I have simple graphic images which I would like to transform on triggered events. Transform means change the width or move it to another position.
For now I use the Image element of the toolbox and Animations via Storyboard, for instance DoubleAnimation or ThicknessAnimation.
However the following issues arise:
the images flickers when changing the width
the image quality varies, does WPF support vector graphics?
Regarding 1. my question is, if other animations should be used.
So I tried the Transformation, see the code :
<Image Height="150" HorizontalAlignment="Left" Margin="12,0,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Source="images/side_view.jpg" Width="1244">
<Image.RenderTransform>
<ScaleTransform x:Name="Minimize" ScaleX="1.0" ScaleY="1.0"/>
</Image.RenderTransform>
</Image>
<Button Content="Next Train" Height="23" HorizontalAlignment="Left" Margin="528,233,0,0" Name="btnNext" VerticalAlignment="Top" Width="75" />
<Grid.Triggers>
<EventTrigger RoutedEvent="Button.Click" SourceName="btnNext">
<BeginStoryboard>
<Storyboard TargetName="Minimize" TargetProperty="ScaleX">
<DoubleAnimation To="0.65" Duration="0:0:2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
Works the same as the Animation I applied to width and margin. However, it still flickers! Are there any reasonable explanations?
If you're animating the Width of an image, you're making WPF re render the image, and create it from scatch each time. It goes through both the Layout process and the Rendering process, which makes it flicker and not work as best as it could be.
The best option here is to animate a ScaleTransform. ScaleTransform is done completely in hardware via DirectX and therefor will be extremlely fast, it won't flicker, and the image quality should stay pretty much the same the whole way. (unless ofcourse you are resizing it substantially in which case you'll lose percision.)
I just wanna ask if there's a way where I could put an object (circle) at the end of a particular line path.
Similar to this:
--------------------------------------------O
Start End
Right now, I have the following code for tracing the line:
<Grid x:Name="LayoutRoot" >
<Path Stroke="Red" StrokeThickness="4" x:Name="path4" Data="{Binding MyProperty1}" >
<Path.StrokeDashArray>
<System:Double>500</System:Double>
<System:Double>1000</System:Double>
</Path.StrokeDashArray>
</Path>
</Grid>
where the data of my path (e.g. M532,668 L523,695 361,663 101,678 117,638) varies.
my animation looks like this...
<Storyboard x:Key="Story1" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="path1"
Storyboard.TargetProperty="(Shape.StrokeDashOffset)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="500"/>
<SplineDoubleKeyFrame KeyTime="00:00:08" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Any suggestions?
There are at least a couple of ways you could do this; which is best probably depends on the relationship of the circle to the line.
If the circle is conceptually part of the same shape as the line, change your Path to include an ellipse (arc) at the end of the line. This could be done by changing the path Data, either by adding a circle to the end or by adding another Figure to the PathGeometry.
If the circle is conceptually a separate component, and you just want to place that component next to the line, you can just use a StackPanel with its Orientation set to Horizontal:
<StackPanel Orientation="Horizontal">
<Path /> <!-- The line -->
<Ellipse /> <!-- The circle -->
</StackPanel>
(Note: in some scenarios, you can do this using the EndLineCap property. That won't work in this case though because it looks like you want the circle to be bigger than the stroke thickness. Line caps are always the same thickness as the line.)