I am animating a rectangle and a pair of lines
in uwp, such that the rectangle animates from its center and the lines animate from the top of the rectangle to its position. When I set duration less than 1 sec animation is not proper .
But with the same duration(such as 0.8, 0.7) it is working fine in wpf. This occurs on initial loading, when on dynamically animating it works.
Storyboard sb;
Rectangle rect;
Line highLine;
Line lowLine;
double width, height, x_center, y_center;
private void DrawElement()
{
rect = new Rectangle();
rect.RenderTransformOrigin = new Point(0.5, 0.5);
rect.Height = 60;
rect.Width = 40;
rect.Stroke = new SolidColorBrush(Colors.Black);
rect.StrokeThickness = 2;
rect.RenderTransform = new ScaleTransform();
grid.Children.Add(rect);
width = grid.ActualWidth;
height = grid.ActualHeight;
x_center = width / 2;
y_center = height / 2;
highLine = new Line();
highLine.RenderTransform = new ScaleTransform();
highLine.StrokeThickness = 2;
highLine.X1 = highLine.X2 = x_center;
highLine.Y1 = y_center - rect.Height/2 - 30;
highLine.Y2 = y_center - rect.Height/2;
highLine.Stroke = new SolidColorBrush(Colors.Red);
grid.Children.Add(highLine);
lowLine = new Line();
lowLine.RenderTransform = new ScaleTransform();
lowLine.StrokeThickness = 2;
lowLine.X1 = lowLine.X2 = x_center;
lowLine.Y1 = y_center + rect.Height / 2 + 30;
lowLine.Y2 = y_center + rect.Height / 2;
lowLine.Stroke = new SolidColorBrush(Colors.Green);
grid.Children.Add(lowLine);
AnimationLogics();
}
private void AnimationLogics()
{
string rectPath = "(UIElement.RenderTransform).(ScaleTransform.ScaleY)";
string y1_path = "Y1";
string y2_Path = "Y2";
sb = new Storyboard();
//rect animation
DoubleAnimation da = new DoubleAnimation();
da.From = 0;
da.To = 1;
da.Duration = TimeSpan.FromSeconds(2);
#if !WPF
da.EnableDependentAnimation = true;
Storyboard.SetTargetProperty(da, rectPath);
#else
Storyboard.SetTargetProperty(da, new PropertyPath(rectPath));
#endif
Storyboard.SetTarget(da, rect);
sb.Children.Add(da);
// high line animation
DoubleAnimation da1 = new DoubleAnimation();
da1.From = y_center;
da1.To = highLine.Y1;
da1.Duration = TimeSpan.FromSeconds(2);
#if !WPF
da1.EnableDependentAnimation = true;
Storyboard.SetTargetProperty(da1, y1_path);
#else
Storyboard.SetTargetProperty(da1, new PropertyPath(y1_path));
#endif
Storyboard.SetTarget(da1, highLine);
sb.Children.Add(da1);
DoubleAnimation da2 = new DoubleAnimation();
da2.From = y_center;
da2.To = highLine.Y2;
da2.Duration = TimeSpan.FromSeconds(2);
#if !WPF
da2.EnableDependentAnimation = true;
Storyboard.SetTargetProperty(da2, y2_Path);
#else
Storyboard.SetTargetProperty(da2, new PropertyPath(y2_Path));
#endif
Storyboard.SetTarget(da2, highLine);
sb.Children.Add(da2);
//low line animation
DoubleAnimation da3 = new DoubleAnimation();
da3.From = y_center;
da3.To = lowLine.Y1;
da3.Duration = TimeSpan.FromSeconds(2);
#if !WPF
da3.EnableDependentAnimation = true;
Storyboard.SetTargetProperty(da3, y1_path);
#else
Storyboard.SetTargetProperty(da3, new PropertyPath(y1_path));
#endif
Storyboard.SetTarget(da3, lowLine);
sb.Children.Add(da3);
DoubleAnimation da4 = new DoubleAnimation();
da4.From = y_center;
da4.To = lowLine.Y2;
da4.Duration = TimeSpan.FromSeconds(2);
#if !WPF
da4.EnableDependentAnimation = true;
Storyboard.SetTargetProperty(da4, y2_Path);
#else
Storyboard.SetTargetProperty(da4, new PropertyPath(y2_Path));
#endif
Storyboard.SetTarget(da4, lowLine);
sb.Children.Add(da4);
sb.Begin();
}
private void grid_SizeChanged(object sender, SizeChangedEventArgs e)
{
grid.Children.Clear();
DrawElement();
}
Related
I want to animate retangle with using AnimationPoint.
How can i do it?
P.S.
I searhed in google, but did not find what i need.
I try this :
private void drawRect()
{
var d = new Grid();
var moveTranc = new TranslateTransform() { X = 1,Y = 1 };
var e2 = new Rectangle()
{
Stroke = new SolidColorBrush(System.Windows.Media.Color.FromArgb(255, 0, 200, 0)),
RenderTransform = moveTranc,
RadiusX = 100,
RadiusY = 100,
RenderTransformOrigin = new Point(0.5f,0.5f),
};
var pointAnimation = new PointAnimation()
{
Duration = new Duration(TimeSpan.FromSeconds(2)),
From = new Point(e2.RadiusX,e2.RadiusY),
To = new Point(450,450)
};
var storyBoard = new Storyboard();
storyBoard.RepeatBehavior = RepeatBehavior.Forever;
storyBoard.Children.Add(pointAnimation);
Storyboard.SetTarget(pointAnimation, e2);
Storyboard.SetTargetProperty(pointAnimation, new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X).(TranslateTransform.Y)"));
d.Children.Add(e2);
ContentPanel.Children.Add(d);
storyBoard.Begin();
}
I found any variant of animating rectangle with using double animation
Rectangle myRectangle;
Storyboard sb;
//creating rectangle
myRectangle = new Rectangle();
myRectangle.Width = 200;
myRectangle.Height = 200;
Color myColor = Color.FromArgb(255, 255, 0, 0);
SolidColorBrush myBrush = new SolidColorBrush();
myBrush.Color = myColor;
myRectangle.Fill = myBrush;
// Create the transform
TranslateTransform moveTransform = new TranslateTransform();
moveTransform.X = 0;
moveTransform.Y = 0;
myRectangle.RenderTransform = moveTransform;
// Add the rectangle to the tree.
if (!LayoutRoot.Children.Contains(myRectangle)) LayoutRoot.Children.Add(myRectangle);
// Create a duration of 2 seconds.
Duration duration = new Duration(TimeSpan.FromSeconds(1.0));
// Create two DoubleAnimations and set their properties.
DoubleAnimation myDoubleAnimationX = new DoubleAnimation();
sb = new Storyboard();
sb.Duration = duration;
sb.Children.Add(myDoubleAnimationX);
Storyboard.SetTarget(myDoubleAnimationX, moveTransform);
Storyboard.SetTargetProperty(myDoubleAnimationX, new PropertyPath("X"));
DoubleAnimation myDoubleAnimationY = new DoubleAnimation();
sb.Children.Add(myDoubleAnimationY);
Storyboard.SetTarget(myDoubleAnimationY, moveTransform);
Storyboard.SetTargetProperty(myDoubleAnimationY, new PropertyPath("Y"));
myDoubleAnimationX.To = 0;
myDoubleAnimationX.From = 340;
myDoubleAnimationY.To = 0;
myDoubleAnimationY.From = 340;
// Make the Storyboard a resource.
if (!LayoutRoot.Resources.Contains("unique_id")) LayoutRoot.Resources.Add("unique_id", sb);
sb.Begin();
I make group of rectangles with different opacity value and add these rectangles to Grid in WindowsPhone:
var grid=new Grid();
grid.Width = grid.Height = 200;
var rectanglesCount=55;
var rectangleSizeStep = grid.Height / rectanglesCount;
var opacityStep = 1.0 / rectanglesCount
var rectangleSize = grid.Height;
var opacity = 0.0;
for (int i = 0; i <= rectanglesCount; i++)
{
Rectangle rect = new Rectangle();
rect.Height = rect.Width = rectangleSize;
rect.VerticalAlignment = VerticalAlignment.Center;
rect.HorizontalAlignment = HorizontalAlignment.Center;
rect.Fill = new SolidColorBrush(Colors.Yellow);
rect.Opacity = opacity;
opacity += opacityStep;
rectangleSize -= rectangleSizeStep;
grid.Children.Add(rect);
}
I can see in grid following picture:
After I try to save this group of rectangles to WriteableBitmap and show as Image:
var img=new Image();
var wrBit = new WriteableBitmap(grid, null);
img.Source=wrBit;
And I see picture:
What happend with opacity on top and left edges?
How to correctly save group of Rectangles?
Need to use Canvas instead Grid control for group of rectangles:
var canvas=new Canvas();
canvas.Width = canvas.Height = 200;
var rectanglesCount=55;
var rectangleSizeStep = canvas.Height / rectanglesCount;
var opacityStep = 1.0 / rectanglesCount
var rectangleSize = canvas.Height;
var opacity = 0.0;
var rectMargin = 0.0;
for (int i = 0; i <= rectanglesCount; i++)
{
Rectangle rect = new Rectangle();
rect.Height = rect.Width = rectangleSize;
rect.Margin=new Thickness(rectMargin,rectMargin,0,0);
rectMargin += rectangleSizeStep/2;
rect.Fill = new SolidColorBrush(Colors.Yellow);
rect.Opacity = opacity;
opacity += opacityStep;
rectangleSize -= rectangleSizeStep;
canvas.Children.Add(rect);
}
and save Canvas as WriteableBitmap:
var img=new Image();
var wrBit = new WriteableBitmap(canvas, null);
img.Source=wrBit;
Problem was solved!
I have two UIElements(i.e. rectangles) in Canvas and their coordinates. How can I connect them with arc in code behind?
No need to get an exact hit on the rectangles (or other objects): make sure the Z ordering is correct. arc.SetValue(Canvas.ZIndex, -1) will push it to the background. If you want a perpendicular hit, you'll need to break out the algebra :/
For the arc: (see http://msdn.microsoft.com/en-us/library/ms751808.aspx), it needs to be contained in a PathFigure.
Edit: this shows two connected rectangles. The line simple runs between the two centers. The arc starts on one center (the pathFigure startpoint), first argument is the center of the second object.
r1 = new Rectangle();
r1.Margin = new Thickness(50, 50, 0, 0);
r1.VerticalAlignment = System.Windows.VerticalAlignment.Top;
r1.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
r1.Height = 50;
r1.Width= 50;
r1.Fill = new SolidColorBrush(Colors.Red);
r2 = new Rectangle();
r2.Width = 50;
r2.Height = 50;
r2.Fill = new SolidColorBrush(Colors.Blue);
r2.Margin = new Thickness(350, 450, 0, 0);
r2.VerticalAlignment = System.Windows.VerticalAlignment.Top;
r2.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
l = new Line();
l.X1 = 75;
l.Y1 = 75;
l.X2 = 375;
l.Y2 = 475;
l.Fill = new SolidColorBrush(Colors.Purple);
l.Stroke = new SolidColorBrush(Colors.Purple);
l.StrokeThickness = 2;
l.SetValue(Canvas.ZIndexProperty, -1);
PathGeometry myPathGeometry = new PathGeometry();
// Create a figure.
PathFigure pathFigure1 = new PathFigure();
pathFigure1.StartPoint = new Point(75, 75);
pathFigure1.Segments.Add(
new ArcSegment(
new Point(375, 475),
new Size(50, 50),
45,
true, /* IsLargeArc */
SweepDirection.Clockwise,
true /* IsStroked */ ));
myPathGeometry.Figures.Add(pathFigure1);
// Display the PathGeometry.
Path myPath = new Path();
myPath.Stroke = Brushes.Black;
myPath.StrokeThickness = 1;
myPath.Data = myPathGeometry;
myPath.SetValue(Canvas.ZIndexProperty, -1);
LayoutRoot.Children.Add(r1);
LayoutRoot.Children.Add(r2);
LayoutRoot.Children.Add(l);
LayoutRoot.Children.Add(myPath);
It won't change the position, the position is fixed at runtime even though i change the value 50 below:
System.Windows.Shapes.Rectangle myRectangle = new System.Windows.Shapes.Rectangle();
mainGrid.Children.Add(myRectangle);
Canvas.SetLeft(myRectangle, 50);
Canvas.SetTop(myRectangle, 50);
myRectangle.Height = 100;
myRectangle.Width = 100;
myRectangle.Stroke = System.Windows.Media.Brushes.LightSteelBlue;
here are the 2 solutions for your problem
1) with a canvas
var myRectangle = new System.Windows.Shapes.Rectangle();
var mainCanvas = new Canvas();
mainGrid.Children.Add(mainCanvas);
mainCanvas.Children.Add(myRectangle);
Canvas.SetLeft(myRectangle, 50);
Canvas.SetTop(myRectangle, 50);
myRectangle.Height = 100;
myRectangle.Width = 100;
myRectangle.Stroke = System.Windows.Media.Brushes.LightSteelBlue;
2) only with your grid
var myRectangle = new System.Windows.Shapes.Rectangle();
mainGrid.Children.Add(myRectangle);
myRectangle.Margin = new Thickness(50, 50, 0, 0);
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.VerticalAlignment = VerticalAlignment.Top;
myRectangle.Height = 100;
myRectangle.Width = 100;
myRectangle.Stroke = System.Windows.Media.Brushes.LightSteelBlue;
I am trying to find out why the code below does not seem to work. It does not give an error - it simply doesn't scale. It actually does seem to work if I change it as to my second code sample.
Anyone got any idea?
Thanks
public static void StartMouseEnterAnimation(Button button)
{
Storyboard storyboard = new Storyboard();
ScaleTransform scale = new ScaleTransform(1.0, 1.0, 1, 1);
button.RenderTransformOrigin = new Point(0.5, 0.5);
button.RenderTransform = scale;
DoubleAnimation growAnimation = new DoubleAnimation();
growAnimation.Duration = TimeSpan.FromMilliseconds(300);
growAnimation.From = 1;
growAnimation.To = 1.8;
storyboard.Children.Add(growAnimation);
Storyboard.SetTargetProperty(growAnimation, new PropertyPath(ScaleTransform.ScaleXProperty));
Storyboard.SetTarget(growAnimation, scale);
storyboard.Begin();
}
--- The following DOES work but I had to create a TransformGroup and reference this through a more complicated PropertyChain...
public static void StartMouseEnterAnimation(Button button)
{
Storyboard storyboard = new Storyboard();
ScaleTransform scale = new ScaleTransform(1.0, 1.0, 1, 1);
button.RenderTransformOrigin = new Point(0.5, 0.5);
TransformGroup myTransGroup = new TransformGroup();
myTransGroup.Children.Add(scale);
button.RenderTransform = myTransGroup;
DoubleAnimation growAnimation = new DoubleAnimation();
growAnimation.Duration = TimeSpan.FromMilliseconds(100);
//growAnimation.From = 1;
growAnimation.To = 1.1;
storyboard.Children.Add(growAnimation);
DependencyProperty[] propertyChain = new DependencyProperty[]
{
Button.RenderTransformProperty,
TransformGroup.ChildrenProperty,
ScaleTransform.ScaleXProperty
};
string thePath = "(0).(1)[0].(2)";
PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
Storyboard.SetTargetProperty(growAnimation, myPropertyPath);
Storyboard.SetTarget(growAnimation, button);
storyboard.Begin();
}
I was able to get it to work by tweaking your first code sample like so:
public static void StartMouseEnterAnimation(Button button) {
Storyboard storyboard = new Storyboard();
ScaleTransform scale = new ScaleTransform(1.0, 1.0);
button.RenderTransformOrigin = new Point(0.5, 0.5);
button.RenderTransform = scale;
DoubleAnimation growAnimation = new DoubleAnimation();
growAnimation.Duration = TimeSpan.FromMilliseconds(300);
growAnimation.From = 1;
growAnimation.To = 1.8;
storyboard.Children.Add(growAnimation);
Storyboard.SetTargetProperty(growAnimation, new PropertyPath("RenderTransform.ScaleX"));
Storyboard.SetTarget(growAnimation, button);
storyboard.Begin();
}
Instead of new PropertyPath(ScaleTransform.ScaleXProperty)), I used new PropertyPath("RenderTransform.ScaleX")), and I set the target of the storyboard to the button (not the scaleTransform itself).
Hope that helps!
Here is an example of how to animate in two different directions on a ScaleTransform, when you have a transform group. The path string shows which part is being animated. Also, because Canvas is freezable, you have to RegisterName. (I don't know what this means, but it is required)
var storyBoard = new Storyboard();
var group = new TransformGroup();
var scale = new ScaleTransform(Zoom, Zoom);
group.Children.Add(scale);
group.Children.Add(new TranslateTransform(_translateX,_translateY));
MainCanvas.RenderTransform = group;
RegisterName("MainCanvas",MainCanvas);
var growAnimation = new DoubleAnimation();
growAnimation.Duration = TimeSpan.FromMilliseconds(1000);
growAnimation.From = _oldZoom;
growAnimation.To = Zoom;
storyBoard.Children.Add(growAnimation);
var growAnimation2 = new DoubleAnimation();
growAnimation2.Duration = TimeSpan.FromMilliseconds(1000);
growAnimation2.From = _oldZoom;
growAnimation2.To = Zoom;
storyBoard.Children.Add(growAnimation2);
string thePath = "(0).(1)[0].(2)"; // Not used - just to show the syntax
Storyboard.SetTargetProperty(growAnimation, new PropertyPath("RenderTransform.Children[0].ScaleX"));
Storyboard.SetTargetProperty(growAnimation2, new PropertyPath("RenderTransform.Children[0].ScaleY"));
Storyboard.SetTargetName(growAnimation, "MainCanvas");
Storyboard.SetTargetName(growAnimation2,"MainCanvas");
storyBoard.Begin(this);