Question

我开发了UWP应用程序，其中包含带有透明项目背景的图像的列表视图，例如在Windows Phone开始屏幕上（例如https://www.windowscentral.com/sites/wpcentral.com/files/styles/larger/public/field/image/2014/04/Clean_vs_Busy.jpg?itok=58NioLgB）。我决定将我的解决方案建立在UWP Community toolkit parallax service上。首先，我采取了项目的左上角：

var p = parallaxElement.TransformToVisual(scroller).TransformPoint(new Point(0, 0));

我应该在动画表达式中添加此偏移量？另外，我没有找到完整的文档。

 ExpressionAnimation expression = compositor.CreateExpressionAnimation(
        "Matrix4x4.CreateFromTranslation(Vector3(HorizontalMultiplier * scroller.Translation.X, VerticalMultiplier * scroller.Translation.Y, 0.0f))");
    expression.SetReferenceParameter("scroller", scrollerViewerManipulation);
    expression.SetScalarParameter("offsetX", (float)p.X);
    expression.SetScalarParameter("offsetY", (float)p.Y);

换句话说，我希望“查看共享大图像上的项目”;物品是帆布的整体。

Answer 1

要为列表中的所有图片设置动画，您可以关注sample from the Windows Composition team。

这是tl / dr版本：

创建动画。在加载页面时执行此操作：

private void SetupAnimation()
{
    // available with SDK version 15063
    Compositor compositor = Window.Current.Compositor;
    // available with previous SDK version
    //Compositor compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

    // Get scrollviewer using UWP Community Toolkit extension method
    ScrollViewer myScrollViewer = ImageList.FindDescendant<ScrollViewer>();
    _scrollProperties = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

    // Setup the expression
    var scrollPropSet = _scrollProperties.GetSpecializedReference<ManipulationPropertySetReferenceNode>();
    var startOffset = ExpressionValues.Constant.CreateConstantScalar("startOffset", 0.0f);
    var parallaxValue = 0.5f;
    var parallax = (scrollPropSet.Translation.Y + startOffset);
    _parallaxExpression = parallax * parallaxValue - parallax;
}

在容器更改时为列表中的每个图像设置动画（注意：订阅ListView的ContainerContentChanging事件）

private void ImageList_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
{
    // Find the image element to animate
    Image image = args.ItemContainer.ContentTemplateRoot.GetFirstDescendantOfType<Image>();

    Visual visual = ElementCompositionPreview.GetElementVisual(image);
    // You'll want to use the right size for your images
    visual.Size = new Vector2(960f, 960f);

    if (_parallaxExpression != null)
    {
        _parallaxExpression.SetScalarParameter("StartOffset", (float)args.ItemIndex * visual.Size.Y / 4.0f);
    visual.StartAnimation("Offset.Y", _parallaxExpression);
    }
}

此示例适用于ListView或GridView。

具有偏移的UWP视差

1 个答案: