Question

我想在wpf中制作动画，它会像下面一样放大2个矩形：

在放大之前有没有办法将它们组合在一起？

from this smaller image

to this bigger one

或者，我可以在放大动画之前将它们组合成1个矩形吗？

--------------------- update ------------------------- ---

没有人回答我的问题:(但我有点自己找到解决方案。也许这不是最好的解决方案，但它确实有效。而不是将2个放在一起。我只是将它们放在画布上，然后制作动画。画布。

Answer 1

这是答案，更多的是C＃而不是面向XAML。

为ScaleTransform和Slider提供名称以在代码中处理它们。没有数据绑定。

<Canvas x:Name="root" Margin="20 20" RenderTransformOrigin="0,0" >
    <Canvas.RenderTransform>
        <TransformGroup>
            <!--ScaleX="{Binding ElementName=sliderScale, Path=Value}" ScaleY="{Binding ElementName=sliderScale, Path=Value}"-->
            <ScaleTransform x:Name="scaleTransform" />
        </TransformGroup>
    </Canvas.RenderTransform>
    <Rectangle Fill="Red" Stroke="Black" Width="200" Height="200"/>
    <Rectangle Canvas.Top="20" Canvas.Left="20" Stroke="Black" Fill="Green"  Width="100" Height="100"/>
</Canvas>
    <Slider x:Name="sliderScale"
        ValueChanged="SliderScaleValueChanged"
        Canvas.Left="35" Canvas.Top="251" Height="25" Width="273" Value="1" Maximum="2" Margin="74,249,170,45"/>

一个ValueChanged回调，用于更改包含矩形的Canvas上的缩放变换：

private void SliderScaleValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    scaleTransform.ScaleX =
    scaleTransform.ScaleY = sliderScale.Value;
}

第一个XAML答案和第二个C＃面向答案，你应该至少有一个满足的答案; - ）

此致

Answer 2

可以使用Panel子类（如Grid，Canvas，...）组合矩形和其他框架元素（如Texblocks）。然后对网格应用缩放变换会缩放两个矩形。

以下是您可以尝试的代码示例 - 您可以使用滑块放大/缩小：

<!DOCTYPE html>
<html lang="en" ng-app='MyApp'>
<head>
    <meta charset="UTF-8">
    <title>Slider Practice</title>
    <link rel="stylesheet" href="bower_components/slick-carousel/slick/slick.css">
    <link rel="stylesheet" href="bower_components/slick-carousel/slick/slick-theme.css">
</head>
<body ng-controller="MainCtrl as ctrl">

    <slick 
            settings="slickConfig"
            data="number">
        <div>
            <img src="img/img_01.jpg">
        </div>
        <div>
            <img src="img/img_02.jpg">
        </div>
        <div>
            <img src="img/img_03.jpg">
        </div>
        <div>
            <img src="img/img_04.jpg">
        </div>
        <div>
            <img src="img/img_05.jpg">
        </div>
        <div>
            <img src="img/img_06.jpg">
        </div>
        <div>
            <img src="img/img_07.jpg">
        </div>
        <div>
            <img src="img/img_08.jpg">
        </div>
        <div>
            <img src="img/img_09.jpg">
        </div>
        <div>
            <img src="img/img_10.jpg">
        </div>
    </slick>

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/slick-carousel/slick/slick.js"></script>
    <script src="bower_components/angular-slick-carousel/dist/angular-slick.min.js"></script>
    <script src="js/app.js"></script>

</body>
</html>

所有转换都是在XAML中完成的，但也可以在C＃/ Vb.Net中完成。

此致

动画2矩阵

2 个答案: