The basics of any animation is moving something from one location to the other. In this code snippet I use to Image elements to slide away previously selected image and slide in the newly selected one.<\/p>\n
<\/p>\n
<Label x:Name=<\/span>\"txtFile\"<\/span> HorizontalAlignment=<\/span>\"Stretch\"<\/span> \/>
<Canvas HorizontalAlignment=<\/span>\"Stretch\"<\/span> VerticalAlignment=<\/span>\"Stretch\"<\/span>>
<Image x:Name=<\/span>\"newImage\"<\/span> Canvas.Left=<\/span>\"0\"<\/span> Canvas.Top=<\/span>\"0\"<\/span> \/>
<Image x:Name=<\/span>\"oldImage\"<\/span> Canvas.Left=<\/span>\"0\"<\/span> Canvas.Top=<\/span>\"0\"<\/span> \/>
<\/Canvas><\/span><\/pre>\n<\/div>\n
<\/p>\n
assuming that I have already given the previously selected image, my new image file will be given through a function call like <\/p>\nAnimateLeftToRight(selectedFile);<\/p><\/blockquote>\n
This method will swap the images and create a storyboard to begin animating. I start the newImage from x-position that equals to minus Window.Width and the old one starts from 0 and moves to Window.Width:<\/div>\n
<\/p>\n
<\/p>\n\/\/\/<\/span> <\/span><summary><\/span>
<\/span>\/\/\/<\/span> Begins a story which animates two images from left to right
<\/span>\/\/\/<\/span> the old image takes the source from te new image just before assigning the new one
<\/span>\/\/\/<\/span> and they move together in the distance of Window.Width
<\/span>\/\/\/<\/span> <\/span><\/summary><\/span>
<\/span>\/\/\/<\/span> <\/span><param name=\"path\"><\/span>the path of the new image<\/span><\/param><\/span>
<\/span>private<\/span> <\/span>void<\/span> AnimateLeftToRight(<\/span>string<\/span> path)
{
oldImage.Source = newImage.Source;
newImage.Source = <\/span>new<\/span> BitmapImage(<\/span>new<\/span> Uri(path));
var myStoryboard = <\/span>new<\/span> Storyboard();
myStoryboard.Children.Add(MakeAnimation(-<\/span>this<\/span>.Width, <\/span>0<\/span>, <\/span>\"newImage\"<\/span>));
myStoryboard.Children.Add(MakeAnimation(<\/span>0<\/span>, <\/span>this<\/span>.Width, <\/span>\"oldImage\"<\/span>));
myStoryboard.Begin(<\/span>this<\/span>);
}<\/span><\/pre>\n<\/div>\n
<\/p>\n
Making animation can be done in different ways using different EasingFunction, But this one looked easy to understand and look nice on my example:<\/p>\n <\/p>\n
\/\/\/<\/span> <\/span><summary><\/span>
<\/span>\/\/\/<\/span> Creates a DoubleAnimation that moves the target from left to right
<\/span>\/\/\/<\/span> <\/span><\/summary><\/span>
<\/span>\/\/\/<\/span> <\/span><param name=\"from\"><\/span>starting point X<\/span><\/param><\/span>
<\/span>\/\/\/<\/span> <\/span><param name=\"to\"><\/span>ending point X<\/span><\/param><\/span>
<\/span>\/\/\/<\/span> <\/span><param name=\"target\"><\/span>the target element to set the x to <\/span><\/param><\/span>
<\/span>\/\/\/<\/span> <\/span><returns><\/span>the created animation<\/span><\/returns><\/span>
<\/span>private<\/span> DoubleAnimation MakeAnimation(<\/span>double<\/span> from, <\/span>double<\/span> to, <\/span>string<\/span> target)
{
<\/span>const<\/span> <\/span>double<\/span> durationSeconds = <\/span>1<\/span>;
var animation = <\/span>new<\/span> DoubleAnimation
{
Duration = <\/span>new<\/span> Duration(TimeSpan.FromSeconds(durationSeconds)),
AutoReverse = <\/span>false<\/span>,
From = from,
To = to,
EasingFunction = <\/span>new<\/span> PowerEase()
{
EasingMode = EasingMode.EaseInOut,
Power = <\/span>5<\/span>
}
};
Storyboard.SetTargetName(animation, target);
Storyboard.SetTargetProperty(animation, <\/span>new<\/span> PropertyPath(Canvas.LeftProperty));
<\/span>return<\/span> animation;
}<\/span><\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"The basics of any animation is moving something from one location to the other. In this code snippet I use to Image elements to slide away previously selected image and slide in the newly selected one. The Image elements need to sit in a Canvas in order to let the Left property make sence. <Label … Continue reading “Animate Image Left To Right”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[50,52,51],"tags":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false},"uagb_author_info":{"display_name":"Pouya Panahy","author_link":"http:\/\/panahy.nl\/index.php\/author\/pouya\/"},"uagb_comment_info":0,"uagb_excerpt":"The basics of any animation is moving something from one location to the other. In this code snippet I use to Image elements to slide away previously selected image and slide in the newly selected one. The Image elements need to sit in a Canvas in order to let the Left property make sence. <Label…","_links":{"self":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts\/56"}],"collection":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/comments?post=56"}],"version-history":[{"count":0,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts\/56\/revisions"}],"wp:attachment":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/media?parent=56"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/categories?post=56"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/tags?post=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}