Question

到目前为止，我还没有找到这个简单问题的答案：

如何为BackgroundImage设置动画？

BackgroundImage = "1.jpg"; // <--- initial

countdown = new System.Timers.Timer();

countdown.Interval = 2000;
countdown.Elapsed += (sender, e) => 
{
    if (BackgroundImage == "1.jpg")
    {
        System.Diagnostics.Debug.WriteLine("change background to 2");

        Device.BeginInvokeOnMainThread(() =>
        {
            BackgroundImage = "marcus.jpg";
        });

    }
    else
    {
        System.Diagnostics.Debug.WriteLine("change background to 1");

        Device.BeginInvokeOnMainThread(() =>
        {
            BackgroundImage = "1.jpg";
        });
    }

};
countdown.Enabled = true;

现在，我想使用这种背景，而不是更改背景，我非常想通过幻灯片模拟Apple的照片：

最初是背景1.jpg
移动动画并向其移动
淡化背景到2.jpg
在两者之间冲洗并重复循环播放图像

但是，我不知道如何检索图像对象，以便对其进行动画处理。

请注意，我不需要gif，只是简单的静止图像。

Answer 1

看看PageRenderer源代码（see here for Android），您可以很容易地发现，没有像您假设的那样底层Image

void UpdateBackgroundImage(Page view)
{
    if (!string.IsNullOrEmpty(view.BackgroundImage))
        this.SetBackground(Context.GetDrawable(view.BackgroundImage));
}

他们宁愿在本机控件中直接设置它。这意味着您必须模仿背景图像才能达到动画效果（这个词甚至存在吗？）。

我不会让您准备使用源代码，但是我用Grid达到了类似的目的（也可能使用AbsoluteLayout）

Grid的行和列都只有一个
包含背景的Image应该在其他任何子项之前（在集合中，不一定是临时的）添加
如果没有背景Image，则会直接添加新的背景图片
如果已经有一个背景图片，则将新图片添加为Opacity等于0
创建两个动画
淡出旧图像的人
淡入新图像的人

代码：

private void FadeViews(View newView, View currentView)
{
    newView.Opacity = 0;
    Grid.Children.Insert(0, newView);

    newView.Animate("FadeIn", d => newView.Opacity = d, 0, 1);
    newView.Animate("FadeOut", d => currentView.Opacity = d, 1, 0, finished: (_, __) => this.Grid.Children.Remove(currentView));
}

由于我使用的是TranslateTo而不是Animate，所以我的确切代码看起来有些不同，但是应该这样做。

对ContentPage的BackgroundImage进行动画处理

1 个答案: