示例#1
0
 private void SetSharedParameters(ExpressionAnimation animation)
 {
     animation.SetReferenceParameter("ScrollingProperties", _scrollingProperties);
     animation.SetScalarParameter("FullWidth", ActualWidth.ToFloat());
     animation.SetScalarParameter("SelectedIndex", SelectedIndex);
     animation.SetScalarParameter("UncheckedStateOpacity", 0.4f);
 }
示例#2
0
        private void AddPullRefreshEvents()
        {
            scrollViewer.DirectManipulationStarted   += OnDirectManipulationStarted;
            scrollViewer.DirectManipulationCompleted += OnDirectManipulationCompleted;
            _scrollerViewerManipulation = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scrollViewer);
            var compositor = _scrollerViewerManipulation.Compositor;

            _rotationAnimation = compositor.CreateExpressionAnimation("min(max(0, ScrollManipulation.Translation.Y) * Multiplier, MaxDegree)");
            _rotationAnimation.SetScalarParameter("Multiplier", 10.0f);
            _rotationAnimation.SetScalarParameter("MaxDegree", 400.0f);
            _rotationAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

            _opacityAnimation = compositor.CreateExpressionAnimation("min(max(0, ScrollManipulation.Translation.Y) / Divider, 1)");
            _opacityAnimation.SetScalarParameter("Divider", 30.0f);
            _opacityAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

            _offsetAnimation = compositor.CreateExpressionAnimation("(min(max(0, ScrollManipulation.Translation.Y) / Divider, 1)) * MaxOffsetY");
            _offsetAnimation.SetScalarParameter("Divider", 30.0f);
            _offsetAnimation.SetScalarParameter("MaxOffsetY", REFRESH_ICON_MAX_OFFSET_Y);
            _offsetAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

            _refreshIconVisual             = ElementCompositionPreview.GetElementVisual(RefreshIcon);
            _refreshIconVisual.CenterPoint = new Vector3(Convert.ToSingle(RefreshIcon.Width / 2), Convert.ToSingle(RefreshIcon.Height / 2), 0);

            _refreshSymbleVisual             = ElementCompositionPreview.GetElementVisual(RefreshSymble);
            _refreshSymbleVisual.CenterPoint = new Vector3(Convert.ToSingle(RefreshSymble.Width / 2), Convert.ToSingle(RefreshSymble.Height / 2), 0);
            // Kick off the animations.
            OnRefreshComplete();
        }
示例#3
0
        /// <summary>
        /// Sets up the composition animations that position the Refresh Indicator and main content
        /// based on the overpan amount.
        /// </summary>
        private void UpdateCompositionAnimations()
        {
            if (m_root != null &&
                m_scroller != null &&
                m_scrollerContent != null &&
                m_refreshIndicatorContainer != null)
            {
                if (m_scrollerContentAnimation == null)
                {
                    CompositionPropertySet scrollingProperties = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(m_scroller);
                    Compositor             compositor          = scrollingProperties.Compositor;

                    // Ensure that the maximum overpan amount corresponds to the Refresh Indicator's height.
                    m_scrollerContentVisual    = ElementCompositionPreview.GetElementVisual(m_scrollerContent);
                    m_scrollerContentAnimation = compositor.CreateExpressionAnimation(@"overpanMultiplier * max(0, scrollingProperties.Translation.Y)");
                    m_scrollerContentAnimation.SetReferenceParameter("scrollingProperties", scrollingProperties);

                    // Ensure that the Refresh Indicator is positioned on top of the main content.
                    m_refreshIndicatorContainerVisual    = ElementCompositionPreview.GetElementVisual(m_refreshIndicatorContainer);
                    m_refreshIndicatorContainerAnimation = compositor.CreateExpressionAnimation(@"-refreshIndicatorContainerHeight");

                    // Create RefreshPropertySet and populate it with the PullRatio and PullProgress variables that vary from 0 to 1.
                    this.RefreshPropertySet = compositor.CreatePropertySet();

                    m_pullRatioAnimation = compositor.CreateExpressionAnimation(@"clamp(max(0, scrollingProperties.Translation.Y) / maxOverpan + staticRatio, 0, 1)");
                    m_pullRatioAnimation.SetReferenceParameter("scrollingProperties", scrollingProperties);
                    this.RefreshPropertySet.InsertScalar("PullRatio", 0);

                    m_pullProgressAnimation = compositor.CreateExpressionAnimation(@"clamp(max(0, scrollingProperties.Translation.Y) / thresholdOverpan + staticProgress, 0, 1)");
                    m_pullProgressAnimation.SetReferenceParameter("scrollingProperties", scrollingProperties);
                    this.RefreshPropertySet.InsertScalar("PullProgress", 0);
                }

                m_scrollerContentAnimation.SetScalarParameter("overpanMultiplier",
                                                              (float)(m_refreshIndicatorContainer.ActualHeight / m_scroller.ActualHeight / MAX_SCROLLVIEWER_OVERPAN_RATIO - 1.0f / m_scroller.ZoomFactor));
                m_scrollerContentVisual.StartAnimation("Offset.Y", m_scrollerContentAnimation);

                m_refreshIndicatorContainerAnimation.SetScalarParameter("refreshIndicatorContainerHeight",
                                                                        (float)m_refreshIndicatorContainer.ActualHeight);
                m_refreshIndicatorContainerVisual.StartAnimation("Offset.Y", m_refreshIndicatorContainerAnimation);

                float maxOverpan = (float)(m_scroller.ActualHeight * MAX_SCROLLVIEWER_OVERPAN_RATIO);
                m_pullRatioAnimation.SetScalarParameter("maxOverpan", maxOverpan);
                float staticRatio = (m_isAutoRefreshing || m_isSuppressingOverpan || m_scrollerContent.ManipulationMode == ManipulationModes.None) ? (float)DEFAULT_REFRESH_INDICATOR_THRESHOLD_RATIO : 0.0f;
                m_pullRatioAnimation.SetScalarParameter("staticRatio", staticRatio);
                this.RefreshPropertySet.StartAnimation("PullRatio", m_pullRatioAnimation);

                float thresholdOverpan = (float)(double.IsNaN(this.PullThreshold) ?
                                                 (m_scroller.ActualHeight * MAX_SCROLLVIEWER_OVERPAN_RATIO * DEFAULT_REFRESH_INDICATOR_THRESHOLD_RATIO) : this.PullThreshold);
                m_pullProgressAnimation.SetScalarParameter("thresholdOverpan", thresholdOverpan);
                float staticProgress = (m_refreshActivated || m_isAutoRefreshing || m_isSuppressingOverpan || m_scrollerContent.ManipulationMode == ManipulationModes.None) ? 1.0f : 0.0f;
                m_pullProgressAnimation.SetScalarParameter("staticProgress", staticProgress);
                this.RefreshPropertySet.StartAnimation("PullProgress", m_pullProgressAnimation);
            }
        }
        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            //Only run this code if the app is running on Windows 10 1511 or later because API not supported on earlier versions of Windows

            if (ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 2))
            {
                // Get a referece to a "propertyset" that contains the following keys
                //  Translation (Vector3)
                //  CenterPoint (Vector3)
                //  Scale (Vector3)
                //  Matrix (Matrix4x4)
                // that represent the state of the scrollview at any moment (i.e. as the user manipulates the scrollviewer with mouse, touch, touchpad)

                CompositionPropertySet scrollerManipProps = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScroller);

                Compositor compositor = scrollerManipProps.Compositor;

                // Create the expression
                ExpressionAnimation expression = compositor.CreateExpressionAnimation("scroller.Translation.Y * parallaxFactor");

                // wire the ParallaxMultiplier constant into the expression
                expression.SetScalarParameter("parallaxFactor", 0.3f);

                // set "dynamic" reference parameter that will be used to evaluate the current position of the scrollbar every frame
                expression.SetReferenceParameter("scroller", scrollerManipProps);

                // Get the background image and start animating it's offset using the expression
                Visual backgroundVisual = ElementCompositionPreview.GetElementVisual(background);
                backgroundVisual.StartAnimation("Offset.Y", expression);
            }
        }
示例#5
0
        private void AssignParallax()
        {
            if (ParallaxContent == null)
            {
                return;
            }
            if (AssociatedObject == null)
            {
                return;
            }

            var scroller = AssociatedObject as ScrollViewer;

            if (scroller == null)
            {
                scroller = AssociatedObject.GetChildOfType <ScrollViewer>();
            }
            if (scroller == null)
            {
                return;
            }

            CompositionPropertySet scrollerViewerManipulation = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scroller);

            Compositor compositor = scrollerViewerManipulation.Compositor;

            ExpressionAnimation expression = compositor.CreateExpressionAnimation("ScrollManipululation.Translation.Y * ParallaxMultiplier");

            expression.SetScalarParameter("ParallaxMultiplier", (float)ParallaxMultiplier);
            expression.SetReferenceParameter("ScrollManipululation", scrollerViewerManipulation);

            Visual textVisual = ElementCompositionPreview.GetElementVisual(ParallaxContent);

            textVisual.StartAnimation("Offset.Y", expression);
        }
示例#6
0
        private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            var width  = this.ActualWidth;
            var height = this.ActualHeight;

            if (parallaxAnimation4 != null)
            {
                parallaxAnimation4.SetScalarParameter("offset", 3 * (float)width);
            }
            var verSc = height / h;

            Base.Width      = 2 * width;
            BGLayer0.Width  = 2 * width;
            BGLayer1.Width  = 2 * width;
            BGLayer2.Width  = 2 * width;
            BGLayer3.Width  = 2 * width;
            BGLayer0.Height = height;
            BGLayer1.Height = height;
            BGLayer2.Height = height;
            BGLayer3.Height = height;
            var horSc = width / w;

            BGLayer0.ReplaceElements(horSc, verSc);
            BGLayer1.ReplaceElements(horSc, verSc);
            BGLayer2.ReplaceElements(horSc, verSc);
            BGLayer3.ReplaceElements(horSc, verSc);
            h = height;
            w = width;
            WelcomePanel.Height = ActualHeight;
        }
        private void LoadNowPlayingListAnimation()
        {
            _nowPlayingScrollViewer = NowPlayingList.GetScrollViewer();
            _nowPlayingScrollViewer.DirectManipulationStarted   += OnNowPlayingListManipulationStarted;
            _nowPlayingScrollViewer.DirectManipulationCompleted += OnNowPlayingListManipulationCompleted;

            _nowPlayingManipulation = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(_nowPlayingScrollViewer);
            _nowPlayingCompositor   = _nowPlayingManipulation.Compositor;

            _nowPlayingOpacityAnimation = _nowPlayingCompositor.CreateExpressionAnimation("min(max(0, -ScrollManipulation.Translation.X*4) / Divider, 1)");
            _nowPlayingOpacityAnimation.SetScalarParameter("Divider", 95.0f);
            _nowPlayingOpacityAnimation.SetReferenceParameter("ScrollManipulation", _nowPlayingManipulation);

            _nowPlayingRefreshBorderOffsetAnimation = _nowPlayingCompositor.CreateExpressionAnimation(" ControlWidth+(max(min(0, ScrollManipulation.Translation.X*4) / Divider, -1)) * MaxOffsetX");
            _nowPlayingRefreshBorderOffsetAnimation.SetScalarParameter("Divider", 95.0f);
            _nowPlayingRefreshBorderOffsetAnimation.SetScalarParameter("MaxOffsetX", 95.0f);
            _nowPlayingRefreshBorderOffsetAnimation.SetScalarParameter("ControlWidth", (float)(ActualWidth));
            _nowPlayingRefreshBorderOffsetAnimation.SetReferenceParameter("ScrollManipulation", _nowPlayingManipulation);

            _nowPlayingBorderOffsetAnimation = _nowPlayingCompositor.CreateExpressionAnimation("(max(min(0, ScrollManipulation.Translation.X) / Divider, -1)) * MaxOffsetX");
            _nowPlayingBorderOffsetAnimation.SetScalarParameter("Divider", 95.0f);
            _nowPlayingBorderOffsetAnimation.SetScalarParameter("MaxOffsetX", 95.0f);
            _nowPlayingBorderOffsetAnimation.SetReferenceParameter("ScrollManipulation", _nowPlayingManipulation);

            _nowPlayingResetAnimation = _nowPlayingCompositor.CreateScalarKeyFrameAnimation();
            _nowPlayingResetAnimation.InsertKeyFrame(1.0f, 0.0f);

            _nowPlayingReleaseBorderVisual = ElementCompositionPreview.GetElementVisual(NowPlayingReleaseBorder);

            var border = (Border)VisualTreeHelper.GetChild(NowPlayingList, 0);

            _nowPlayingBorderVisual = ElementCompositionPreview.GetElementVisual(border);

            PrepareNowPlayingListExpressionAnimationsOnScroll();
        }
        private static void OnNormalizedCenterPointChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (d is FrameworkElement element &&
                !DesignTimeHelpers.IsRunningInLegacyDesignerMode &&
                e.NewValue is string newValue)
            {
                Vector2             center     = newValue.ToVector2();
                Visual              visual     = element.GetVisual();
                const string        expression = "Vector2(this.Target.Size.X * X, this.Target.Size.Y * Y)";
                ExpressionAnimation animation  = visual.Compositor.CreateExpressionAnimation(expression);

                animation.SetScalarParameter("X", center.X);
                animation.SetScalarParameter("Y", center.Y);

                visual.StopAnimation("CenterPoint.XY");
                visual.StartAnimation("CenterPoint.XY", animation);
            }
        }
示例#9
0
        private void GridView_Loaded(object sender, RoutedEventArgs e)
        {
            var scroll = List.Descendants <ScrollViewer>().FirstOrDefault() as ScrollViewer;

            if (scroll != null)
            {
                _scrollingHost = scroll;
                _scrollingHost.ChangeView(null, 0, null, true);
                scroll.ViewChanged += Scroll_ViewChanged;
                Scroll_ViewChanged(scroll, null);

                _scrollingHost.Padding = new Thickness(0, Math.Max(0, BackgroundPanel.Margin.Top - _scrollingHost.VerticalOffset), 0, 0);

                var brush = App.Current.Resources["SystemControlBackgroundChromeMediumLowBrush"] as SolidColorBrush;
                var props = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scroll);

                if (_background == null)
                {
                    _background = ElementCompositionPreview.GetElementVisual(BackgroundPanel).Compositor.CreateSpriteVisual();
                    ElementCompositionPreview.SetElementChildVisual(BackgroundPanel, _background);
                }

                _background.Brush = _background.Compositor.CreateColorBrush(brush.Color);
                _background.Size  = new System.Numerics.Vector2((float)BackgroundPanel.ActualWidth, (float)BackgroundPanel.ActualHeight);
                _background.Clip  = _background.Compositor.CreateInsetClip();

                _groupHeader = ElementCompositionPreview.GetElementVisual(GroupHeader);

                _expression = _expression ?? _background.Compositor.CreateExpressionAnimation("Max(Maximum, Scrolling.Translation.Y)");
                _expression.SetReferenceParameter("Scrolling", props);
                _expression.SetScalarParameter("Maximum", -(float)BackgroundPanel.Margin.Top + 1);
                _background.StopAnimation("Offset.Y");
                _background.StartAnimation("Offset.Y", _expression);

                _expressionHeader = _expressionHeader ?? _background.Compositor.CreateExpressionAnimation("Max(0, Maximum - Scrolling.Translation.Y)");
                _expressionHeader.SetReferenceParameter("Scrolling", props);
                _expressionHeader.SetScalarParameter("Maximum", -(float)BackgroundPanel.Margin.Top);
                _groupHeader.StopAnimation("Offset.Y");
                _groupHeader.StartAnimation("Offset.Y", _expressionHeader);

                _expressionClip = _expressionClip ?? _background.Compositor.CreateExpressionAnimation("Min(0, Maximum - Scrolling.Translation.Y)");
                _expressionClip.SetReferenceParameter("Scrolling", props);
                _expressionClip.SetScalarParameter("Maximum", -(float)BackgroundPanel.Margin.Top + 1);
                _background.Clip.StopAnimation("Offset.Y");
                _background.Clip.StartAnimation("Offset.Y", _expressionClip);
            }

            var panel = List.ItemsPanelRoot as ItemsWrapGrid;

            if (panel != null)
            {
                panel.SizeChanged += (s, args) =>
                {
                    Scroll_ViewChanged(scroll, null);
                };
            }
        }
示例#10
0
        private void ScrollViewer_Loaded(object sender, RoutedEventArgs e)
        {
            var border = (Border)VisualTreeHelper.GetChild(_scrollViewer, 0);

            _scrollViewerBorder         = border;
            _scrollerViewerManipulation = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(_scrollViewer);
            _compositor = _scrollerViewerManipulation.Compositor;

            double ratio = 1.0;

            _header.Measure(new Size(this.ActualWidth, this.ActualHeight));
            var headerHeight = _header.DesiredSize.Height;

            if (headerHeight == 0)
            {
                headerHeight = 50;
            }

            if (RefreshThreshold == 0.0)
            {
                RefreshThreshold = headerHeight;
            }
            ratio = RefreshThreshold / headerHeight;

            _offsetAnimation = _compositor.CreateExpressionAnimation("(min(max(0, ScrollManipulation.Translation.Y * ratio) / Divider, 1)) * MaxOffsetY");
            _offsetAnimation.SetScalarParameter("Divider", (float)RefreshThreshold);
            _offsetAnimation.SetScalarParameter("MaxOffsetY", (float)RefreshThreshold * 5 / 4);
            _offsetAnimation.SetScalarParameter("ratio", (float)ratio);
            _offsetAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

            _opacityAnimation = _compositor.CreateExpressionAnimation("min((max(0, ScrollManipulation.Translation.Y * ratio) / Divider), 1)");
            _opacityAnimation.SetScalarParameter("Divider", (float)headerHeight);
            _opacityAnimation.SetScalarParameter("ratio", (float)1);
            _opacityAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

            _headerVisual = ElementCompositionPreview.GetElementVisual(_header);

            _contentVisual = ElementCompositionPreview.GetElementVisual(_scrollViewerBorder);

            _headerVisual.StartAnimation("Offset.Y", _offsetAnimation);
            _headerVisual.StartAnimation("Opacity", _opacityAnimation);
            _contentVisual.StartAnimation("Offset.Y", _offsetAnimation);
        }
        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            Compositor compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

            // Get scrollviewer
            ScrollViewer myScrollViewer = ThumbnailList.GetFirstDescendantOfType <ScrollViewer>();

            _scrollProperties = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

            // Setup the expression
            _parallaxExpression = compositor.CreateExpressionAnimation();
            _parallaxExpression.SetScalarParameter("StartOffset", 0.0f);
            _parallaxExpression.SetScalarParameter("ParallaxValue", 0.5f);
            _parallaxExpression.SetScalarParameter("ItemHeight", 0.0f);
            _parallaxExpression.SetReferenceParameter("ScrollManipulation", _scrollProperties);
            _parallaxExpression.Expression = "(ScrollManipulation.Translation.Y + StartOffset - (0.5 * ItemHeight)) * ParallaxValue - (ScrollManipulation.Translation.Y + StartOffset - (0.5 * ItemHeight))";

            ThumbnailList.ItemsSource = Model.Items;
        }
示例#12
0
        public void StartAnimation(bool update = false)
        {

            if (update || expression == null || visual == null)
            {
                visual = ElementCompositionPreview.GetElementVisual(VisualElement);
                //if (0 <= VisualElement.Margin.Top && VisualElement.Margin.Top <= ScrollViewer.ActualHeight)
                //{
                //    min = (float)-VisualElement.Margin.Top;
                //    max = (float)ScrollViewer.ActualHeight + min;
                //}
                //else if (VisualElement.Margin.Top < 0)
                //{

                //}
                //else if (VisualElement.Margin.Top > ScrollViewer.ActualHeight)
                //{

                //}
                if (scrollViewerManipProps == null)
                {
                    scrollViewerManipProps = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer);
                }
                Compositor compositor = scrollViewerManipProps.Compositor;

                // Create the expression
                //expression = compositor.CreateExpressionAnimation("min(max((ScrollViewerManipProps.Translation.Y + VerticalOffset), MinValue), MaxValue)");
                ////Expression = compositor.CreateExpressionAnimation("ScrollViewerManipProps.Translation.Y +VerticalOffset");

                //expression.SetScalarParameter("MinValue", min);
                //expression.SetScalarParameter("MaxValue", max);
                //expression.SetScalarParameter("VerticalOffset", (float)ScrollViewer.VerticalOffset);

                expression = compositor.CreateExpressionAnimation("ScrollViewerManipProps.Translation.Y + VerticalOffset");
                ////Expression = compositor.CreateExpressionAnimation("ScrollViewerManipProps.Translation.Y +VerticalOffset");

                //expression.SetScalarParameter("MinValue", min);
                //expression.SetScalarParameter("MaxValue", max);
                VerticalOffset = ScrollViewer.VerticalOffset;
                expression.SetScalarParameter("VerticalOffset", (float)ScrollViewer.VerticalOffset);

                // set "dynamic" reference parameter that will be used to evaluate the current position of the scrollbar every frame
                expression.SetReferenceParameter("ScrollViewerManipProps", scrollViewerManipProps);

            }



            visual.StartAnimation("Offset.Y", expression);

            IsActive = true;
            //Windows.UI.Xaml.Media.CompositionTarget.Rendering -= OnCompositionTargetRendering;

            //Windows.UI.Xaml.Media.CompositionTarget.Rendering += OnCompositionTargetRendering;
        }
        public void StartAnimation(bool update = false)
        {
            if (update || expression == null || visual == null)
            {
                visual = ElementCompositionPreview.GetElementVisual(VisualElement);
                if (0 <= VisualElement.Margin.Top && VisualElement.Margin.Top <= ScrollViewer.ActualHeight)
                {
                    min = (float)-VisualElement.Margin.Top;
                    max = (float)ScrollViewer.ActualHeight + min;
                }
                else if (VisualElement.Margin.Top < 0)
                {
                }
                else if (VisualElement.Margin.Top > ScrollViewer.ActualHeight)
                {
                }
                if (scrollViewerManipProps == null)
                {
                    scrollViewerManipProps = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer);
                }
                Compositor compositor = scrollViewerManipProps.Compositor;

                // Create the expression
                expression = compositor.CreateExpressionAnimation("min(max((ScrollViewerManipProps.Translation.Y + VerticalOffset), MinValue), MaxValue)");
                //Expression = compositor.CreateExpressionAnimation("ScrollViewerManipProps.Translation.Y +VerticalOffset");

                expression.SetScalarParameter("MinValue", min);
                expression.SetScalarParameter("MaxValue", max);
                expression.SetScalarParameter("VerticalOffset", (float)ScrollViewer.VerticalOffset);

                // set "dynamic" reference parameter that will be used to evaluate the current position of the scrollbar every frame
                expression.SetReferenceParameter("ScrollViewerManipProps", scrollViewerManipProps);
            }



            visual.StartAnimation("Offset.Y", expression);

            IsActive = true;
            //Windows.UI.Xaml.Media.CompositionTarget.Rendering -= OnCompositionTargetRendering;
            Windows.UI.Xaml.Media.CompositionTarget.Rendering += OnCompositionTargetRendering;
        }
示例#14
0
        protected override void OnConnected(UIElement targetElement)
        {
            if (targetElement == null)
            {
                return;
            }

            Compositor compositor = Window.Current.Compositor;

            // Create SpotLight and set its properties

            SpotLight spotLight = compositor.CreateSpotLight();

            spotLight.InnerConeColor = Colors.FloralWhite;
            spotLight.OuterConeColor = Colors.FloralWhite;

            spotLight.InnerConeAngleInDegrees = 0f;
            spotLight.InnerConeIntensity      = 4;
            //spotLight.OuterConeAngleInDegrees = 3f;

            spotLight.ConstantAttenuation  = 1f;
            spotLight.LinearAttenuation    = 0.253f;
            spotLight.QuadraticAttenuation = 0.58f;
            spotLight.Offset = new Vector3(0, 0, 0);

            // Associate CompositionLight with XamlLight
            this.CompositionLight = spotLight;

            // Define resting position Animation
            Vector3 restingPosition            = new Vector3(200, 200, 400);
            CubicBezierEasingFunction cbEasing = compositor.CreateCubicBezierEasingFunction(new Vector2(0.3f, 0.7f), new Vector2(0.9f, 0.5f));

            _offsetAnimation = compositor.CreateVector3KeyFrameAnimation();
            _offsetAnimation.InsertKeyFrame(1, restingPosition, cbEasing);
            _offsetAnimation.Duration = TimeSpan.FromSeconds(0.5f);

            //spotLight.Offset = restingPosition;

            // Define expression animation that relates light's offset to pointer position
            CompositionPropertySet hoverPosition = ElementCompositionPreview.GetPointerPositionPropertySet(targetElement);

            _lightPositionExpression = compositor.CreateExpressionAnimation("Vector3(hover.Position.X, hover.Position.Y, height)");
            _lightPositionExpression.SetReferenceParameter("hover", hoverPosition);
            _lightPositionExpression.SetScalarParameter("height", 150f);

            // Configure pointer entered/ exited events
            targetElement.PointerMoved  += TargetElement_PointerMoved;
            targetElement.PointerExited += TargetElement_PointerExited;

            // Add UIElement to the Light's Targets
            HoverLight.AddTargetElement(GetId(), targetElement);
            //MoveToRestingPosition();
        }
示例#15
0
        private void ScrollViewer_Loaded(object sender, RoutedEventArgs e)
        {
            Compositor compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

            // 创建驱动视差滚动的表达式动画。
            parallaxAnimation0 = compositor.CreateExpressionAnimation("MyForeground.Translation.X / MyParallaxRatio");
            parallaxAnimation1 = compositor.CreateExpressionAnimation("MyForeground.Translation.X / MyParallaxRatio");
            parallaxAnimation2 = compositor.CreateExpressionAnimation("MyForeground.Translation.X / MyParallaxRatio");
            parallaxAnimation3 = compositor.CreateExpressionAnimation("MyForeground.Translation.X / MyParallaxRatio");
            parallaxAnimation4 = compositor.CreateExpressionAnimation("((MyForeground.Translation.X / MyParallaxRatio) + offset)");
            // 设置对前景对象的引用。
            scrollViewerProperties = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(RootScroll);
            parallaxAnimation0.SetReferenceParameter("MyForeground", scrollViewerProperties);
            parallaxAnimation1.SetReferenceParameter("MyForeground", scrollViewerProperties);
            parallaxAnimation2.SetReferenceParameter("MyForeground", scrollViewerProperties);
            parallaxAnimation3.SetReferenceParameter("MyForeground", scrollViewerProperties);
            parallaxAnimation4.SetReferenceParameter("MyForeground", scrollViewerProperties);
            // 设置背景对象视差滚动的速度。
            parallaxAnimation0.SetScalarParameter("MyParallaxRatio", 1f);
            parallaxAnimation1.SetScalarParameter("MyParallaxRatio", 2f);
            parallaxAnimation2.SetScalarParameter("MyParallaxRatio", 4f);
            parallaxAnimation3.SetScalarParameter("MyParallaxRatio", 8f);
            parallaxAnimation4.SetScalarParameter("MyParallaxRatio", 0.5f);
            parallaxAnimation4.SetScalarParameter("offset", 3 * (float)ActualWidth);

            var backgroundVisual0 = ElementCompositionPreview.GetElementVisual(BGLayer0);
            var backgroundVisual1 = ElementCompositionPreview.GetElementVisual(BGLayer1);
            var backgroundVisual2 = ElementCompositionPreview.GetElementVisual(BGLayer2);
            var backgroundVisual3 = ElementCompositionPreview.GetElementVisual(BGLayer3);
            var backgroundVisual4 = ElementCompositionPreview.GetElementVisual(RootFrame);

            // 对背景对象开始视差动画。
            backgroundVisual0.StartAnimation("Offset.X", parallaxAnimation0);
            backgroundVisual1.StartAnimation("Offset.X", parallaxAnimation1);
            backgroundVisual2.StartAnimation("Offset.X", parallaxAnimation2);
            backgroundVisual3.StartAnimation("Offset.X", parallaxAnimation3);
            backgroundVisual4.StartAnimation("Offset.X", parallaxAnimation4);
            MainFrame.Navigate(typeof(CitiesPage), "nimabi");
            IndAni.Begin();
        }
示例#16
0
 private void SetupSkyVisualOffsetExpressionAnimation()
 {
     // Kick off an expression animation that links the roll & pitch degress to the -offset of the sky canvas visual
     // TODO: Need to constraint the offset (total offset < dimension * SkyVisualAreaRatio) with
     // CreateConditionalExpressionAnimation once the next mobile build is available.
     _skyViusalOffsetExpressionAnimation = _compositor.CreateExpressionAnimation(
         "Vector3(SkyVisual.Offset.X - Reading.Offset.X * Sensitivity, SkyVisual.Offset.Y - Reading.Offset.Y * Sensitivity, 0.0f)");
     _skyViusalOffsetExpressionAnimation.SetReferenceParameter("SkyVisual", _skyVisual);
     _skyViusalOffsetExpressionAnimation.SetReferenceParameter("Reading", _reading);
     _skyViusalOffsetExpressionAnimation.SetScalarParameter("Sensitivity", 0.2f);
     //_skyViusalOffsetExpressionAnimation.SetScalarParameter("MaxDimension", SkyVisualRadius * 2 * SkyVisualAreaRatio);
     _skyVisual.StartAnimation("Offset", _skyViusalOffsetExpressionAnimation);
 }
示例#17
0
        private static void CreateParallax(UIElement parallaxElement, ScrollViewer scroller, double horizontalMultiplier, double verticalMultiplier)
        {
            if ((parallaxElement == null) || (scroller == null))
            {
                return;
            }

            CompositionPropertySet scrollerViewerManipulation = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scroller);

            Compositor compositor = scrollerViewerManipulation.Compositor;

            ExpressionAnimation expression = compositor.CreateExpressionAnimation(
                "Matrix4x4.CreateFromTranslation(Vector3(HorizontalMultiplier * scroller.Translation.X, VerticalMultiplier * scroller.Translation.Y, 0.0f))");

            expression.SetReferenceParameter("scroller", scrollerViewerManipulation);
            expression.SetScalarParameter("HorizontalMultiplier", (float)horizontalMultiplier);
            expression.SetScalarParameter("VerticalMultiplier", (float)verticalMultiplier);

            Visual visual = ElementCompositionPreview.GetElementVisual(parallaxElement);

            visual.StartAnimation("TransformMatrix", expression);
        }
示例#18
0
        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            var scrollviewer = MyList.GetScrollViewer();
            CompositionPropertySet scrollerViewerManipulation = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scrollviewer);
            Compositor             compositor = scrollerViewerManipulation.Compositor;
            ExpressionAnimation    expression = compositor.CreateExpressionAnimation("ScrollManipululation.Translation.Y * ParallaxMultiplier");

            expression.SetScalarParameter("ParallaxMultiplier", 0.3f);
            expression.SetReferenceParameter("ScrollManipululation", scrollerViewerManipulation);
            Visual textVisual = ElementCompositionPreview.GetElementVisual(header);

            textVisual.StartAnimation("Offset.Y", expression);
        }
        private void ThumbanilList_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
        {
            Thumbnail thumbnail = args.Item as Thumbnail;
            Image     image     = args.ItemContainer.ContentTemplateRoot.GetFirstDescendantOfType <Image>();

            Visual visual = ElementCompositionPreview.GetElementVisual(image);

            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);
            }
        }
示例#20
0
        private void List_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            var itemWidth = (e.NewSize.Width - 24) / 5d;
            var minHeigth = itemWidth * 3d - 12 + 48 + 48;
            var top       = Math.Max(0, e.NewSize.Height - minHeigth);

            if (!IsFullScreenMode())
            {
                top = 0;
            }

            if (top == 0)
            {
                Header.Visibility = Visibility.Collapsed;
            }
            else
            {
                Header.Visibility = Visibility.Visible;
            }

            Header.Height = top;

            BackgroundPanel.Height = e.NewSize.Height;
            BackgroundPanel.Margin = new Thickness(0, top, 0, -top);

            if (_background != null && _expression != null && _expressionClip != null)
            {
                var brush = App.Current.Resources["SystemControlBackgroundChromeMediumLowBrush"] as SolidColorBrush;

                _background.Brush = _background.Compositor.CreateColorBrush(brush.Color);
                _background.Size  = new System.Numerics.Vector2((float)e.NewSize.Width, (float)e.NewSize.Height);
                _background.Clip  = _background.Compositor.CreateInsetClip();

                _expression.SetScalarParameter("Maximum", -(float)top + 1);
                _background.StopAnimation("Offset.Y");
                _background.StartAnimation("Offset.Y", _expression);

                _expressionHeader.SetScalarParameter("Maximum", -(float)top);
                _groupHeader.StopAnimation("Offset.Y");
                _groupHeader.StartAnimation("Offset.Y", _expressionHeader);

                _expressionClip.SetScalarParameter("Maximum", -(float)top + 1);
                _background.Clip.StopAnimation("Offset.Y");
                _background.Clip.StartAnimation("Offset.Y", _expressionClip);
            }
        }
示例#21
0
        private void buttonComposition_Click(object sender, RoutedEventArgs e)
        {
            this.visualRectangle.StartAnimation("Offset", this.vector3KeyFrameAnimation);
            //this.visualRectangle.StartAnimation("Offset.X", this.scalarKeyFrameAnimationRefreshEnd);
            //this.scalarKeyFrameAnimationRefreshEnd.InsertKeyFrame(0.1f, 30f);
            this.visualRectangle.StartAnimation("RotationAngleInDegrees", this.scalarKeyFrameAnimationRefreshEnd);

            #region Expression
            //Animation with expression
            ExpressionAnimation expressionAnimation = this.compositor.CreateExpressionAnimation();

            expressionAnimation.Expression = "visualRectangle.Offset.X > 0 ? visualRectangle.Offset.X * Multiplier : 0.0f";
            expressionAnimation.SetScalarParameter("Multiplier", 2.0f);
            expressionAnimation.SetReferenceParameter("visualRectangle", this.visualRectangle);

            this.visualRectangleExpression.StartAnimation("Offset.X", expressionAnimation);
            #endregion Expresion
        }
示例#22
0
        /*
         *      Adds a rounded rectangle child visual to a UIElement with a specified color, and X and Y corner
         *      radii.  The radii will be constrained so that there are no corners "sharper" than a circle, as in the
         *      CSS border-radius property.  Corner radii of float.PositiveInfinity will produce a "pill" shape with
         *      two circles on the short ends, connected by a rectangle.
         *
         *      <Rectangle x:Name="SpecialRect" Margin="50" Grid.Row="1" Grid.ColumnSpan="2" />
         *      AddPillVisuals(SpecialRect, Colors.Red, float.PositiveInfinity, float.PositiveInfinity);
         */
        private void AddPillVisuals(UIElement element, Color color, float cornerX, float cornerY)
        {
            var hostVisual = ElementCompositionPreview.GetElementVisual(element);
            var compositor = Window.Current.Compositor;

            ExpressionAnimation bindWidthAnimation = compositor.CreateExpressionAnimation("hostVisual.Size.X");

            bindWidthAnimation.SetReferenceParameter("hostVisual", hostVisual);
            ExpressionAnimation bindHeightAnimation = compositor.CreateExpressionAnimation("hostVisual.Size.Y");

            bindHeightAnimation.SetReferenceParameter("hostVisual", hostVisual);
            ExpressionAnimation bindCornerXAnimation = compositor.CreateExpressionAnimation("min(cornerX, min(hostVisual.Size.X, hostVisual.Size.Y)) / 2");

            bindCornerXAnimation.SetReferenceParameter("hostVisual", hostVisual);
            bindCornerXAnimation.SetScalarParameter("cornerX", cornerX);
            ExpressionAnimation bindCornerYAnimation = compositor.CreateExpressionAnimation("min(cornerY, min(hostVisual.Size.X, hostVisual.Size.Y)) / 2");

            bindCornerYAnimation.SetReferenceParameter("hostVisual", hostVisual);
            bindCornerYAnimation.SetScalarParameter("cornerY", cornerY);

            var geometry = compositor.CreateRoundedRectangleGeometry();

            geometry.StartAnimation("CornerRadius.X", bindCornerXAnimation);
            geometry.StartAnimation("CornerRadius.Y", bindCornerYAnimation);
            geometry.StartAnimation("Size.X", bindWidthAnimation);
            geometry.StartAnimation("Size.Y", bindHeightAnimation);

            var spriteShape = compositor.CreateSpriteShape(geometry);

            spriteShape.FillBrush = compositor.CreateColorBrush(color);

            var shapeVisual = compositor.CreateShapeVisual();

            shapeVisual.Shapes.Add(spriteShape);
            shapeVisual.StartAnimation("Size.X", bindWidthAnimation);
            shapeVisual.StartAnimation("Size.Y", bindHeightAnimation);

            ElementCompositionPreview.SetElementChildVisual(element, shapeVisual);
        }
示例#23
0
        private void WireAnimations()
        {
            _ContentVisual = ElementCompositionPreview.GetElementVisual(_ContentContainer);
            _LeftTextVisual = ElementCompositionPreview.GetElementVisual(_LeftTextBlock);
            _LeftContentVisual = ElementCompositionPreview.GetElementVisual(_LeftContent);
            _RightTextVisual = ElementCompositionPreview.GetElementVisual(_RightTextBlock);
            _RightContentVisual = ElementCompositionPreview.GetElementVisual(_RightContent);

            _Compositor = _ContentVisual.Compositor;

           

            _ContentAnimation = _Compositor.CreateExpressionAnimation("offset");

            _ContentAnimation.SetScalarParameter("offset", (float)_OffsetX);
            //_ContentAnimation.SetScalarParameter("maxOffset", (float)_MaxOffsetX);

            

            // Reset Animations
            

            
        }
示例#24
0
        public MainPage()
        {
            this.InitializeComponent();
            ContactsCVS.Source = _list;

            this.Loaded += (s, e) =>
            {
                _scrollViewer = ListView.GetScrollViewer();
                _scrollViewer.DirectManipulationStarted   += OnDirectManipulationStarted;
                _scrollViewer.DirectManipulationCompleted += OnDirectManipulationCompleted;

                // Retrieve the ScrollViewer manipulation and the Compositor.
                _scrollerViewerManipulation = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(_scrollViewer);
                _compositor = _scrollerViewerManipulation.Compositor;

                // At the moment there are three things happening when pulling down the list -
                // 1. The Refresh Icon fades in.
                // 2. The Refresh Icon rotates (400°).
                // 3. The Refresh Icon gets pulled down a bit (REFRESH_ICON_MAX_OFFSET_Y)
                // QUESTION 5
                // Can we also have Geometric Path animation so we can also draw the Refresh Icon along the way?
                //

                // Create a rotation expression animation based on the overpan distance of the ScrollViewer.
                _rotationAnimation = _compositor.CreateExpressionAnimation("min(max(0, ScrollManipulation.Translation.Y) * Multiplier, MaxDegree)");
                _rotationAnimation.SetScalarParameter("Multiplier", 10.0f);
                _rotationAnimation.SetScalarParameter("MaxDegree", 400.0f);
                _rotationAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

                // Create an opacity expression animation based on the overpan distance of the ScrollViewer.
                _opacityAnimation = _compositor.CreateExpressionAnimation("min(max(0, ScrollManipulation.Translation.Y) / Divider, 1)");
                _opacityAnimation.SetScalarParameter("Divider", 30.0f);
                _opacityAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

                // Create an offset expression animation based on the overpan distance of the ScrollViewer.
                _offsetAnimation = _compositor.CreateExpressionAnimation("(min(max(0, ScrollManipulation.Translation.Y) / Divider, 1)) * MaxOffsetY");
                _offsetAnimation.SetScalarParameter("Divider", 30.0f);
                _offsetAnimation.SetScalarParameter("MaxOffsetY", REFRESH_ICON_MAX_OFFSET_Y);
                _offsetAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

                // Create a keyframe animation to reset properties like Offset.Y, Opacity, etc.
                _resetAnimation = _compositor.CreateScalarKeyFrameAnimation();
                _resetAnimation.InsertKeyFrame(1.0f, 0.0f);

                // Create a loading keyframe animation (in this case, a rotation animation).
                _loadingAnimation = _compositor.CreateScalarKeyFrameAnimation();
                _loadingAnimation.InsertKeyFrame(1.0f, 360);
                _loadingAnimation.Duration          = TimeSpan.FromMilliseconds(1200);
                _loadingAnimation.IterationBehavior = AnimationIterationBehavior.Forever;

                // Get the RefreshIcon's Visual.
                _refreshIconVisual = ElementCompositionPreview.GetElementVisual(RefreshIcon);
                // Set the center point for the rotation animation.
                _refreshIconVisual.CenterPoint = new Vector3(Convert.ToSingle(RefreshIcon.ActualWidth / 2), Convert.ToSingle(RefreshIcon.ActualHeight / 2), 0);

                // Get the ListView's inner Border's Visual.
                var border = (Border)VisualTreeHelper.GetChild(ListView, 0);
                _borderVisual = ElementCompositionPreview.GetElementVisual(border);

                PrepareExpressionAnimationsOnScroll();
            };

            this.Unloaded += (s, e) =>
            {
                _scrollViewer.DirectManipulationStarted   -= OnDirectManipulationStarted;
                _scrollViewer.DirectManipulationCompleted -= OnDirectManipulationCompleted;
            };
        }
 private void SetupSkyVisualOffsetExpressionAnimation()
 {
     // Kick off an expression animation that links the roll & pitch degress to the -offset of the sky canvas visual
     // TODO: Need to constraint the offset (total offset < dimension * SkyVisualAreaRatio) with
     // CreateConditionalExpressionAnimation once the next mobile build is available.
     _skyViusalOffsetExpressionAnimation = _compositor.CreateExpressionAnimation(
         "Vector3(SkyVisual.Offset.X - Reading.Offset.X * Sensitivity, SkyVisual.Offset.Y - Reading.Offset.Y * Sensitivity, 0.0f)");
     _skyViusalOffsetExpressionAnimation.SetReferenceParameter("SkyVisual", _skyVisual);
     _skyViusalOffsetExpressionAnimation.SetReferenceParameter("Reading", _reading);
     _skyViusalOffsetExpressionAnimation.SetScalarParameter("Sensitivity", 0.2f);
     //_skyViusalOffsetExpressionAnimation.SetScalarParameter("MaxDimension", SkyVisualRadius * 2 * SkyVisualAreaRatio);
     _skyVisual.StartAnimation("Offset", _skyViusalOffsetExpressionAnimation);
 }
示例#26
0
        protected override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            this.Loaded      += GridViewEx_Loaded;
            this.SizeChanged += (s, ee) =>
            {
                _itemsWrapGrid = this.GetFirstDescendantOfType <ItemsWrapGrid>();
                if (_itemsWrapGrid == null)
                {
                    return;
                }
                int colum = (int)Math.Floor(ee.NewSize.Width / this.ItemWidthSuggest);
                _itemsWrapGrid.ItemWidth = ee.NewSize.Width / colum;
                if (colum > 1)
                {
                    this.ItemContainerStyle = (this.GetTemplateChild("RootLayout") as Grid).Resources["GridViewItemStyle2"] as Style;
                }
                else
                {
                    this.ItemContainerStyle = (this.GetTemplateChild("RootLayout") as Grid).Resources["GridViewItemStyle1"] as Style;
                }
            };

            if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)
            {
                return;
            }
            _scrollViewer = this.GetFirstDescendantOfType <ScrollViewer>();
            var binding = new Windows.UI.Xaml.Data.Binding {
                Source = _scrollViewer, Path = new PropertyPath("VerticalOffset")
            };

            BindingOperations.SetBinding(this, VerticalOffsetProperty, binding);

            _refreshIcon = this.GetTemplateChild("RefreshIcon") as SymbolIcon;
            _scrollViewer.DirectManipulationStarted   += OnDirectManipulationStarted;
            _scrollViewer.DirectManipulationCompleted += OnDirectManipulationCompleted;
            _scrollerViewerManipulation = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(_scrollViewer);
            var compositor = _scrollerViewerManipulation.Compositor;

            // At the moment there are three things happening when pulling down the list -
            // 1. The Refresh Icon fades in.
            // 2. The Refresh Icon rotates (400°).
            // 3. The Refresh Icon gets pulled down a bit (REFRESH_ICON_MAX_OFFSET_Y)
            // QUESTION 5
            // Can we also have Geometric Path animation so we can also draw the Refresh Icon along the way?
            //

            // Create a rotation expression animation based on the overpan distance of the ScrollViewer.
            _rotationAnimation = compositor.CreateExpressionAnimation("min(max(0, ScrollManipulation.Translation.Y) * Multiplier, MaxDegree)");
            _rotationAnimation.SetScalarParameter("Multiplier", 10.0f);
            _rotationAnimation.SetScalarParameter("MaxDegree", 400.0f);
            _rotationAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

            // Create an opacity expression animation based on the overpan distance of the ScrollViewer.
            _opacityAnimation = compositor.CreateExpressionAnimation("min(max(0, ScrollManipulation.Translation.Y) / Divider, 1)");
            _opacityAnimation.SetScalarParameter("Divider", 30.0f);
            _opacityAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

            // Create an offset expression animation based on the overpan distance of the ScrollViewer.
            _offsetAnimation = compositor.CreateExpressionAnimation("(min(max(0, ScrollManipulation.Translation.Y) / Divider, 1)) * MaxOffsetY");
            _offsetAnimation.SetScalarParameter("Divider", 30.0f);
            _offsetAnimation.SetScalarParameter("MaxOffsetY", REFRESH_ICON_MAX_OFFSET_Y);
            _offsetAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

            // Get the RefreshIcon's Visual.
            _refreshIconVisual = ElementCompositionPreview.GetElementVisual(_refreshIcon);
            // Set the center point for the rotation animation
            //if (!Windows.ApplicationModel.DesignMode.DesignModeEnabled)
            //{
            //    _refreshIconVisual.CenterPoint = new Vector3(Convert.ToSingle(_refreshIcon.Width / 2), Convert.ToSingle(_refreshIcon.Height / 2), 0);
            //}
            // Kick off the animations.
            _refreshIconVisual.StartAnimation("RotationAngleInDegrees", _rotationAnimation);
            _refreshIconVisual.StartAnimation("Opacity", _opacityAnimation);
            _refreshIconVisual.StartAnimation("Offset.Y", _offsetAnimation);
            this.Unloaded += (s, e) =>
            {
                _scrollViewer.DirectManipulationStarted   -= OnDirectManipulationStarted;
                _scrollViewer.DirectManipulationCompleted -= OnDirectManipulationCompleted;
            };
            //加速度计,摇一摇
            //_accelerometer = Accelerometer.GetDefault();
            //if (_accelerometer != null)
            //{
            //    // Establish the report interval
            //    uint minReportInterval = _accelerometer.MinimumReportInterval;
            //    uint reportInterval = minReportInterval > 16 ? minReportInterval : 16;
            //    _accelerometer.ReportInterval = reportInterval;

            //    // Assign an event handler for the reading-changed event
            //    _accelerometer.ReadingChanged += new TypedEventHandler<Accelerometer, AccelerometerReadingChangedEventArgs>(ReadingChanged);
            //}
        }
示例#27
0
        private void CreateAnimationTemplates(Compositor compositor)
        {
            //
            // Near-slide and far-slide animations.
            //

            _nearSlideOffsetAnimation = compositor.CreateVector3KeyFrameAnimation();
            _nearSlideOffsetAnimation.InsertExpressionKeyFrame(0.0f, "this.StartingValue");
            _nearSlideOffsetAnimation.InsertExpressionKeyFrame(1.0f, "vector3(0,0,0) - myViewportCenter");

            _farSlideOffsetAnimation = compositor.CreateVector3KeyFrameAnimation();
            _farSlideOffsetAnimation.InsertExpressionKeyFrame(0.0f, "this.StartingValue");
            _farSlideOffsetAnimation.InsertExpressionKeyFrame(0.9f, "vector3(0,0,0) - myViewportCenter");
            _farSlideOffsetAnimation.InsertExpressionKeyFrame(1.0f, "vector3(0,0,0) - myViewportCenter");

            _slideCenterAnimation = compositor.CreateVector3KeyFrameAnimation();
            _slideCenterAnimation.InsertExpressionKeyFrame(0.0f, "this.StartingValue");
            _slideCenterAnimation.InsertExpressionKeyFrame(1.0f, "myTargetCenterPoint");

            _nearSlideScaleAnimation = compositor.CreateVector3KeyFrameAnimation();
            _nearSlideScaleAnimation.InsertExpressionKeyFrame(0.00f, "this.StartingValue");
            _nearSlideScaleAnimation.InsertExpressionKeyFrame(1.00f, "myScale");

            _farSlideScaleAnimation = compositor.CreateVector3KeyFrameAnimation();
            _farSlideScaleAnimation.InsertExpressionKeyFrame(0.00f, "this.StartingValue");
            _farSlideScaleAnimation.InsertKeyFrame(0.30f, new Vector3(1.0f, 1.0f, 1.0f));
            _farSlideScaleAnimation.InsertKeyFrame(1.00f, new Vector3(1.0f, 1.0f, 1.0f));

            TimeSpan time4sec = TimeSpan.FromSeconds(4);
            TimeSpan time8sec = TimeSpan.FromSeconds(8);
            _nearSlideOffsetAnimation.Duration = time4sec;
            _farSlideOffsetAnimation.Duration = time8sec;
            _slideCenterAnimation.Duration = time4sec;
            _nearSlideScaleAnimation.Duration = time4sec;
            _farSlideScaleAnimation.Duration = time4sec;

            //
            // Zoom animations.
            //

            _zoomScaleAnimation = compositor.CreateVector3KeyFrameAnimation();
            _zoomScaleAnimation.InsertExpressionKeyFrame(0.00f, "this.StartingValue");
            _zoomScaleAnimation.InsertKeyFrame(0.40f, new Vector3(1.0f, 1.0f, 1.0f));
            _zoomScaleAnimation.InsertKeyFrame(0.60f, new Vector3(1.0f, 1.0f, 1.0f));
            _zoomScaleAnimation.InsertExpressionKeyFrame(1.00f, "myScale");

            _zoomCenterAnimation = compositor.CreateVector3KeyFrameAnimation();
            _zoomCenterAnimation.InsertExpressionKeyFrame(0.00f, "this.StartingValue");
            _zoomCenterAnimation.InsertExpressionKeyFrame(0.40f, "this.StartingValue");
            _zoomCenterAnimation.InsertExpressionKeyFrame(0.60f, "myTargetCenterPoint");
            _zoomCenterAnimation.InsertExpressionKeyFrame(1.00f, "myTargetCenterPoint");

            _zoomOffsetAnimation = compositor.CreateVector3KeyFrameAnimation();
            _zoomOffsetAnimation.InsertExpressionKeyFrame(0.00f, "this.StartingValue");
            _zoomOffsetAnimation.InsertExpressionKeyFrame(1.00f, "vector3(0,0,0) - myViewportCenter");

            TimeSpan time12sec = TimeSpan.FromSeconds(12);
            _zoomScaleAnimation.Duration = time12sec;
            _zoomCenterAnimation.Duration = time12sec;
            _zoomOffsetAnimation.Duration = time12sec;

            //
            // Stack animations.
            //

            CubicBezierEasingFunction flyInEasing;
            CubicBezierEasingFunction flyOutEasing;

            flyInEasing = compositor.CreateCubicBezierEasingFunction(new Vector2(0.0f, 1.0f), new Vector2(0.8f, 1.0f));
            _stackFlyInAnimation = compositor.CreateVector3KeyFrameAnimation();
            _stackFlyInAnimation.InsertExpressionKeyFrame(0.00f, "stackVisual.Offset + startDelta");
            _stackFlyInAnimation.InsertExpressionKeyFrame(1.00f, "stackVisual.Offset + endDelta", flyInEasing);
            _stackFlyInAnimation.Duration = TimeSpan.FromSeconds(2);

            flyOutEasing = compositor.CreateCubicBezierEasingFunction(new Vector2(0.0f, 0.4f), new Vector2(1.0f, 0.6f));
            _stackFlyOutAnimation = compositor.CreateVector3KeyFrameAnimation();
            _stackFlyOutAnimation.InsertExpressionKeyFrame(0.00f, "this.StartingValue", flyOutEasing);
            _stackFlyOutAnimation.InsertExpressionKeyFrame(0.50f, "this.StartingValue + delta", flyOutEasing);
            _stackFlyOutAnimation.InsertExpressionKeyFrame(1.00f, "originalOffset", flyOutEasing);
            _stackFlyOutAnimation.Duration = TimeSpan.FromSeconds(2);

            _stackScaleAnimation = compositor.CreateVector3KeyFrameAnimation();
            _stackScaleAnimation.InsertExpressionKeyFrame(0.00f, "this.StartingValue");
            _stackScaleAnimation.InsertExpressionKeyFrame(1.00f, "myScale");
            _stackScaleAnimation.Duration = TimeSpan.FromSeconds(6);

            //
            // Color flashlight expression animation.
            //

            // This expression returns a computes between 0 and 1 as a function of on how close the
            // center of the frame is to the center of the window.
            //   - If the frame is at the center of the window, the expression computes 0 (no
            //     desaturation).
            //   - If the frame is more than 300px away from the center of the window, the
            //     expression computes 1 (full desaturation).
            //   - If the frame is within 300px from the center of the window, the expression
            //     computes a value between 0 and 1 relative to how far the frame is from the 300px
            //     boundary (partial desaturation).

            _colorFlashlightAnimation = compositor.CreateExpressionAnimation(
                  "1.0 - min("
                + "    1.0,"
                + "    ("
                + "        ("
                + "            ( frame.Offset.x + (frame.Size.x * 0.5) + grid.Offset.x - (windowWidth * 0.5) )"
                + "          * ( frame.Offset.x + (frame.Size.x * 0.5) + grid.Offset.x - (windowWidth * 0.5) )"
                + "        ) + ("
                + "            ( frame.Offset.y + (frame.Size.y * 0.5) + grid.Offset.y - (windowHeight * 0.5) )"
                + "          * ( frame.Offset.y + (frame.Size.y * 0.5) + grid.Offset.y - (windowHeight * 0.5) )"
                + "        )"
                + "    ) / ( radius * radius )"
                + ")");

            _colorFlashlightAnimation.SetReferenceParameter("grid", _layoutManager.GridVisual);
            _colorFlashlightAnimation.SetScalarParameter("radius", 300);
            _colorFlashlightAnimation.SetScalarParameter("windowWidth", _windowWidth);
            _colorFlashlightAnimation.SetScalarParameter("windowHeight", _windowHeight);
        }
示例#28
0
        private async void OnScrollViewerDirectManipulationStarted(object sender, object e)
        {
            _isAnimating = true;
            ScrollViewer.HorizontalSnapPointsType = SnapPointsType.MandatorySingle;

            var currentHeader  = TypedHeaders[SelectedIndex];
            var previousHeader = SelectedIndex > 0 ? TypedHeaders[SelectedIndex - 1] : null;
            var nextHeader     = SelectedIndex < Headers.Count - 1 ? TypedHeaders[SelectedIndex + 1] : null;

            // Create offset animation
            var startingOffsetX   = _underlineVisual.Offset.X;
            var toNextOffsetX     = nextHeader == null ? 0 : nextHeader.OffsetX(currentHeader);
            var toPreviousOffsetX = previousHeader == null ? 0 : previousHeader.OffsetX(currentHeader);

            _underlineOffsetAnimation = _compositor.CreateExpressionAnimation($"{DRAG_DIRECTION} ? StartingOffsetX - ToNextOffsetX * {DRAG_DISTANCE_PCT} : StartingOffsetX + ToPreviousOffsetX * {DRAG_DISTANCE_PCT}");
            _underlineOffsetAnimation.SetScalarParameter("StartingOffsetX", startingOffsetX);
            _underlineOffsetAnimation.SetScalarParameter("ToNextOffsetX", toNextOffsetX);
            _underlineOffsetAnimation.SetScalarParameter("ToPreviousOffsetX", toPreviousOffsetX);
            SetSharedParameters(_underlineOffsetAnimation);

            // Create scale animation
            var startingScaleX              = _underlineVisual.Scale.X;
            var nextAndCurrentWidthDiff     = nextHeader == null ? 0 : (GetHeaderTextBlock(nextHeader).ActualWidth - GetHeaderTextBlock(currentHeader).ActualWidth).ToFloat();
            var previousAndCurrentWidthDiff = previousHeader == null ? 0 : (GetHeaderTextBlock(previousHeader).ActualWidth - GetHeaderTextBlock(currentHeader).ActualWidth).ToFloat();

            _underlineScaleAnimation = _compositor.CreateExpressionAnimation($"{DRAG_DIRECTION} ? StartingScaleX - NextAndCurrentWidthDiff * {DRAG_DISTANCE_PCT} : StartingScaleX + PreviousAndCurrentWidthDiff * {DRAG_DISTANCE_PCT}");
            _underlineScaleAnimation.SetScalarParameter("StartingScaleX", startingScaleX);
            _underlineScaleAnimation.SetScalarParameter("NextAndCurrentWidthDiff", nextAndCurrentWidthDiff);
            _underlineScaleAnimation.SetScalarParameter("PreviousAndCurrentWidthDiff", previousAndCurrentWidthDiff);
            SetSharedParameters(_underlineScaleAnimation);

            // Create opacity animations
            _currentHeaderOpacityAnimation = _compositor.CreateExpressionAnimation($"Max(1 - Abs{DRAG_DISTANCE_PCT}, UncheckedStateOpacity)");
            SetSharedParameters(_currentHeaderOpacityAnimation);

            _nextHeaderOpacityAnimation = _compositor.CreateExpressionAnimation($"{DRAG_DIRECTION} ? UncheckedStateOpacity - {DRAG_DISTANCE_PCT} : UncheckedStateOpacity");
            SetSharedParameters(_nextHeaderOpacityAnimation);

            _previousHeaderOpacityAnimation = _compositor.CreateExpressionAnimation($"{DRAG_DIRECTION} ? UncheckedStateOpacity : UncheckedStateOpacity + {DRAG_DISTANCE_PCT}");
            SetSharedParameters(_previousHeaderOpacityAnimation);

            // Start all animations
            _underlineVisual.StartAnimation("Offset.X", _underlineOffsetAnimation);
            _underlineVisual.StartAnimation("Scale.X", _underlineScaleAnimation);

            currentHeader.Visual().StartAnimation("Opacity", _currentHeaderOpacityAnimation);
            if (previousHeader != null)
            {
                previousHeader.Visual().StartAnimation("Opacity", _previousHeaderOpacityAnimation);
            }
            if (nextHeader != null)
            {
                nextHeader.Visual().StartAnimation("Opacity", _nextHeaderOpacityAnimation);
            }

            // Don't allow to swipe too fast.
            IsHitTestVisible = false;
            while (_isAnimating)
            {
                await Task.Delay(50);
            }
            IsHitTestVisible = true;
        }
示例#29
0
        private void ScrollViewer_Loaded(object sender, RoutedEventArgs e)
        {
            _scrollViewer.DirectManipulationStarted += ScrollViewer_DirectManipulationStarted;
            _scrollViewer.DirectManipulationCompleted += ScrollViewer_DirectManipulationCompleted;
            var border = (Border)VisualTreeHelper.GetChild(_scrollViewer, 0);
            _scrollViewerBorder = border;
            _scrollerViewerManipulation = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(_scrollViewer);
            _compositor = _scrollerViewerManipulation.Compositor;

            double ratio = 1.0;

            _header.Measure(new Size(this.ActualWidth, this.ActualHeight));
            var headerHeight = _header.DesiredSize.Height;
            if (headerHeight == 0)
            {
                headerHeight = 50;
            }

            if (RefreshThreshold == 0.0)
            {
                RefreshThreshold = headerHeight;
            }
            ratio = RefreshThreshold / headerHeight;

            _offsetAnimation = _compositor.CreateExpressionAnimation("(min(max(0, ScrollManipulation.Translation.Y * ratio) / Divider, 1)) * MaxOffsetY");
            _offsetAnimation.SetScalarParameter("Divider", (float)RefreshThreshold);
            _offsetAnimation.SetScalarParameter("MaxOffsetY", (float)RefreshThreshold * 5 / 4);
            _offsetAnimation.SetScalarParameter("ratio", (float)ratio);
            _offsetAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

            _opacityAnimation = _compositor.CreateExpressionAnimation("min((max(0, ScrollManipulation.Translation.Y * ratio) / Divider), 1)");
            _opacityAnimation.SetScalarParameter("Divider", (float)headerHeight);
            _opacityAnimation.SetScalarParameter("ratio", (float)1);
            _opacityAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

            _headerVisual = ElementCompositionPreview.GetElementVisual(_header);

            _contentVisual = ElementCompositionPreview.GetElementVisual(_scrollViewerBorder);

            _headerVisual.StartAnimation("Offset.Y", _offsetAnimation);
            _headerVisual.StartAnimation("Opacity", _opacityAnimation);
            _contentVisual.StartAnimation("Offset.Y", _offsetAnimation);

        }
        public MainPage()
        {
            this.InitializeComponent();
            ContactsCVS.Source = _list;

            this.Loaded += (s, e) =>
            {
                _scrollViewer = ListView.GetScrollViewer();
                _scrollViewer.DirectManipulationStarted += OnDirectManipulationStarted;
                _scrollViewer.DirectManipulationCompleted += OnDirectManipulationCompleted;

                // Retrieve the ScrollViewer manipulation and the Compositor.
                _scrollerViewerManipulation = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(_scrollViewer);
                _compositor = _scrollerViewerManipulation.Compositor;

                // At the moment there are three things happening when pulling down the list -
                // 1. The Refresh Icon fades in.
                // 2. The Refresh Icon rotates (400°).
                // 3. The Refresh Icon gets pulled down a bit (REFRESH_ICON_MAX_OFFSET_Y)
                // QUESTION 5
                // Can we also have Geometric Path animation so we can also draw the Refresh Icon along the way?
                //

                // Create a rotation expression animation based on the overpan distance of the ScrollViewer.
                _rotationAnimation = _compositor.CreateExpressionAnimation("min(max(0, ScrollManipulation.Translation.Y) * Multiplier, MaxDegree)");
                _rotationAnimation.SetScalarParameter("Multiplier", 10.0f);
                _rotationAnimation.SetScalarParameter("MaxDegree", 400.0f);
                _rotationAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

                // Create an opacity expression animation based on the overpan distance of the ScrollViewer.
                _opacityAnimation = _compositor.CreateExpressionAnimation("min(max(0, ScrollManipulation.Translation.Y) / Divider, 1)");
                _opacityAnimation.SetScalarParameter("Divider", 30.0f);
                _opacityAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

                // Create an offset expression animation based on the overpan distance of the ScrollViewer.
                _offsetAnimation = _compositor.CreateExpressionAnimation("(min(max(0, ScrollManipulation.Translation.Y) / Divider, 1)) * MaxOffsetY");
                _offsetAnimation.SetScalarParameter("Divider", 30.0f);
                _offsetAnimation.SetScalarParameter("MaxOffsetY", REFRESH_ICON_MAX_OFFSET_Y);
                _offsetAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

                // Create a keyframe animation to reset properties like Offset.Y, Opacity, etc.
                _resetAnimation = _compositor.CreateScalarKeyFrameAnimation();
                _resetAnimation.InsertKeyFrame(1.0f, 0.0f);

                // Create a loading keyframe animation (in this case, a rotation animation). 
                _loadingAnimation = _compositor.CreateScalarKeyFrameAnimation();
                _loadingAnimation.InsertKeyFrame(1.0f, 360);
                _loadingAnimation.Duration = TimeSpan.FromMilliseconds(1200);
                _loadingAnimation.IterationBehavior = AnimationIterationBehavior.Forever;

                // Get the RefreshIcon's Visual.
                _refreshIconVisual = ElementCompositionPreview.GetElementVisual(RefreshIcon);
                // Set the center point for the rotation animation.
                _refreshIconVisual.CenterPoint = new Vector3(Convert.ToSingle(RefreshIcon.ActualWidth / 2), Convert.ToSingle(RefreshIcon.ActualHeight / 2), 0);

                // Get the ListView's inner Border's Visual.
                var border = (Border)VisualTreeHelper.GetChild(ListView, 0);
                _borderVisual = ElementCompositionPreview.GetElementVisual(border);

                PrepareExpressionAnimationsOnScroll();
            };

            this.Unloaded += (s, e) =>
            {
                _scrollViewer.DirectManipulationStarted -= OnDirectManipulationStarted;
                _scrollViewer.DirectManipulationCompleted -= OnDirectManipulationCompleted;
            };
        }
示例#31
0
        public void SetupInteraction(UIElement DetachedHeader)
        {
            //Set up tracker
            var containerVisual = compositor.CreateContainerVisual();

            contentVis  = ElementCompositionPreview.GetElementVisual(content);
            contentVis2 = ElementCompositionPreview.GetElementVisual(DetachedHeader);
            ElementCompositionPreview.SetIsTranslationEnabled(content, true);
            ElementCompositionPreview.SetIsTranslationEnabled(DetachedHeader, true);
            contentVis.Properties.InsertVector3("Translation", Vector3.Zero);
            contentVis2.Properties.InsertVector3("Translation", Vector3.Zero);

            interactionSource = VisualInteractionSource.Create(rootVisual);
            interactionSource.IsPositionXRailsEnabled = true;
            //If the chaining mode is set to always, it is impossible to go past by the minimum and maximum scrolling points by "stretching" the X axis
            interactionSource.PositionXChainingMode = InteractionChainingMode.Always;
            interactionSource.PositionXSourceMode   = InteractionSourceMode.EnabledWithInertia;


            tracker = InteractionTracker.Create(compositor);

            tracker.MaxPosition = new Vector3(width - 72, 0, 0);
            tracker.MinPosition = new Vector3(-width, 0, 0);
            tracker.TryUpdatePosition(new Vector3(0, 0, 0));
            tracker.InteractionSources.Add(interactionSource);


            // Define expression animations
            contentAnimation = compositor.CreateExpressionAnimation("-tracker.Position.X");
            contentAnimation.SetReferenceParameter("tracker", tracker);
            contentVis.StartAnimation("Translation.X", contentAnimation);
            contentVis2.StartAnimation("Translation.X", contentAnimation);
            //LEFT PANEL
            leftcache1 = ElementCompositionPreview.GetElementVisual(leftPanelCache);
            leftpanel1 = ElementCompositionPreview.GetElementVisual(leftPanel);
            ElementCompositionPreview.SetIsTranslationEnabled(leftPanel, true);

            leftPanelFadeAnimation = compositor.CreateExpressionAnimation("Clamp((-tracker.Position.X/width)*(-0.5)+0.25,0,1)");
            leftPanelFadeAnimation.SetScalarParameter("width", width);
            leftPanelFadeAnimation.SetReferenceParameter("tracker", tracker);
            leftcache1.StartAnimation("Opacity", leftPanelFadeAnimation);

            leftPanelTranslateAnimation = compositor.CreateExpressionAnimation("-24+((-tracker.Position.X/width)*24)");
            leftPanelTranslateAnimation.SetReferenceParameter("tracker", tracker);
            leftPanelTranslateAnimation.SetScalarParameter("width", width);
            leftpanel1.StartAnimation("Translation.X", leftPanelTranslateAnimation);

            //SECONDARY LEFT PANEL
            leftcache2 = ElementCompositionPreview.GetElementVisual(leftSecondaryPanelCache);
            leftpanel2 = ElementCompositionPreview.GetElementVisual(leftSecondaryPanel);
            ElementCompositionPreview.SetIsTranslationEnabled(leftSecondaryPanel, true);

            leftPanelFadeAnimation2 = compositor.CreateExpressionAnimation("Clamp((-tracker.Position.X/width)*(-0.25)+0.25, 0, 1)");
            leftPanelFadeAnimation2.SetScalarParameter("width", width);
            leftPanelFadeAnimation2.SetReferenceParameter("tracker", tracker);
            leftcache2.StartAnimation("Opacity", leftPanelFadeAnimation2);

            leftPanelTranslateAnimation2 = compositor.CreateExpressionAnimation("-tracker.Position.X/width*72");
            leftPanelTranslateAnimation2.SetReferenceParameter("tracker", tracker);
            leftPanelTranslateAnimation2.SetScalarParameter("width", width);
            leftpanel2.StartAnimation("Translation.X", leftPanelTranslateAnimation2);

            //RIGHT PANEL
            rightcache = ElementCompositionPreview.GetElementVisual(rightPanelCache);
            rightpanel = ElementCompositionPreview.GetElementVisual(rightSide);
            ElementCompositionPreview.SetIsTranslationEnabled(rightSide, true);

            rightPanelFadeAnimation = compositor.CreateExpressionAnimation("Clamp((tracker.Position.X/width)*(-0.25)+0.25, 0, 1)");
            rightPanelFadeAnimation.SetScalarParameter("width", width - 72);
            rightPanelFadeAnimation.SetReferenceParameter("tracker", tracker);
            rightcache.StartAnimation("Opacity", rightPanelFadeAnimation);

            rightPanelTranslateAnimation = compositor.CreateExpressionAnimation("-tracker.Position.X/width*72");
            rightPanelTranslateAnimation.SetReferenceParameter("tracker", tracker);
            rightPanelTranslateAnimation.SetScalarParameter("width", width - 72);
            rightpanel.StartAnimation("Translation.X", rightPanelTranslateAnimation);

            SetSnapPoints(-width, 0, width - 72);

            //UI Stuff
            MediumTrigger.MinWindowWidth     = Storage.Settings.RespUiM;
            LargeTrigger.MinWindowWidth      = Storage.Settings.RespUiL;
            ExtraLargeTrigger.MinWindowWidth = Storage.Settings.RespUiXl;
            var state = VisualStateGroup.CurrentState;


            if (App.CinematicMode)
            {
                SmallTrigger.MinWindowWidth      = 0;
                MediumTrigger.MinWindowWidth     = 0;
                LargeTrigger.MinWindowWidth      = 1;
                ExtraLargeTrigger.MinWindowWidth = 100000;
                maingrid.Margin   = new Thickness(54, 0, 54, 0);
                leftPanel.Margin  = new Thickness(-54, 0, 0, 0);
                leftPanel.Padding = new Thickness(54, 0, 0, 0);
                rightSide.Margin  = new Thickness(0, 0, 54, 0);
                rightSide.Padding = new Thickness(0, 0, -54, 0);
            }
            VisualStateGroup_CurrentStateChanged(null, new VisualStateChangedEventArgs()
            {
                OldState = Small
            });
        }
        private void ScrollViewer_Loaded(object sender, RoutedEventArgs e)
        {
            Compositor compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
            // 创建驱动视差滚动的表达式动画。
            parallaxAnimation0 = compositor.CreateExpressionAnimation("MyForeground.Translation.X / MyParallaxRatio");
            parallaxAnimation1 = compositor.CreateExpressionAnimation("MyForeground.Translation.X / MyParallaxRatio");
            parallaxAnimation2 = compositor.CreateExpressionAnimation("MyForeground.Translation.X / MyParallaxRatio");
            parallaxAnimation3 = compositor.CreateExpressionAnimation("MyForeground.Translation.X / MyParallaxRatio");
            parallaxAnimation4 = compositor.CreateExpressionAnimation("((MyForeground.Translation.X / MyParallaxRatio) + offset)");
            // 设置对前景对象的引用。
            scrollViewerProperties = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(RootScroll);
            parallaxAnimation0.SetReferenceParameter("MyForeground", scrollViewerProperties);
            parallaxAnimation1.SetReferenceParameter("MyForeground", scrollViewerProperties);
            parallaxAnimation2.SetReferenceParameter("MyForeground", scrollViewerProperties);
            parallaxAnimation3.SetReferenceParameter("MyForeground", scrollViewerProperties);
            parallaxAnimation4.SetReferenceParameter("MyForeground", scrollViewerProperties);
            // 设置背景对象视差滚动的速度。
            parallaxAnimation0.SetScalarParameter("MyParallaxRatio", 1f);
            parallaxAnimation1.SetScalarParameter("MyParallaxRatio", 2f);
            parallaxAnimation2.SetScalarParameter("MyParallaxRatio", 4f);
            parallaxAnimation3.SetScalarParameter("MyParallaxRatio", 8f);
            parallaxAnimation4.SetScalarParameter("MyParallaxRatio", 0.5f);
            parallaxAnimation4.SetScalarParameter("offset", 3 * (float)ActualWidth);

            var backgroundVisual0 = ElementCompositionPreview.GetElementVisual(BGLayer0);
            var backgroundVisual1 = ElementCompositionPreview.GetElementVisual(BGLayer1);
            var backgroundVisual2 = ElementCompositionPreview.GetElementVisual(BGLayer2);
            var backgroundVisual3 = ElementCompositionPreview.GetElementVisual(BGLayer3);
            var backgroundVisual4 = ElementCompositionPreview.GetElementVisual(RootFrame);
            // 对背景对象开始视差动画。
            backgroundVisual0.StartAnimation("Offset.X", parallaxAnimation0);
            backgroundVisual1.StartAnimation("Offset.X", parallaxAnimation1);
            backgroundVisual2.StartAnimation("Offset.X", parallaxAnimation2);
            backgroundVisual3.StartAnimation("Offset.X", parallaxAnimation3);
            backgroundVisual4.StartAnimation("Offset.X", parallaxAnimation4);
            MainFrame.Navigate(typeof(CitiesPage), "nimabi");
            IndAni.Begin();
        }
示例#33
0
        private void OnActivityListLoaded(object sender, RoutedEventArgs e)
        {
            _scrollViewer = ActivityList.GetVisualDescendents <ScrollViewer>().FirstOrDefault();
            if (_scrollViewer != null)
            {
                _scrollViewer.ViewChanged           += OnScrollViewerViewChanged;
                _scrollViewer.ViewChanging          += OnScrollViewerViewChanging;
                _scrollViewer.IsScrollInertiaEnabled = true;

                _scrollViewer.DirectManipulationStarted   += OnDirectManipStarted;
                _scrollViewer.DirectManipulationCompleted += OnDirectManipCompleted;

                #region PullToRefresh Animation Setup
                // Retrieve the ScrollViewer manipulation and the Compositor.
                _scrollerViewerManipulation = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(_scrollViewer);
                //Compositor = _scrollerViewerManipulation.Compositor;

                // Create a rotation expression animation based on the overpan distance of the ScrollViewer.
                _rotationAnimation = Compositor.CreateExpressionAnimation();
                _rotationAnimation.SetScalarParameter("MyMultiplier", 10.0f);
                _rotationAnimation.SetScalarParameter("MyMaxDegree", 400.0f);
                _rotationAnimation.SetReferenceParameter("MyScrollManipulation", _scrollerViewerManipulation);
                _rotationAnimation.Expression = "min(max(0, MyScrollManipulation.Translation.Y) * MyMultiplier, MyMaxDegree)";

                // Create an opacity expression animation based on the overpan distance of the ScrollViewer.
                _opacityAnimation = Compositor.CreateExpressionAnimation();
                _opacityAnimation.SetScalarParameter("MyDivider", 30.0f);
                _opacityAnimation.SetReferenceParameter("MyScrollManipulation", _scrollerViewerManipulation);
                _opacityAnimation.Expression = "min(max(0, MyScrollManipulation.Translation.Y) / MyDivider, 1)";

                // Create an offset expression animation based on the overpan distance of the ScrollViewer.
                _offsetAnimation = Compositor.CreateExpressionAnimation();
                _offsetAnimation.SetScalarParameter("MyDivider", 30.0f);
                _offsetAnimation.SetScalarParameter("MyMaxOffsetY", REFRESH_ICON_MAX_OFFSET_Y);
                _offsetAnimation.SetReferenceParameter("MyScrollManipulation", _scrollerViewerManipulation);
                _offsetAnimation.Expression = "(min(max(0, MyScrollManipulation.Translation.Y) / MyDivider, 1)) * MyMaxOffsetY";

                // Create a keyframe animation to reset properties like Offset.Y, Opacity, etc.
                _resetAnimation = Compositor.CreateScalarKeyFrameAnimation();
                _resetAnimation.InsertKeyFrame(1.0f, 0.0f);

                // Create a loading keyframe animation (in this case, a rotation animation).
                _loadingAnimation = Compositor.CreateScalarKeyFrameAnimation();
                _loadingAnimation.InsertKeyFrame(1.0f, 360);
                _loadingAnimation.Duration          = TimeSpan.FromMilliseconds(800);
                _loadingAnimation.IterationBehavior = AnimationIterationBehavior.Forever;

                // Get the RefreshIcon's Visual.
                _refreshIconVisual = ElementCompositionPreview.GetElementVisual(RefreshIcon);
                // Set the center point for the rotation animation.
                _refreshIconVisual.CenterPoint = new Vector3(Convert.ToSingle(RefreshIcon.ActualWidth / 2), Convert.ToSingle(RefreshIcon.ActualHeight / 2), 0);

                // Get the ListView's inner Border's Visual.
                var border = (Border)VisualTreeHelper.GetChild(ActivityList, 0);
                _borderVisual = ElementCompositionPreview.GetElementVisual(border);

                _refreshIconVisual.StartAnimation(nameof(_refreshIconVisual.RotationAngleInDegrees), _rotationAnimation);
                _refreshIconVisual.StartAnimation(nameof(_refreshIconVisual.Opacity), _opacityAnimation);
                _refreshIconVisual.StartAnimation($"{nameof(_refreshIconVisual.Offset)}.{nameof(_refreshIconVisual.Offset.Y)}", _offsetAnimation);
                _borderVisual.StartAnimation($"{nameof(_borderVisual.Offset)}.{nameof(_borderVisual.Offset.Y)}", _offsetAnimation);
                #endregion
            }
        }
示例#34
0
        private async void OnScrollViewerDirectManipulationStarted(object sender, object e)
        {
            if (_isScrolling)
            {
                return;
            }

            _isAnimating = true;
            ScrollViewer.HorizontalSnapPointsType = SnapPointsType.MandatorySingle;

            var currentHeader  = TypedHeaders[SelectedIndex];
            var previousHeader = SelectedIndex > 0 ? TypedHeaders[SelectedIndex - 1] : null;
            var nextHeader     = SelectedIndex < Headers.Count - 1 ? TypedHeaders[SelectedIndex + 1] : null;

            // Create offset animation
            var startingOffsetX   = _selectedHeaderIndicatorVisual.Offset.X;
            var toNextOffsetX     = nextHeader?.RelativePosition(currentHeader).X.ToFloat() ?? 0;
            var toPreviousOffsetX = previousHeader?.RelativePosition(currentHeader).X.ToFloat() ?? 0;

            _selectedVisualOffsetAnimation = _compositor.CreateExpressionAnimation($"{DragDirection} {BUG_FIXING_EXPRESSION_10586_ONLY} ? StartingOffsetX - ToNextOffsetX * {DragDistancePct} : StartingOffsetX + ToPreviousOffsetX * {DragDistancePct}");
            _selectedVisualOffsetAnimation.SetScalarParameter("StartingOffsetX", startingOffsetX);
            _selectedVisualOffsetAnimation.SetScalarParameter("ToNextOffsetX", toNextOffsetX);
            _selectedVisualOffsetAnimation.SetScalarParameter("ToPreviousOffsetX", toPreviousOffsetX);
            SetSharedParameters(_selectedVisualOffsetAnimation);

            // Create scale animation
            var startingScaleX              = _selectedHeaderIndicatorVisual.Scale.X;
            var nextAndCurrentWidthDiff     = nextHeader == null ? 0 : (GetHeaderContainer(nextHeader).ActualWidth - GetHeaderContainer(currentHeader).ActualWidth).ToFloat();
            var previousAndCurrentWidthDiff = previousHeader == null ? 0 : (GetHeaderContainer(previousHeader).ActualWidth - GetHeaderContainer(currentHeader).ActualWidth).ToFloat();

            _selectedVisualScaleAnimation = _compositor.CreateExpressionAnimation($"{DragDirection} {BUG_FIXING_EXPRESSION_10586_ONLY} ? StartingScaleX - NextAndCurrentWidthDiff * {DragDistancePct} : StartingScaleX + PreviousAndCurrentWidthDiff * {DragDistancePct}");
            _selectedVisualScaleAnimation.SetScalarParameter("StartingScaleX", startingScaleX);
            _selectedVisualScaleAnimation.SetScalarParameter("NextAndCurrentWidthDiff", nextAndCurrentWidthDiff);
            _selectedVisualScaleAnimation.SetScalarParameter("PreviousAndCurrentWidthDiff", previousAndCurrentWidthDiff);
            SetSharedParameters(_selectedVisualScaleAnimation);

            // Create opacity animations
            _currentHeaderOpacityAnimation = _compositor.CreateExpressionAnimation($"Max(1 - Abs{DragDistancePct}, UncheckedStateOpacity)");
            SetSharedParameters(_currentHeaderOpacityAnimation);

            _nextHeaderOpacityAnimation = _compositor.CreateExpressionAnimation($"{DragDirection} {BUG_FIXING_EXPRESSION_10586_ONLY} ? UncheckedStateOpacity - {DragDistancePct} : UncheckedStateOpacity");
            SetSharedParameters(_nextHeaderOpacityAnimation);

            _previousHeaderOpacityAnimation = _compositor.CreateExpressionAnimation($"{DragDirection} {BUG_FIXING_EXPRESSION_10586_ONLY} ? UncheckedStateOpacity : UncheckedStateOpacity + {DragDistancePct}");
            SetSharedParameters(_previousHeaderOpacityAnimation);

            // Start all animations
            _selectedHeaderIndicatorVisual.StartAnimation("Offset.X", _selectedVisualOffsetAnimation);
            _selectedHeaderIndicatorVisual.StartAnimation("Scale.X", _selectedVisualScaleAnimation);

            currentHeader.Visual().StartAnimation("Opacity", _currentHeaderOpacityAnimation);
            previousHeader?.Visual().StartAnimation("Opacity", _previousHeaderOpacityAnimation);
            nextHeader?.Visual().StartAnimation("Opacity", _nextHeaderOpacityAnimation);

            // Don't allow swiping too fast.
            IsHitTestVisible = false;
            while (_isAnimating)
            {
                await Task.Delay(50);
            }
            IsHitTestVisible = true;
        }
示例#35
0
        /// <summary>
        /// Setup interactions with sliding touch controls.
        /// </summary>
        /// <param name="detachedHeader">Uneffected element.</param>
        public void SetupInteraction(UIElement detachedHeader = null)
        {
            // Set up tracker
            var containerVisual = _compositor.CreateContainerVisual();

            contentVis = ElementCompositionPreview.GetElementVisual(content);
            if (detachedHeader != null)
            {
                contentVis2 = ElementCompositionPreview.GetElementVisual(detachedHeader);
            }

            ElementCompositionPreview.SetIsTranslationEnabled(content, true);
            if (detachedHeader != null)
            {
                ElementCompositionPreview.SetIsTranslationEnabled(detachedHeader, true);
            }

            contentVis.Properties.InsertVector3("Translation", Vector3.Zero);
            if (detachedHeader != null)
            {
                contentVis2.Properties.InsertVector3("Translation", Vector3.Zero);
            }

            _interactionSource = VisualInteractionSource.Create(_rootVisual);
            _interactionSource.IsPositionXRailsEnabled = true;

            // If the chaining mode is set to always, it is impossible to go past by the minimum and maximum scrolling points by "stretching" the X axis
            _interactionSource.PositionXChainingMode = InteractionChainingMode.Always;
            _interactionSource.PositionXSourceMode   = InteractionSourceMode.EnabledWithInertia;
            _tracker             = InteractionTracker.Create(_compositor);
            _tracker.MaxPosition = new Vector3(width - 72, 0, 0);
            _tracker.MinPosition = new Vector3(-width, 0, 0);
            _tracker.TryUpdatePosition(new Vector3(0, 0, 0));
            _tracker.InteractionSources.Add(_interactionSource);

            // Define expression animations
            _contentAnimation = _compositor.CreateExpressionAnimation("-tracker.Position.X");
            _contentAnimation.SetReferenceParameter("tracker", _tracker);
            contentVis.StartAnimation("Translation.X", _contentAnimation);
            if (detachedHeader != null)
            {
                contentVis2.StartAnimation("Translation.X", _contentAnimation);
            }

            // LEFT PANEL
            leftcache1 = ElementCompositionPreview.GetElementVisual(leftPanelCache);
            leftpanel1 = ElementCompositionPreview.GetElementVisual(leftPanel);
            ElementCompositionPreview.SetIsTranslationEnabled(leftPanel, true);
            _leftPanelFadeAnimation = _compositor.CreateExpressionAnimation("Clamp((-tracker.Position.X/width)*(-0.5)+0.25,0,1)");
            _leftPanelFadeAnimation.SetScalarParameter("width", width);
            _leftPanelFadeAnimation.SetReferenceParameter("tracker", _tracker);
            leftcache1.StartAnimation("Opacity", _leftPanelFadeAnimation);
            leftPanelTranslateAnimation = _compositor.CreateExpressionAnimation("-24+((-tracker.Position.X/width)*24)");
            leftPanelTranslateAnimation.SetReferenceParameter("tracker", _tracker);
            leftPanelTranslateAnimation.SetScalarParameter("width", width);
            leftpanel1.StartAnimation("Translation.X", leftPanelTranslateAnimation);

            // SECONDARY LEFT PANEL
            leftcache2 = ElementCompositionPreview.GetElementVisual(leftSecondaryPanelCache);
            leftpanel2 = ElementCompositionPreview.GetElementVisual(leftSecondaryPanel);
            ElementCompositionPreview.SetIsTranslationEnabled(leftSecondaryPanel, true);
            _leftPanelFadeAnimation2 = _compositor.CreateExpressionAnimation("Clamp((-tracker.Position.X/width)*(-0.25)+0.25, 0, 1)");
            _leftPanelFadeAnimation2.SetScalarParameter("width", width);
            _leftPanelFadeAnimation2.SetReferenceParameter("tracker", _tracker);
            leftcache2.StartAnimation("Opacity", _leftPanelFadeAnimation2);
            _leftPanelTranslateAnimation2 = _compositor.CreateExpressionAnimation("-tracker.Position.X/width*72");
            _leftPanelTranslateAnimation2.SetReferenceParameter("tracker", _tracker);
            _leftPanelTranslateAnimation2.SetScalarParameter("width", width);
            leftpanel2.StartAnimation("Translation.X", _leftPanelTranslateAnimation2);

            // RIGHT PANEL
            rightcache = ElementCompositionPreview.GetElementVisual(rightPanelCache);
            rightpanel = ElementCompositionPreview.GetElementVisual(rightSide);
            ElementCompositionPreview.SetIsTranslationEnabled(rightSide, true);
            rightPanelFadeAnimation = _compositor.CreateExpressionAnimation("Clamp((tracker.Position.X/width)*(-0.25)+0.25, 0, 1)");
            rightPanelFadeAnimation.SetScalarParameter("width", width - 72);
            rightPanelFadeAnimation.SetReferenceParameter("tracker", _tracker);
            rightcache.StartAnimation("Opacity", rightPanelFadeAnimation);
            rightPanelTranslateAnimation = _compositor.CreateExpressionAnimation("-tracker.Position.X/width*72");
            rightPanelTranslateAnimation.SetReferenceParameter("tracker", _tracker);
            rightPanelTranslateAnimation.SetScalarParameter("width", width - 72);
            rightpanel.StartAnimation("Translation.X", rightPanelTranslateAnimation);
            SetSnapPoints(-width, 0, width - 72);

            // UI Stuff
            var state = VisualStateGroup.CurrentState;

            VisualStateGroup_CurrentStateChanged(null, new VisualStateChangedEventArgs()
            {
                OldState = Small
            });
        }
        private void OnAssociatedObjectLoaded(object sender, RoutedEventArgs e)
        {
            _scrollViewer = AssociatedObject.GetScrollViewer();
            _scrollViewer.DirectManipulationStarted   += OnScrollViewerDirectManipulationStarted;
            _scrollViewer.DirectManipulationCompleted += OnScrollViewerDirectManipulationCompleted;
            _callbackId = _scrollViewer.RegisterPropertyChangedCallback(ScrollViewer.ScrollableHeightProperty,
                                                                        OnScrollViewerScrollableHeightChanged);

            // Retrieve the ScrollViewer manipulation and the Compositor.
            _scrollerViewerManipulation = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(_scrollViewer);
            _compositor = _scrollerViewerManipulation.Compositor;

            // Set boundaries.
            var listViewBaseVisual = ElementCompositionPreview.GetElementVisual(AssociatedObject);
            var clip = _compositor.CreateInsetClip();

            listViewBaseVisual.Clip = clip;

            // At the moment there are three things happening when pulling down the list -
            // 1. The Refresh Icon fades in.
            // 2. The Refresh Icon rotates (IconElementMaxRotationAngle).
            // 3. The Refresh Icon gets pulled down/up a bit (IconElementMaxOffsetY)
            // QUESTION 5
            // Can we also have Geometric Path animation so we can also draw the Refresh Icon along the way?
            //

            UpdateScrollableHeightInScrollViewerPropertySet();

            // Create a rotation expression animation based on the overpan distance of the ScrollViewer.
            _rotationAnimation = _compositor.CreateExpressionAnimation($"min({PullDistanceExpression} * DegreeMultiplier, MaxDegree)");
            _rotationAnimation.SetScalarParameter("DegreeMultiplier", 10.0f);
            _rotationAnimation.SetScalarParameter("MaxDegree", (float)IconElementMaxRotationAngle);
            _rotationAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

            // Create an opacity expression animation based on the overpan distance of the ScrollViewer.
            _opacityAnimation = _compositor.CreateExpressionAnimation($"min({PullDistanceExpression} / {PullThresholdExpression}, 1)");
            _opacityAnimation.SetScalarParameter("PullThresholdMaxOverpanRatio", (float)PullThresholdMaxOverpanRatio);
            _opacityAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

            // Create an offset expression animation based on the overpan distance of the ScrollViewer.
            _offsetAnimation = _compositor.CreateExpressionAnimation($"min({PullDistanceExpression} / {PullThresholdExpression}, 1) * MaxPulledDistance");
            _offsetAnimation.SetScalarParameter("PullThresholdMaxOverpanRatio", (float)PullThresholdMaxOverpanRatio);
            _offsetAnimation.SetScalarParameter("MaxPulledDistance", IconElementMaxPulledOffsetY);
            _offsetAnimation.SetReferenceParameter("ScrollManipulation", _scrollerViewerManipulation);

            // Create a keyframe animation to reset properties like Offset.Y, Opacity, etc.
            _resetAnimation = _compositor.CreateScalarKeyFrameAnimation();
            _resetAnimation.InsertKeyFrame(1.0f, 0.0f);

            // Create a loading keyframe animation (in this case, a rotation animation).
            _loadingAnimation = _compositor.CreateScalarKeyFrameAnimation();
            _loadingAnimation.InsertExpressionKeyFrame(0.0f, "this.StartingValue");
            _loadingAnimation.InsertExpressionKeyFrame(1.0f, "this.StartingValue + 360");
            _loadingAnimation.Duration          = TimeSpan.FromMilliseconds(1200);
            _loadingAnimation.IterationBehavior = AnimationIterationBehavior.Forever;

            // Get the RefreshIcon's Visual.
            _refreshIconVisual = ElementCompositionPreview.GetElementVisual(IconElement);
            // Set the center point for the rotation animation.
            _refreshIconVisual.CenterPoint = new Vector3(IconElement.RenderSize.ToVector2() / 2, 0.0f);

            // Get the ListView's inner Border's Visual.
            var border = (Border)VisualTreeHelper.GetChild(AssociatedObject, 0);

            _borderVisual = ElementCompositionPreview.GetElementVisual(border);

            StartExpressionAnimations();
        }