c# - 水平展开动画从另一个 View 的中心开始到它的左边界

Question

我正在尝试制作从中心到其他 View 边缘的水平填充动画。
首先，我将执行展开动画的 View 集中在主 View 的中心，然后使用 ScaleXTo 进行动画处理。到主 View 宽度:
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>

背后的代码:

    private void Button_OnClicked(object sender, EventArgs e) {
        secondView.TranslationX = firstView.Bounds.Center.X;
        secondView.ScaleXTo(firstView.Width);
    }

执行时，动画 View 变得比主 View 大，如下图所示
Result

Answer 1

更新 :既然你在评论中解释说你希望动画从中心开始，我正在更新答案。
看起来 Xamarin 中存在缩放错误，因为对于 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);
    }

但它不适用于更大的值 scale ， IE。它将超出 firstView .
所以，最好使用类似 @Cfun 的东西。建议的。他的解决方案唯一的问题是它会扩展 secondView到整个 firstView .另外，我正在使用 Task , 因为你的 Button_OnClicked不是 async方法:

        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 });
        }

旧答案 :
如果您只想实现水平填充，则无需平移然后缩放。您可以执行 Button_OnClicked像这样:

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