带偏移量的UWP视差

我开发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。首先，我注意到在项目的左上点：带偏移量的UWP视差

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

换句话说，我想使“在共享大图像上查看项目”生效;项目是在画布整体。

来源

2017-05-15 Ivan

您是否尝试在项目的网格视图（如WP主屏幕）下动画一个图像？或者你是否试图在你的“图像列表视图”中为你的所有图像制作动画？ –

我想动画的一些/所有的图像列表视图 – Ivan

要为列表中的所有图像设置动画，您可以按照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。

来源

2017-05-17 14:48:20

谢谢，这就是我一直在寻找。您能否建议如何将startOffsetX添加到此解决方案并制作Offset.XY动画？ – Ivan

您可以添加另一个动画“Offset.X”，就像Offset.Y一样 –

带偏移量的UWP视差

回答

相关问题