带偏移的 UWP 视差

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);

换句话说，我想实现"looking through items on shared large image"； canvas.

中的项目是完整的

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 视差

UWP Parallax with offset

c#

animation

parallax

uwp

windows-community-toolkit