在滚动上添加视差效果

Question

我有一个视图，上面有一个滚动视图和一个常规视图，现在它只是改变了层的高度，这样当滚动视图被向下拖动时，它就会成为最上面的。

我想做得更好并添加一个漂亮的淡入淡出效果，但目前我无法让它平滑地淡出。

这是我目前正在做的事情：

private void MainScrollViewOnScrolled(object sender, EventArgs e)
{
    if (!(sender is UIScrollView scrollView))
    {
        return;
    }

    var topViewHeight = vTopPanel.Bounds.Height;
    var scrollOffsetY = scrollView.ContentOffset.Y;

    var scrollIndicatorInsets = scrollView.ScrollIndicatorInsets;

    nfloat scrollIndicatorTop = 0;
    var scrollOffsetDelta = topViewHeight - scrollOffsetY;

    if (scrollOffsetDelta > 0)
    {
        scrollIndicatorTop = scrollOffsetDelta;
    }

    scrollIndicatorInsets.Top = scrollIndicatorTop;
    scrollView.ScrollIndicatorInsets = scrollIndicatorInsets;

    var generalInfoEnabled = scrollOffsetY == 0;

    if (generalInfoEnabled)
    {
        vTopPanel.Alpha = 0;
        vTopPanel.Transform = CGAffineTransform.MakeIdentity();
        UIView.Animate(0.3f, 0, UIViewAnimationOptions.CurveEaseInOut,
            () => {
                vTopPanel.Alpha = 1;
            },
            null
        );
    }
    else
    {
        vTopPanel.Alpha = 1;
        vTopPanel.Transform = CGAffineTransform.MakeIdentity();
        UIView.Animate(0.3f, 0, UIViewAnimationOptions.CurveEaseInOut,
            () => {
                vTopPanel.Alpha = 0;
            },
            null
        );
    }
}

它可以工作，但不是很好，当我向下拖动时它会逐渐消失，但是当我滚动回到顶部时，顶部视图重新出现时会有明显的延迟。 Android 有一种非常好的视差效果，希望有人能指导我以正确的方式为 iOS 做这件事。

Answer 1

您可以更改 vTopPanel.Alpha 以及 scrollOffsetY。并通过scrollOffsetY.

的值使其成为visable或不成为visable

例如：

    private void MainScrollViewOnScrolled(object sender, EventArgs e)
    {
        if (!(sender is UIScrollView scrollView))
        {
            return;
        }

        var topViewHeight = vTopPanel.Bounds.Height;
        var scrollOffsetY = scrollView.ContentOffset.Y;

        var scrollIndicatorInsets = scrollView.ScrollIndicatorInsets;

        nfloat scrollIndicatorTop = 0;
        var scrollOffsetDelta = topViewHeight - scrollOffsetY;

        if (scrollOffsetDelta > 0)
        {
            scrollIndicatorTop = scrollOffsetDelta;
        }

        scrollIndicatorInsets.Top = scrollIndicatorTop;
        scrollView.ScrollIndicatorInsets = scrollIndicatorInsets;

        //you can custom the topViewAlpha  here 
        //nfloat topViewAlpha = scrollOffsetY / (this.View.Frame.Height -vTopPanel.Frame.Size.Height);

        nfloat topViewAlpha = scrollOffsetY / (vTopPanel.Frame.Size.Height);

        if (topViewAlpha >=1)
        {
            topViewAlpha = 1;
        }

        //To get the opposite effect
        topViewAlpha = 1 - topViewAlpha;


        vTopPanel.Alpha = topViewAlpha;
    }
}

在滚动上添加视差效果

adding a parallax effect on scroll

xamarin.ios

uiscrollview

parallax