WP8.1 Storyboard Scale while Translate Manipulation 翻译操作

Question

我正在为 Windows Phone 8.1.

使用 C#

我有什么：我拖动一个透明的（不可见，但可访问）滑块和一个网格跟随滑块的路径 TranslateX 操作：

<Grid Opacity="1" x:Name="innerGrid" HorizontalAlignment="Left" Margin="4,0,0,0">
  <Grid.RenderTransform>
     <CompositeTransform TranslateX="{Binding transXexact}" />
  </Grid.RenderTransform>

  [... stuff inside Grid ...]

</Grid>
<Slider x:Name="sliderPercent2" Minimum="0" Maximum="100" Value="0" Opacity="0" Style="{StaticResource customSliderBigOverlay}" ValueChanged="sliderPercent_ValueChanged" ManipulationMode="TranslateX" ManipulationStarted="sliderPercent2_ManipulationStarted" ManipulationCompleted="sliderPercent2_ManipulationCompleted" />

和代码端：

private void sliderPercent_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    if (sender != null)
    {
        myPercView.transX = Convert.ToInt32(e.NewValue);
        myPercView.transXexact = e.NewValue * (Window.Current.Bounds.Width - 38 - 40 - 10) / 100;
    }
}

private void sliderPercent2_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
    Storyboard s = new Storyboard();

    DoubleAnimation doubleAni = new DoubleAnimation();
    doubleAni.To = 0;
    doubleAni.Duration = new Duration(TimeSpan.FromMilliseconds(200));
    Storyboard.SetTarget(doubleAni, innerGrid);
    Storyboard.SetTargetProperty(doubleAni, "Opacity");

    s.Children.Add(doubleAni);

    s.Begin();
}

private void sliderPercent2_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
    Storyboard s = new Storyboard();

    DoubleAnimation doubleAni = new DoubleAnimation();
    doubleAni.To = 1;
    doubleAni.Duration = new Duration(TimeSpan.FromMilliseconds(300));
    Storyboard.SetTarget(doubleAni, innerGrid);
    Storyboard.SetTargetProperty(doubleAni, "Opacity");

    s.Children.Add(doubleAni);

    s.Begin();
}

现在一切正常，但我想更进一步。现在我还希望 innerGrid 放大到 0。因此我需要 ScaleX 和 ScaleY。我可以使用以下代码将它添加到情节提要中：

var xAnim = new DoubleAnimation();
var yAnim = new DoubleAnimation();
xAnim.Duration = TimeSpan.FromMilliseconds(300);
yAnim.Duration = TimeSpan.FromMilliseconds(300);
xAnim.To = 1;
yAnim.To = 1;
Storyboard.SetTarget(xAnim, innerGrid);
Storyboard.SetTarget(yAnim, innerGrid);
Storyboard.SetTargetProperty(xAnim, "(UIElement.RenderTransform).(CompositeTransform.ScaleX)");
Storyboard.SetTargetProperty(yAnim, "(UIElement.RenderTransform).(CompositeTransform.ScaleY)");

但是当我移动滑块时它不会在 X 方向平移，而是在我开始操作时放大到它所在的位置 0。

我想要的：在仍然应用 TranslateX 操作的同时使用动画将网格缩放为 0，以便网格在缩小时跟随我的移动。

Answer 1

技巧如预期的那样简单 - 必须将另一个 Grid 放在淡出 Grid 上并分别为这些网格设置动画。

WP8.1 Storyboard Scale while Translate Manipulation 翻译操作

WP8.1 Storyboard Scale while Translate Manipulation

animation

xaml

storyboard

windows-phone-8.1