我正在尝试允许用户在静态图像上的过滤器之间滑动。这个想法是当滤镜在其上方滚动时图像保持原位。 Snapchat最近发布了一个实现此功能的版本。 This video shows exactly what I'm trying to accomplish at 1:05.
到目前为止，我已经尝试将三个UIImageView放入原始图像的左侧和右侧的滚动视图中，并使用scrollView的contentOffset.x调整它们的帧origin.x和size.width。我在另一篇文章here中找到了这个想法。将左侧和右侧的内容模式更改为UIViewContentModeLeft和UIViewContentModeRight没有帮助。
接下来，我尝试将所有三个UIImageView堆叠在一起。我制作了两个CALayer蒙版并将它们插入到堆栈左侧和右侧的scrollView中，因此当您滚动蒙版时，将揭示过滤后的图像。这不适合我。任何帮助将不胜感激。
答案 0 :(得分：10)
您应该只需要2个图像视图（当前图像和传入图像视图，因为这是一个分页样式滚动），并且它们在每个过滤器更改后切换角色。您使用图层蒙版的方法应该有效，但不能在滚动视图上使用。
因此，请确保您的视图组织类似于：
UIView // receives all gestures
UIScrollView // handles the filter name display, touch disabled
UIImageView // incoming in front, but masked out
UIImageView // current behind
每个图像视图都有一个遮罩层，它只是一个简单的图层，您可以修改遮罩层的位置以更改实际可见的图像数量。
现在，主视图处理平移手势，并使用手势的平移来更改传入图像视图蒙版图层位置和滚动视图内容偏移。
随着更改的完成，“当前＆＃39;无法再看到图片视图，而且“来了”图片视图图像视图占据整个屏幕。当前的＆＃39;图像视图现在移动到前面并成为incoming视图，其掩码会更新以使其透明。当下一个手势开始时，其图像将更新为下一个过滤器，并且更改过程将重新开始。
当滚动发生时，您可以随时在后台准备过滤后的图像，以便在切换时图像准备好进入视图（快速滚动）。
答案 1 :(得分：4)
我的第一次尝试在尝试掩盖UIImage而不是UIImage视图时犯了一个错误，但最终得到了一个相当不错的工作解决方案（使用UIImageView掩码）。如果您有任何问题，请随时提出。
我基本上创建了当前图像和过滤后的图像。我屏蔽UIView（带有一个矩形），然后根据滑动调整遮罩。
链接到结果： https://www.youtube.com/watch?v=k75nqVsPggY&list=UUIctdpq1Pzujc0u0ixMSeVw
面具信用：https://stackoverflow.com/a/11391478/3324388
@interface FilterTestsViewController ()
@end
@implementation FilterTestsViewController
NSArray *_pictureFilters;
NSNumber* _pictureFilterIterator;
UIImage* _originalImage;
UIImage* _currentImage;
UIImage* _filterImage;
UIImageView* _uiImageViewCurrentImage;
UIImageView* _uiImageViewNewlyFilteredImage;
CGPoint _startLocation;
BOOL _directionAssigned = NO;
enum direction {LEFT,RIGHT};
enum direction _direction;
BOOL _reassignIncomingImage = YES;
- (void)viewDidLoad
{
[super viewDidLoad];
[self initializeFiltering];
}
//set it up for video feed
-(void)initializeVideoFeed
{
}
-(void)initializeFiltering
{
//create filters
_pictureFilters = @[@"CISepiaTone",@"CIColorInvert",@"CIColorCube",@"CIFalseColor",@"CIPhotoEffectNoir"];
_pictureFilterIterator = 0;
//create initial image and current image
_originalImage = [UIImage imageNamed:@"ja.jpg"]; //creates image from file, this will result in a nil CIImage but a valid CGImage;
_currentImage = [UIImage imageNamed:@"ja.jpg"];
//create the UIImageViews for the current and filter object
_uiImageViewCurrentImage = [[UIImageView alloc] initWithImage:_currentImage]; //creates a UIImageView with the UIImage
_uiImageViewNewlyFilteredImage = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,[UIScreen mainScreen].bounds.size.width,[UIScreen mainScreen].bounds.size.height)];//need to set its size to full since it doesn't have a filter yet
//add UIImageViews to view
[self.view addSubview:_uiImageViewCurrentImage]; //adds the UIImageView to view;
[self.view addSubview:_uiImageViewNewlyFilteredImage];
//add gesture
UIPanGestureRecognizer* pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(swipeRecognized:)];
[self.view addGestureRecognizer:pan];
}
-(void)swipeRecognized:(UIPanGestureRecognizer *)swipe
{
CGFloat distance = 0;
CGPoint stopLocation;
if (swipe.state == UIGestureRecognizerStateBegan)
{
_directionAssigned = NO;
_startLocation = [swipe locationInView:self.view];
}else
{
stopLocation = [swipe locationInView:self.view];
CGFloat dx = stopLocation.x - _startLocation.x;
CGFloat dy = stopLocation.y - _startLocation.y;
distance = sqrt(dx*dx + dy*dy);
}
if(swipe.state == UIGestureRecognizerStateEnded)
{
if(_direction == LEFT && (([UIScreen mainScreen].bounds.size.width - _startLocation.x) + distance) > [UIScreen mainScreen].bounds.size.width/2)
{
[self reassignCurrentImage];
}else if(_direction == RIGHT && _startLocation.x + distance > [UIScreen mainScreen].bounds.size.width/2)
{
[self reassignCurrentImage];
}else
{
//since no filter applied roll it back
if(_direction == LEFT)
{
_pictureFilterIterator = [NSNumber numberWithInt:[_pictureFilterIterator intValue]-1];
}else
{
_pictureFilterIterator = [NSNumber numberWithInt:[_pictureFilterIterator intValue]+1];
}
}
[self clearIncomingImage];
_reassignIncomingImage = YES;
return;
}
CGPoint velocity = [swipe velocityInView:self.view];
if(velocity.x > 0)//right
{
if(!_directionAssigned)
{
_directionAssigned = YES;
_direction = RIGHT;
}
if(_reassignIncomingImage && !_filterImage)
{
_reassignIncomingImage = false;
[self reassignIncomingImageLeft:NO];
}
}
else//left
{
if(!_directionAssigned)
{
_directionAssigned = YES;
_direction = LEFT;
}
if(_reassignIncomingImage && !_filterImage)
{
_reassignIncomingImage = false;
[self reassignIncomingImageLeft:YES];
}
}
if(_direction == LEFT)
{
if(stopLocation.x > _startLocation.x -5) //adjust to avoid snapping
{
distance = -distance;
}
}else
{
if(stopLocation.x < _startLocation.x +5) //adjust to avoid snapping
{
distance = -distance;
}
}
[self slideIncomingImageDistance:distance];
}
-(void)slideIncomingImageDistance:(float)distance
{
CGRect incomingImageCrop;
if(_direction == LEFT) //start on the right side
{
incomingImageCrop = CGRectMake(_startLocation.x - distance,0, [UIScreen mainScreen].bounds.size.width - _startLocation.x + distance, [UIScreen mainScreen].bounds.size.height);
}else//start on the left side
{
incomingImageCrop = CGRectMake(0,0, _startLocation.x + distance, [UIScreen mainScreen].bounds.size.height);
}
[self applyMask:incomingImageCrop];
}
-(void)reassignCurrentImage
{
if(!_filterImage)//if you go fast this is null sometimes
{
[self reassignIncomingImageLeft:YES];
}
_uiImageViewCurrentImage.image = _filterImage;
self.view.frame = [[UIScreen mainScreen] bounds];
}
//left is forward right is back
-(void)reassignIncomingImageLeft:(BOOL)left
{
if(left == YES)
{
_pictureFilterIterator = [NSNumber numberWithInt:[_pictureFilterIterator intValue]+1];
}else
{
_pictureFilterIterator = [NSNumber numberWithInt:[_pictureFilterIterator intValue]-1];
}
NSNumber* arrayCount = [NSNumber numberWithInt:(int)_pictureFilters.count];
if([_pictureFilterIterator integerValue]>=[arrayCount integerValue])
{
_pictureFilterIterator = 0;
}
if([_pictureFilterIterator integerValue]< 0)
{
_pictureFilterIterator = [NSNumber numberWithInt:(int)_pictureFilters.count-1];
}
CIImage* ciImage = [CIImage imageWithCGImage:_originalImage.CGImage];
CIFilter* filter = [CIFilter filterWithName:_pictureFilters[[_pictureFilterIterator integerValue]] keysAndValues:kCIInputImageKey,ciImage, nil];
_filterImage = [UIImage imageWithCIImage:[filter outputImage]];
_uiImageViewNewlyFilteredImage.image = _filterImage;
CGRect maskRect = CGRectMake(0,0,[UIScreen mainScreen].bounds.size.width,[UIScreen mainScreen].bounds.size.height);
[self applyMask:maskRect];
}
//apply mask to filter UIImageView
-(void)applyMask:(CGRect)maskRect
{
// Create a mask layer and the frame to determine what will be visible in the view.
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
// Create a path with the rectangle in it.
CGPathRef path = CGPathCreateWithRect(maskRect, NULL);
// Set the path to the mask layer.
maskLayer.path = path;
// Release the path since it's not covered by ARC.
CGPathRelease(path);
// Set the mask of the view.
_uiImageViewNewlyFilteredImage.layer.mask = maskLayer;
}
-(void)clearIncomingImage
{
_filterImage = nil;
_uiImageViewNewlyFilteredImage.image = nil;
//mask current image view fully again
[self applyMask:CGRectMake(0,0,[UIScreen mainScreen].bounds.size.width,[UIScreen mainScreen].bounds.size.height)];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
答案 2 :(得分：3)
部分地使用了Aggressor的解决方案，我提出了我认为最简单的设置方法，用最少的代码行。
@IBOutlet weak var topImage: UIImageView!
@IBOutlet weak var bottomImage: UIImageView!
@IBOutlet weak var scrollview: UIScrollView!
override func viewDidLoad() {
super.viewDidLoad()
scrollview.delegate=self
scrollview.contentSize=CGSizeMake(2*self.view.bounds.width, self.view.bounds.height)
applyMask(CGRectMake(self.view.bounds.width-scrollview.contentOffset.x, scrollview.contentOffset.y, scrollview.contentSize.width, scrollview.contentSize.height))
}
func applyMask(maskRect: CGRect!){
var maskLayer: CAShapeLayer = CAShapeLayer()
var path: CGPathRef = CGPathCreateWithRect(maskRect, nil)
maskLayer.path=path
topImage.layer.mask = maskLayer
}
func scrollViewDidScroll(scrollView: UIScrollView) {
println(scrollView.contentOffset.x)
applyMask(CGRectMake(self.view.bounds.width-scrollView.contentOffset.x, scrollView.contentOffset.y, scrollView.contentSize.width, scrollView.contentSize.height))
}
然后只需设置图像，并确保在imageViews上方有scrollView。对于请求的行为（如Snapchat），请确保滚动视图已将分页启用设置为true，并确保其背景颜色清晰。这种方法的好处是你可以免费获得所有的scrollView行为...因为你使用了scrollView
答案 3 :(得分：2)