滚动多个屏幕时根据 UIScrollView 的 contentOffset.x 更改视图的 alpha
Changing view's alpha based on UIScrollView's contentOffset.x when scrolling multiple screens
我有一个水平 UIScrollView
,宽度为 960
。
UIScrollView
包含 3 个 UIView's
,每个设置一个背景颜色。
第一个是粉色,第二个是蓝色,第三个是绿色。
我需要做的是根据用户滚动更改颜色(视图)的 alpha。
因此,如果用户在第一个屏幕(粉红色)上并开始滚动到第二页(蓝色),那么粉红色应该开始褪色,蓝色会变得更加明显,一旦用户完全滑动到第二页,它会是蓝色的。
以下是我只使用一个 UIView
:
时的做法
func scrollViewDidScroll(scrollView: UIScrollView) {
// Offset Percentage
var percentageHorizontalOffset = scrollView.contentOffset.x / 320;
// Reduce alpha
pinkView.alpha = percentageHorizontalOffset
}
这很容易,因为百分比从 0.0
变为 1.0
但是,我需要修改代码以支持3屏。我早些时候通过在上面的方法中将 320
替换为 960
来尝试这样做,但这会导致一些问题。
首先是您不再获得 0.0 到 1.0 范围内的百分比,一旦您在第二页上滚动,它将在 1.0 到 2.0 范围内,这无法帮助我正确修改 alpha .
其次是alpha变化感觉不是很顺畅,尤其是快速滑动UIScrollView的时候。我早些时候设置了一堆 if
语句试图让它工作但没有任何效果。
当我的 UIScrollView's
内容尺寸大于一个屏幕时,如何根据 contentOffset.x
正确淡化所有 3 UIView's
的 alpha?
最简单的方法是将 3 个彩色视图视为一个数组。
// Put all your views in an array
@property NSArray *coloredViews;
// Later where you set things up, allocate the array.
coloredViews=@[pinkView,blueView,greenView];
然后使用以下算法设置alpha。
这假设一次只有 N 个视图中的 2 个出现在屏幕上。一个在左边,一个在右边。
左侧的 alpha 取决于它离开屏幕的数量。
右侧的 alpha 取决于它在屏幕上的数量。
因此,当左侧熄灭时,它变为 0,导致右侧变为 1,反之亦然。
这使您的滚动方法:
func scrollViewDidScroll(scrollView: UIScrollView) {
// Work out which view is showing on the left. 0 to N-1
// Based on each being 320 wide.
CGFloat offset=scrollView.contentOffset.x;
NSUInteger leftHandSideViewIndex=(NSUInteger)offset.x/320;
// Left hand side alpha is 1 minus percentage (as a fraction) off screen
self.coloredViews[leftHandSide].alpha =
1.0 - (offset - (320.0 * leftHandSideViewIndex))/320.0;
// Right hand side alpha is 1 - percentage (as a fraction) on screen
// Only do this if there is a right hand side.
if (leftHandSideViewIndex < self.coloredViews.count-1){
self.coloredViews[leftHandSide+1].alpha =
1.0 - ((320.0 * leftHandSizeViewIndex+1)-offset)/320.0;
}
}
试一试。可能不是 100% 正确,但希望给你 idea.You 可能想要设置宽度变量而不是使用 320.0.
我有一个水平 UIScrollView
,宽度为 960
。
UIScrollView
包含 3 个 UIView's
,每个设置一个背景颜色。
第一个是粉色,第二个是蓝色,第三个是绿色。
我需要做的是根据用户滚动更改颜色(视图)的 alpha。
因此,如果用户在第一个屏幕(粉红色)上并开始滚动到第二页(蓝色),那么粉红色应该开始褪色,蓝色会变得更加明显,一旦用户完全滑动到第二页,它会是蓝色的。
以下是我只使用一个 UIView
:
func scrollViewDidScroll(scrollView: UIScrollView) {
// Offset Percentage
var percentageHorizontalOffset = scrollView.contentOffset.x / 320;
// Reduce alpha
pinkView.alpha = percentageHorizontalOffset
}
这很容易,因为百分比从 0.0
变为 1.0
但是,我需要修改代码以支持3屏。我早些时候通过在上面的方法中将 320
替换为 960
来尝试这样做,但这会导致一些问题。
首先是您不再获得 0.0 到 1.0 范围内的百分比,一旦您在第二页上滚动,它将在 1.0 到 2.0 范围内,这无法帮助我正确修改 alpha .
其次是alpha变化感觉不是很顺畅,尤其是快速滑动UIScrollView的时候。我早些时候设置了一堆 if
语句试图让它工作但没有任何效果。
当我的 UIScrollView's
内容尺寸大于一个屏幕时,如何根据 contentOffset.x
正确淡化所有 3 UIView's
的 alpha?
最简单的方法是将 3 个彩色视图视为一个数组。
// Put all your views in an array
@property NSArray *coloredViews;
// Later where you set things up, allocate the array.
coloredViews=@[pinkView,blueView,greenView];
然后使用以下算法设置alpha。 这假设一次只有 N 个视图中的 2 个出现在屏幕上。一个在左边,一个在右边。 左侧的 alpha 取决于它离开屏幕的数量。 右侧的 alpha 取决于它在屏幕上的数量。 因此,当左侧熄灭时,它变为 0,导致右侧变为 1,反之亦然。
这使您的滚动方法:
func scrollViewDidScroll(scrollView: UIScrollView) {
// Work out which view is showing on the left. 0 to N-1
// Based on each being 320 wide.
CGFloat offset=scrollView.contentOffset.x;
NSUInteger leftHandSideViewIndex=(NSUInteger)offset.x/320;
// Left hand side alpha is 1 minus percentage (as a fraction) off screen
self.coloredViews[leftHandSide].alpha =
1.0 - (offset - (320.0 * leftHandSideViewIndex))/320.0;
// Right hand side alpha is 1 - percentage (as a fraction) on screen
// Only do this if there is a right hand side.
if (leftHandSideViewIndex < self.coloredViews.count-1){
self.coloredViews[leftHandSide+1].alpha =
1.0 - ((320.0 * leftHandSizeViewIndex+1)-offset)/320.0;
}
}
试一试。可能不是 100% 正确,但希望给你 idea.You 可能想要设置宽度变量而不是使用 320.0.