c# - 如何在 WPF 中为图像缩放变化设置动画？

Question

我正在构建一个图像查看器。

我创建了一项功能，当用户移动 slider 时，它会更改 ZoomLevel 属性值。随后，这将根据 ZoomLevel 属性提供的值缩放图像。

<Image 
    Name="image"
    Source="Sample1.jpg"
    Opacity="1" 
    VerticalAlignment="Center"
    HorizontalAlignment="Center"
    Stretch="None"
    RenderTransformOrigin="0.5,0.5" 
    RenderOptions.BitmapScalingMode="HighQuality">
    <Image.RenderTransform>
        <TransformGroup>
            <ScaleTransform 
                ScaleX="{Binding Path=ZoomLevel}" 
                ScaleY="{Binding Path=ZoomLevel}" />
            <TranslateTransform />
        </TransformGroup>
    </Image.RenderTransform>
</Image>

我希望能够使用 DoubleAnimation 实现缩放动画。动画应该从当前缩放级别开始，然后达到绑定(bind)的 ZoomLevel 属性中指定的缩放。如果有人可以在 XAML 方面提供一些帮助，那就太好了。谢谢!

鼠标滚轮代码:

private void border_MouseWheel(object sender, MouseWheelEventArgs e)
{
    int delta;

    delta = e.Delta;
    zoom(delta);
}

private void zoom(int delta)
{
    double zoomIncrement;

    //Different zoom levels at different zoom stages
    if (ZoomLevel > 2)
    {
        zoomIncrement = Math.Sign(delta) * 0.2;
    }
    else if (ZoomLevel >= 1 && ZoomLevel <= 2)
    {
        zoomIncrement = Math.Sign(delta) * 0.1;
    }
    else
    {
        zoomIncrement = Math.Sign(delta) * 0.06;
    }

    //Rounding zoom level to boundary values
    //Zooming is allowed from 10% to 600%
    if (ZoomLevel + zoomIncrement > 6)
    {
        ZoomLevel = 6;
    }
    else if (ZoomLevel + zoomIncrement < 0.1)
    {
        ZoomLevel = 0.1;
    }
    else
    {
        ZoomLevel += zoomIncrement;
    }
}

Answer 1

有点乱，但试试这个。

namespace Zoom
{

    public partial class Window1
    {   
        public double ZoomLevel { get; set; }
        public double SlideLevel { get; set; }

        public Window1()
        {
            InitializeComponent();

            ZoomLevel = 1.0;
            SlideLevel = 1.0;
            image.MouseWheel += image_MouseWheel;

        }

        private void image_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            double zoom = e.Delta > 0 ? .1 : -.1;
            slider.Value = (SlideLevel + zoom);
        }

        private void ZoomImage(double zoom)
        {
            Storyboard storyboardh = new Storyboard();
            Storyboard storyboardv = new Storyboard();

            ScaleTransform scale = new ScaleTransform(ZoomLevel, ZoomLevel);
            image.RenderTransformOrigin = new Point(0.5, 0.5);
            image.RenderTransform = scale;

            double startNum = ZoomLevel;
            double endNum = (ZoomLevel += zoom);

            if (endNum > 1.0)
            {
                endNum = 1.0;
                ZoomLevel = 1.0;
            }

            DoubleAnimation growAnimation = new DoubleAnimation();
            growAnimation.Duration = TimeSpan.FromMilliseconds(300);
            growAnimation.From = startNum;
            growAnimation.To = endNum;
            storyboardh.Children.Add(growAnimation);
            storyboardv.Children.Add(growAnimation);

            Storyboard.SetTargetProperty(growAnimation, new PropertyPath("RenderTransform.ScaleX"));
            Storyboard.SetTarget(growAnimation, image);
            storyboardh.Begin();

            Storyboard.SetTargetProperty(growAnimation, new PropertyPath("RenderTransform.ScaleY"));
            Storyboard.SetTarget(growAnimation, image);
            storyboardv.Begin();
        }

        private void slider_ValueChanged(object sender, System.Windows.RoutedPropertyChangedEventArgs<double> e)
        {
            double zoomChange = (SlideLevel - slider.Value) * -1;
            SlideLevel = SlideLevel + zoomChange;

            ZoomImage(zoomChange);
        }
    }
}

我找到了另一个 stack question很有帮助

这也是我当前的 XAML 设置。

    <Border MaxWidth="500"
        MaxHeight="500"
        Height="500"
        Width="500"
        Name="border">
    <Image
        Name="image"
        Source="picture1.png"
        Opacity="1"
        VerticalAlignment="Center"
        HorizontalAlignment="Center"
        Stretch="Fill"
        RenderTransformOrigin="0.5,0.5"
        RenderOptions.BitmapScalingMode="HighQuality"
        ClipToBounds="True">
    </Image>
    </Border>
    <Slider
        HorizontalAlignment="Left"
        Margin="44,70,0,148"
        Name="slider"
        Width="24"
        Value="1.0"
        Minimum="0"
        Maximum="1.0"
        LargeChange="0.1"
        Orientation="Vertical"
        FlowDirection="LeftToRight"
        TickFrequency="0.1"
        IsSnapToTickEnabled="False"
        ValueChanged="slider_ValueChanged" />