Xamarin Forms - 使用 C# 对图像源的更改进行动画处理

【问题标题】：Xamarin Forms - animate a change of image source with C#Xamarin Forms - 使用 C# 对图像源的更改进行动画处理
【发布时间】：2018-10-28 18:08:44
【问题描述】：

我正在寻找是否有办法进行更改，如果图像源看起来好像滑入一样，就像轮播一样。

我查看了this post，但这里的答案建议一个简单的动画，而不是效果幻灯片，我的设置类似于上面提到的帖子，因为我的图像源绑定到视图中的变量型号。

有什么办法可以做到吗？

【问题讨论】：

使用简单动画有什么问题？只需调用TranslateTo 移动图像，也许还使用FadeTo 让它（dis）出现？ blog.xamarin.com/creating-animations-with-xamarin-forms
谢谢，我想我可以通过这个和 Easing 的组合得到我想要的东西
很高兴能帮上忙，祝你好运:)
@Johannes 好主意。在此基础上，我用这个例子给出了答案。

标签： c# image animation xamarin.forms

【解决方案1】：

Xamarin.Forms 提供的默认动画功能足以实现您想要的。

例如，按照@Johannes 的想法，您可以制作出漂亮的动画。

这是一个实现：

XAML

<Image x:Name="image" 
       Source="Icon"
       HorizontalOptions="CenterAndExpand"/>
<Button Clicked="Button_Clicked"
        Text="Animate"
        HorizontalOptions="Center"/>

背后的代码

private async void Button_Clicked(object sender, EventArgs e)
{
    uint transitionTime = 600;
    double displacement = image.Width;

    await Task.WhenAll(
        image.FadeTo(0, transitionTime, Easing.Linear),
        image.TranslateTo(-displacement, image.Y, transitionTime, Easing.CubicInOut));

    // Changes image source.
    image.Source = ImageSource.FromFile("Icon");

    await image.TranslateTo(displacement, 0, 0);
    await Task.WhenAll(
        image.FadeTo(1, transitionTime, Easing.Linear),
        image.TranslateTo(0, image.Y, transitionTime, Easing.CubicInOut));
}

结果

希望对你有帮助。

【讨论】：