Unable to animate ellipses independently

Question

4.00/5 (1 vote)

See more:

Am trying to apply animation individually for a group of ellipes using C# code behind.
Am starting animation on MouseLeftButtonDown Event. It is working fine for the any first ellipse..but when I click on next ellipse both (the previous ellipse and current ellipse) are getting animated.

This is the code i have tried....

C#

public void AnimateTheMovment(int to,double by,Ellipse elps)
        {
            DoubleAnimation da = new DoubleAnimation();
            da.By = (double)by;
            da.SpeedRatio = 2;
            da.Duration = new TimeSpan(0, 0, 3);
            elps.UpdateLayout();
            elps.RenderTransform = transformEllipse;
            transformEllipse.BeginAnimation(TranslateTransform.XProperty, da);
        }

where elps is a object of the Ellipse am clicking.

And the XAML code is here

XML

<Window x:Class="TestGame.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="600">
    <Canvas Width="600" Height="300">
        <Rectangle Fill="Black" Width="50" Height="10" HorizontalAlignment="Left" Margin="107,0,0,115" VerticalAlignment="Bottom" Canvas.Left="59" Canvas.Top="157" />
        <Rectangle Fill="Black" Width="50" Height="10" HorizontalAlignment="Left" Margin="166,0,0,115" VerticalAlignment="Bottom" Canvas.Left="60" Canvas.Top="157" />
        <Rectangle Fill="Black" Width="50" Height="10" HorizontalAlignment="Right" Margin="0,0,327,115" VerticalAlignment="Bottom" Canvas.Left="407" Canvas.Top="157" />
        <Rectangle Fill="Black" Height="10" Margin="0,0,183,115" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="50" Canvas.Left="467" Canvas.Top="157" />
        <Rectangle Fill="Black" Height="10" Margin="0,0,127,115" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="50" Canvas.Left="347" Canvas.Top="157" />
        <Rectangle Fill="Black" Height="10" Margin="0,0,69,115" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="50" Canvas.Left="106" Canvas.Top="157" />
        <Rectangle Fill="Green" Height="10" Margin="283,0,245,114" VerticalAlignment="Bottom" Width="61" Canvas.Left="-2" Canvas.Top="157" />
        <Ellipse MouseLeftButtonDown="left1_MouseLeftButtonDown" x:Name="left1" Canvas.Left="115" Canvas.Top="124" Height="30" HorizontalAlignment="Left" Width="30" >
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.35 0.35"
                    Center="0.35 0.35">
                    <GradientStop Offset="0" Color="White" />
                    <GradientStop Offset="1" Color="Green" />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Ellipse MouseLeftButtonDown="left2_MouseLeftButtonDown" x:Name="left2" Canvas.Left="175" Canvas.Top="124"  Height="30" HorizontalAlignment="Left" Width="30">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.35 0.35"
                    Center="0.35 0.35">
                    <GradientStop Offset="0" Color="White" />
                    <GradientStop Offset="1" Color="Green" />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Ellipse MouseLeftButtonDown="left3_MouseLeftButtonDown" x:Name="left3" Height="30" HorizontalAlignment="Left" Width="30" Canvas.Left="235" Canvas.Top="124">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.35 0.35"
                    Center="0.35 0.35">
                    <GradientStop Offset="0" Color="White" />
                    <GradientStop Offset="1" Color="Green" />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Ellipse MouseLeftButtonDown="right1_MouseLeftButtonDown" x:Name="right1" Height="30" HorizontalAlignment="Right" Width="30" VerticalAlignment="Bottom" Canvas.Left="355" Canvas.Top="124">
            <Ellipse.Fill>
                <RadialGradientBrush Center="0.35,0.35" GradientOrigin="0.35,0.35">
                    <GradientStop Color="White" Offset="0" />
                    <GradientStop Color="Red" Offset="1" />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Ellipse MouseLeftButtonDown="right2_MouseLeftButtonDown" x:Name="right2" HorizontalAlignment="Right" Height="30"  Width="30" Canvas.Left="415" Canvas.Top="124">
            <Ellipse.Fill>
                <RadialGradientBrush Center="0.35,0.35" GradientOrigin="0.35,0.35">
                    <GradientStop Color="White" Offset="0" />
                    <GradientStop Color="Red" Offset="1" />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Ellipse MouseLeftButtonDown="right3_MouseLeftButtonDown" x:Name="right3" HorizontalAlignment="Right" Height="30"  Width="30" Canvas.Left="475" Canvas.Top="124">
            <Ellipse.Fill>
                <RadialGradientBrush Center="0.35,0.35" GradientOrigin="0.35,0.35">
                    <GradientStop Color="White" Offset="0" />
                    <GradientStop Color="Red" Offset="1" />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Canvas>
</Window>

I am unable to get what is happening. Please help me in solving this problem.

My problem is simply demonstrated using this example

This is my XAML code

<grid>
        <ellipse height="30" mousedown="ellipse1_MouseDown" mouseleftbuttondown="ellipse1_MouseLeftButtonDown" x:name="ellipse1" fill="Green" width="30" horizontalalignment="Left" margin="65,124,0,108" xmlns:x="#unknown">
            <ellipse.rendertransform>
                <translatetransform x="0" y="0" />
            </ellipse.rendertransform>
        </ellipse>
        <ellipse mousedown="ellipse2_MouseDown" mouseleftbuttondown="ellipse2_MouseLeftButtonDown" x:name="ellipse2" fill="Red" height="30" width="30" margin="124,124,124,108" xmlns:x="#unknown">
            <ellipse.rendertransform>
                <translatetransform x="0" y="0" />
            </ellipse.rendertransform>
        </ellipse>
    </grid>

and below is the C# code to apply TranslateTransform on Event MouseDown..

TranslateTransform transformEllipse = new TranslateTransform();
        int ellipse1Offset = 50; int ellipse2Offset = 100;
        private void ellipse1_MouseDown(object sender, MouseButtonEventArgs e)
        {
            MoveEllipse(ellipse1Offset, (Ellipse)e.Source);
            ellipse1Offset += 50;
        }
        
        private void ellipse2_MouseDown(object sender, MouseButtonEventArgs e)
        {
            MoveEllipse(ellipse2Offset, (Ellipse)e.Source);
            ellipse2Offset += 100;
        }
        public void MoveEllipse(double to, Ellipse elps)
        {
            DoubleAnimation da = new DoubleAnimation();
            da.To = to;
            da.SpeedRatio = 2;
            da.Duration = new TimeSpan(0, 0, 3);
            elps.RenderTransform = transformEllipse;
            transformEllipse.BeginAnimation(TranslateTransform.XProperty, da);
        }

Now, when i Click an ellipse for the second time the animation TranslateTransform is applied for both the ellipses.
I want to apply animation INDIVIDUALLY without effecting the other ellipse. I mean only one ellipse that is clicked should get animated and the other one should not.Hope you now got my point...Thank you..

Posted 24-Jun-11 2:01am

YashwanthBathini

Updated 26-Jun-11 19:37pm

v4

Add a Solution

Comments

Sergey Alexandrovich Kryukov 24-Jun-11 21:24pm

The solution depends on the requirements on independents behavior, on what exactly it should be. Random? Animated one-by-one, on request, etc.
--SA

Mark Salsbery 26-Jun-11 12:39pm

The solution to what? The OP didn't ask you to write the code or mention any problem with how the animations need to be. The problem is clearly marked in bold: "I click on next ellipse both (the previous ellipse and current ellipse) are getting animated.". Most likely because the same transform is being used for every ellipse, but the code creating the transform is not shown.

YashwanthBathini 27-Jun-11 2:06am

My problem is simply demonstrated using this example

This is my XAML code

Collapse

<grid>
<ellipse height="30" mousedown="ellipse1_MouseDown" mouseleftbuttondown="ellipse1_MouseLeftButtonDown" x:name="ellipse1" fill="Green" width="30" horizontalalignment="Left" margin="65,124,0,108" xmlns:x="#unknown">
<ellipse.rendertransform>
<translatetransform x="0" y="0" />

<ellipse mousedown="ellipse2_MouseDown" mouseleftbuttondown="ellipse2_MouseLeftButtonDown" x:name="ellipse2" fill="Red" height="30" width="30" margin="124,124,124,108" xmlns:x="#unknown">
<ellipse.rendertransform>
<translatetransform x="0" y="0" />

and below is the C# code to apply TranslateTransform on Event MouseDown..

Collapse

TranslateTransform transformEllipse = new TranslateTransform();
int ellipse1Offset = 50; int ellipse2Offset = 100;
private void ellipse1_MouseDown(object sender, MouseButtonEventArgs e)
{
MoveEllipse(ellipse1Offset, (Ellipse)e.Source);
ellipse1Offset += 50;
}

private void ellipse2_MouseDown(object sender, MouseButtonEventArgs e)
{
MoveEllipse(ellipse2Offset, (Ellipse)e.Source);
ellipse2Offset += 100;
}
public void MoveEllipse(double to, Ellipse elps)
{
DoubleAnimation da = new DoubleAnimation();
da.To = to;
da.SpeedRatio = 2;
da.Duration = new TimeSpan(0, 0, 3);
elps.RenderTransform = transformEllipse;
transformEllipse.BeginAnimation(TranslateTransform.XProperty, da);
}

Now, when i Click an ellipse for the second time the animation TranslateTransform is applied for both the ellipses.
I want to apply animation INDIVIDUALLY without effecting the other ellipse. I mean only one ellipse that is clicked should get animated and the other one should not.Hope you now got my point...Thank you..

Mark Salsbery 27-Jun-11 16:14pm

I was referring to this line:

elps.RenderTransform = transformEllipse;

WHat is transformEllips? You don't show that, but if it's only one object then every ellipse you set elps.RenderTransform = transformEllipse to is sharing the same transform so when you animate the transform it applies to all. If this is the case, you need to create a unique transform instance for each ellipse.

YashwanthBathini 28-Jun-11 1:01am

Sorry for omitting that statement you guessed it right..It is working as I expected it to be..

Thank you..

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)