2

我正在使用 Windows UI 开发实验室示例库中的示例。我使用 ShyHeader 示例放入我的应用程序，但我没有使用完全相同的代码，但我实际上根据自己的需要编辑了示例。我的问题是如何使用表达式节点淡入与滚动查看器相对应的特定 XAML 元素，我可以使用滚动查看器淡出元素。但我无法从不透明度 0 -> 不透明度 1 淡入元素。 这是我的代码。

<ScrollViewer x:Name="MyScrollViewer">
    <Grid>
        <local:MyAdaptiveView Margin="0,300,0,0"
                  x:Name="AllVideosGridView"/>
        <Grid x:Name="Header" Height="300" VerticalAlignment="Top">
            <FlipView x:Name="MainFlipView" 
            </FlipView>
            <Grid Background="Blue" Height="150" VerticalAlignment="Bottom" Opacity="0.5" Name="FrontGrid">

            </Grid>
        </Grid>
    </Grid>
</ScrollViewer>

页面加载方法

唯一重要的一段代码只是在这个方法的最后，最后 4、5 行，你可以看到我可以通过1-progresNode淡出元素，但我尝试淡入另一个元素（ frontVisual ）做0+ progressNode不起作用，即使在我滚动之后，frontVisual 实际上仍然保持在 0 不透明度。private void ShyView_Loaded(object sender, RoutedEventArgs e) { // 从 MyScrollViewer 获取包含滚动值的 PropertySet _scrollerPropertySet = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(MyScrollViewer); _compositor = _scrollerPropertySet.Compositor;

        // Create a PropertySet that has values to be referenced in the ExpressionAnimations below
        _props = _compositor.CreatePropertySet();
        _props.InsertScalar("progress", 0);
        _props.InsertScalar("clampSize", 150);
        _props.InsertScalar("scaleFactor", 0.7f);

        // Get references to our property sets for use with ExpressionNodes
        var scrollingProperties = _scrollerPropertySet.GetSpecializedReference<ManipulationPropertySetReferenceNode>();
        var props = _props.GetReference();
        var progressNode = props.GetScalarProperty("progress");
        var clampSizeNode = props.GetScalarProperty("clampSize");
        var scaleFactorNode = props.GetScalarProperty("scaleFactor");

        // Create a blur effect to be animated based on scroll position
        var blurEffect = new GaussianBlurEffect()
        {
            Name = "blur",
            BlurAmount = 0.0f,
            BorderMode = EffectBorderMode.Hard,
            Optimization = EffectOptimization.Balanced,
            Source = new CompositionEffectSourceParameter("source")
        };

        var blurBrush = _compositor.CreateEffectFactory(
            blurEffect,
            new[] { "blur.BlurAmount" })
            .CreateBrush();

        blurBrush.SetSourceParameter("source", _compositor.CreateBackdropBrush());

        // Create a Visual for applying the blur effect
        _blurredBackgroundImageVisual = _compositor.CreateSpriteVisual();
        _blurredBackgroundImageVisual.Brush = blurBrush;
        _blurredBackgroundImageVisual.Size = new Vector2((float)Header.ActualWidth, (float)Header.ActualHeight);

        // Insert the blur visual at the right point in the Visual Tree
        ElementCompositionPreview.SetElementChildVisual(Header, _blurredBackgroundImageVisual);

        // Create and start an ExpressionAnimation to track scroll progress over the desired distance
        ExpressionNode progressAnimation = EF.Clamp(-scrollingProperties.Translation.Y / clampSizeNode, 0, 1);
        _props.StartAnimation("progress", progressAnimation);

        // Create and start an ExpressionAnimation to animate blur radius between 0 and 15 based on progress
        ExpressionNode blurAnimation = EF.Lerp(0, 15, progressNode);
        _blurredBackgroundImageVisual.Brush.Properties.StartAnimation("blur.BlurAmount", blurAnimation);

        // Get the backing visual for the header so that its properties can be animated
        Visual headerVisual = ElementCompositionPreview.GetElementVisual(Header);

        // Create and start an ExpressionAnimation to clamp the header's offset to keep it onscreen
        ExpressionNode headerTranslationAnimation = EF.Conditional(progressNode < 1, 0, -scrollingProperties.Translation.Y - clampSizeNode);
        headerVisual.StartAnimation("Offset.Y", headerTranslationAnimation);

        // Create and start an ExpressionAnimation to scale the header during overpan
        ExpressionNode headerScaleAnimation = EF.Lerp(1, 1.25f, EF.Clamp(scrollingProperties.Translation.Y / 50, 0, 1));
        headerVisual.StartAnimation("Scale.X", headerScaleAnimation);
        headerVisual.StartAnimation("Scale.Y", headerScaleAnimation);

        //Set the header's CenterPoint to ensure the overpan scale looks as desired
        headerVisual.CenterPoint = new Vector3((float)(Header.ActualWidth / 2), (float)Header.ActualHeight, 0);

        // Get the backing visual for the photo in the header so that its properties can be animated
        Visual photoVisual = ElementCompositionPreview.GetElementVisual(MainFlipView);

        // Create and start an ExpressionAnimation to opacity fade out the image behind the header
        ExpressionNode imageOpacityAnimation = 1 - progressNode;
        photoVisual.StartAnimation("opacity", imageOpacityAnimation);

        // Get the front visual for the photo in the header so that its properties can be animated
        Visual frontVisual = ElementCompositionPreview.GetElementVisual(FrontGrid);

        // Create and start an ExpressionAnimation to opacity fade out the image behind the header
        ExpressionNode imageOpacityAnimation2 = 0 + progressNode;
        frontVisual.StartAnimation("opacity", imageOpacityAnimation2);
    }

请注意我真正想要的行为是，当我向下滚动时，FlipView应该淡出，当我向上滚动到顶部时，它应该淡入，这是完美的，但我希望FrontGrid与之完全相反，即：淡入淡出向下滚动时进入并在向上滚动时淡出。

提前致谢

4

1 回答 1

2

你的表情看起来不错。

请注意，Opacity您使用 Composition 制作动画的Opacity是Visual. 但是，Opacity您0.5在FrontGridXAML 上的设置来自UIElement. 这样做会破坏合成不透明度表达式动画。

修复很简单 - 尝试获得Visual你的FrontGrid权利，InitializeComponent然后将其设置Opacity为0.5那里（即frontVisual.Opacity = 0.5）而不是在 XAML 中设置它。

由于XAML-Composition Interop Behavior 更改，您将从周年更新开始看到这种“奇怪”的行为。

完整的解释请阅读这个官方文档。

简而言之，XAML 不知道 Composition 是否改变了Opacity，它仍然认为它应该0.5是上次设置的样子。所以它会尝试覆盖并导致动画失败。这也发生在其他一些属性Offset上Size。

我的建议是，如果你去作曲，试着一直去作曲。:)

于 2017-06-29T13:03:04.023 回答