Trying to make an animation, the same as here ru.4game.com/lineage2classic/install/

Essence - when you press a button, one picture shifts down - the other one should be taken out by the other pictures, which will replace the previous ones. I have 10 pictures (5 cut into two). I tried to do it this way.

var animDown = new ThicknessAnimation(); animDown.From = new Thickness(673, -688, -5, 0); animDown.To = new Thickness(673, 0, -4, 0); animDown.Duration = TimeSpan.FromMilliseconds(500); im2_2.BeginAnimation(Image.MarginProperty, animDown);

But this code moves only one image ...

Please help

 private void AnimUp(Image img) { im4_4.Margin = new Thickness(673, 686, -5, -686); var animUp = new ThicknessAnimation(); var animUp1 = new ThicknessAnimation(); if (img.Margin == new Thickness(673, 0, -4, 0)) { animUp.To = new Thickness(673, -688, -4, 0); animUp1.To = new Thickness(673, 0, -4, 0); } animUp.Duration = TimeSpan.FromMilliseconds(500); animUp1.Duration = TimeSpan.FromMilliseconds(500); img.BeginAnimation(Image.MarginProperty, animUp); im4_4.BeginAnimation(Image.MarginProperty, animUp1); im4_4.BeginAnimation(Image.MarginProperty, animUp1); } private void AnimDw(Image img) { im4.Margin = new Thickness(0, -687, 0, 0); var animDw = new ThicknessAnimation(); var animDw1 = new ThicknessAnimation(); if (img.Margin == new Thickness(0, 0, 0, 0)) { animDw.To = new Thickness(0, 687, 0, -687); animDw1.To = new Thickness(0, 0, 0, 0); } animDw.Duration = TimeSpan.FromMilliseconds(500); animDw1.Duration = TimeSpan.FromMilliseconds(500); img.BeginAnimation(Image.MarginProperty, animDw); im4.BeginAnimation(Image.MarginProperty, animDw1); } private void btnSlide_Click(object sender, RoutedEventArgs e) { AnimDw(im5); AnimUp(im5_5); }

This thing works but this way: one picture shifts another and back

    1 answer 1

    The next line is directly responsible for the execution of the animation for a particular image.

     im2_2.BeginAnimation(Image.MarginProperty, animDown);

    You have it in the code, apparently one. So there is nothing surprising in the fact that only one image is moved. For which this animation is "assigned".

    In order to solve this problem, it is necessary to implement animation for the remaining images.

    In this case, the animation code can be rendered in a separate method. For example:

     private void Anim (Image img, int delta) { var animDown = new ThicknessAnimation(); animDown.From = new Thickness(27, img.Margin.Top, 0, 0); if (delta > 0) { animDown.To = new Thickness(27, img.Margin.Top + 10, 0, 0); } else { animDown.To = new Thickness(27, img.Margin.Top - 10, 0, 0); } animDown.Duration = TimeSpan.FromMilliseconds(500); img.BeginAnimation(Image.MarginProperty, animDown); }

    When this method is called in the MouseWheel event handler for two images, they will synchronously move up or down, depending on the direction of rotation of the mouse wheel.

     private void Grid_MouseWheel(object sender, MouseWheelEventArgs e) { Anim(image1, e.Delta); Anim(image2, e.Delta); }

    Something like that. I hope the principle is clear ...

    • This is understandable, so here's how to make it so that up to the next button press, some images are moved, while others are moved down? - Max Fadeev
    • To do this, you need to implement the animation for the other images. Because only one of them has it, the others will not move anywhere. I explained the implementation principle in detail in the answer. - Streletz
    • As I understand it, you need a comparison - if the position is such, then change to another position ... But I don’t understand how to add it so that with the next press the images change? - Max Fadeev
    • What for? Arrange several images under each other and when scrolling they will replace each other as in your example by reference. - Streletz
    • A little bit wrong (some picture should somehow shift the other from top to bottom .. I don’t understand something (( - Max Fadeev