C# 水平展开动画，从另一个视图的中心开始向左展开

我正在尝试制作一个从中心到另一个视图边缘的水平填充动画。 首先，我集中了视图，该视图将在主视图的中心展开动画，然后使用

ScaleXTo

将动画设置为主视图宽度：

XAML代码：

    <StackLayout Padding="16" Spacing="10">
    
        <Grid
            Margin="0,0,0,16">
            <BoxView
                x:Name="firstView"
                BackgroundColor="Blue"
                HorizontalOptions="Start"
                HeightRequest="30"
                WidthRequest="180" />
    
            <BoxView
                x:Name="secondView"
                BackgroundColor="Black"
                HeightRequest="10"
                Scale="1"
                HorizontalOptions="StartAndExpand"
                VerticalOptions="Center"
                WidthRequest="1" />
        </Grid>
    
        <Button
            Clicked="Button_OnClicked"
            Text="Animate!" />
    </StackLayout>

执行时，动画视图将比主视图大，如下图所示

---

更新：由于您在评论中解释希望动画从中心开始，我正在更新答案。 看起来Xamarin中有一个关于缩放的bug，因为对于WidthRequest和ScaleX的某些值，它可以按预期工作。例如，此实现可以为您实现以下功能：

    private void Button_OnClicked(object sender, EventArgs e)
    {
        double scale = 6;
        double startWidth = firstView.Width / scale;
        secondView.TranslationX = firstView.Bounds.Center.X - startWidth / 2;
        secondView.WidthRequest = startWidth;
        secondView.ScaleXTo(scale, 1000);
    }

但它不适用于更大的

比例值

，即它将超出

第一视图

。 因此，最好是采用类似建议的方式。他的解决方案唯一的问题是它会将

secondView

扩展到整个

firstView

。另外，我正在使用

任务

，因为您单击的

按钮

不是

异步

方法：

        private void Button_OnClicked(object sender, EventArgs e)
        {
            var rectangle = new Rectangle(secondView.X, secondView.Y, firstView.Width, secondView.Height);
            secondView.TranslationX = firstView.Bounds.Center.X;
            Task translate = Task.Factory.StartNew(() => secondView.TranslateTo(rectangle.Left, 0, 500));
            Task layout = Task.Factory.StartNew(() => secondView.LayoutTo(rectangle, 500));
            Task.WaitAll(new[] { translate, layout });
        }

旧答案： 如果只是水平填充是您想要实现的，那么就不需要进行平移和缩放。您只需单击按钮即可执行如下操作：

    private void Button_OnClicked(object sender, EventArgs e)
    {
        secondView.LayoutTo(new Rectangle(secondView.X, secondView.Y, firstView.Width, secondView.Height));
    }

---

您可以通过同时运行两个动画来实现这一点，以获得平滑的视觉效果、翻译和调整大小（

LayoutTo

）

---

是否希望动画仅扩展宽度，以与第一个视图相同？我不明白为什么翻译或者你想同时缩放和定位？嗨，我忘了补充关于动画起源的问题了！我试图使展开动画从firstView的中心开始，这样当第二个视图设置动画时，它会展开到firstView的边。所以，TranslationX集中第二个视图开始展开。所以你想让它从中心开始向两个方向展开吗？是的！设置scaleX时，我可能忘记了一些计算值。我是xamarin表单的新手，但据我所知，scaleX属性的行为就像是X宽度的乘法器，对吧？这很有效！但我忘了在问题描述中提到，我试图存档的是动画从firstView的中心开始，并扩展到其边缘，布局从左到右开始：）我已经更新了答案，并建议如何让动画从中心开始。谢谢！任务的第二个解决方案对我来说很管用。这很管用，但会填满整个firstView，我只想从中间填满它的左右两侧@adamm的第二个解决方案帮了我的忙，谢谢你的帮助！我的坏朋友没有很好地理解这个问题，谢谢你的反馈，你可能想更新标题，使其更详细/具体，以便将来的读者能够立即理解它“BoxView水平扩展动画，从另一个BoxView的中心开始，到它的左边界”？

    private void Button_OnClicked(object sender, EventArgs e)
    {
        secondView.LayoutTo(new Rectangle(secondView.X, secondView.Y, firstView.Width, secondView.Height));
    }

private async void Button_Clicked(object sender, EventArgs e)
{
    secondView.TranslationX = firstView.Bounds.Center.X;
    secondView.TranslateTo(firstView.Bounds.Left, 0, 500);
    await secondView.LayoutTo(firstView.Bounds, 500);
}