2017-05-15 80 views
0

我開發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); 

換句話說,我想使「在共享大圖像上查看項目」生效;項目是在畫布整體。

+0

您是否嘗試在項目的網格視圖(如WP主屏幕)下動畫一個圖像?或者你是否試圖在你的「圖像列表視圖」中爲你的所有圖像製作動畫? –

+0

我想動畫的一些/所有的圖像列表視圖 – Ivan

回答

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。

+0

謝謝,這就是我一直在尋找。您能否建議如何將startOffsetX添加到此解決方案並製作Offset.XY動畫? – Ivan

+0

您可以添加另一個動畫「Offset.X」,就像Offset.Y一樣 –