Hiệu ứng thị sai iOS 7 trong bộ điều khiển chế độ xem của tôi

Tôi đang phát triển một ứng dụng cho iOS 7 trong Objective-C. Tôi có một màn hình trong ứng dụng của mình với một vài nút và hình nền đẹp. (Đó là một xib đơn giản với UIButtonsphía trên là a UIImageView.)

Tôi đã nghĩ rằng sẽ thật tuyệt nếu những nút đó có hiệu ứng thị sai mà màn hình chính của iOS 7 có, vì vậy nếu bạn nghiêng điện thoại, bạn có thể thấy nền.

Làm cách nào để triển khai hiệu ứng đó trong ứng dụng của riêng tôi?

Với iOS 7, Apple đã giới thiệu UIMotionEffectthêm các hiệu ứng Chuyển động liên quan đến hướng thiết bị của người dùng. Ví dụ: để mô phỏng hiệu ứng thị sai trên màn hình chính, bạn có thể sử dụng lớp con UIInterpolationMotionEffect, như được giải thích ở đây và ở đây , chỉ với một vài dòng mã.

Mục tiêu-C :

// Set vertical effect
UIInterpolatingMotionEffect *verticalMotionEffect = 
  [[UIInterpolatingMotionEffect alloc] 
  initWithKeyPath:@"center.y"
             type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
verticalMotionEffect.minimumRelativeValue = @(-10);
verticalMotionEffect.maximumRelativeValue = @(10);

// Set horizontal effect 
UIInterpolatingMotionEffect *horizontalMotionEffect = 
  [[UIInterpolatingMotionEffect alloc] 
  initWithKeyPath:@"center.x"     
             type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
horizontalMotionEffect.minimumRelativeValue = @(-10);
horizontalMotionEffect.maximumRelativeValue = @(10);

// Create group to combine both
UIMotionEffectGroup *group = [UIMotionEffectGroup new];
group.motionEffects = @[horizontalMotionEffect, verticalMotionEffect];

// Add both effects to your view
[myBackgroundView addMotionEffect:group];

Swift (Cảm ơn @Lucas):

// Set vertical effect
let verticalMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.y",
type: .TiltAlongVerticalAxis)
verticalMotionEffect.minimumRelativeValue = -10
verticalMotionEffect.maximumRelativeValue = 10

// Set horizontal effect
let horizontalMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.x",
    type: .TiltAlongHorizontalAxis)
horizontalMotionEffect.minimumRelativeValue = -10
horizontalMotionEffect.maximumRelativeValue = 10

// Create group to combine both
let group = UIMotionEffectGroup()
group.motionEffects = [horizontalMotionEffect, verticalMotionEffect]

// Add both effects to your view
myBackgroundView.addMotionEffect(group)

Ngoài ra, bạn có thể tìm thấy một loạt thư viện để thực hiện việc này dễ dàng hơn hoặc thêm chức năng này vào các phiên bản iOS cũ hơn:

• NGAParallaxMotion (yêu cầu iOS 7 ).
• DVParallaxView (yêu cầu iOS 5.0 trở lên và ARC ).
• MKParallaxView (được thử nghiệm với iOS 6.0 , yêu cầu ARC ).
• UIView-MWParallax (được thử nghiệm với iOS 6.1 , yêu cầu ARC ).

Được dịch để nhanh chóng trong trường hợp bất kỳ ai lười biếng. Hãy bình chọn câu trả lời của @veducm nếu bạn thấy điều này hữu ích

@IBOutlet var background : UIImageView!

func parallaxEffectOnBackground() {
    let relativeMotionValue = 50
    var verticalMotionEffect : UIInterpolatingMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.y",
        type: .TiltAlongVerticalAxis)
    verticalMotionEffect.minimumRelativeValue = -relativeMotionValue
    verticalMotionEffect.maximumRelativeValue = relativeMotionValue

    var horizontalMotionEffect : UIInterpolatingMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.x",
        type: .TiltAlongHorizontalAxis)
    horizontalMotionEffect.minimumRelativeValue = -relativeMotionValue
    horizontalMotionEffect.maximumRelativeValue = relativeMotionValue

    var group : UIMotionEffectGroup = UIMotionEffectGroup()
    group.motionEffects = [horizontalMotionEffect, verticalMotionEffect]

    self.background.addMotionEffect(group)
}

Giải pháp của @ veducm có thể ngắn hơn một chút. UIMotionEffectGroup cho chuyển động x và y của nó đã lỗi thời nếu bạn thêm chuyển động trục x và trục y riêng biệt.

UIInterpolatingMotionEffect *motionEffect;
motionEffect = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"center.x"
                                                               type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
motionEffect.minimumRelativeValue = @(-25);
motionEffect.maximumRelativeValue = @(25);
[bgView addMotionEffect:motionEffect];

motionEffect = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"center.y"
                                                               type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
motionEffect.minimumRelativeValue = @(-25);
motionEffect.maximumRelativeValue = @(25);
[bgView addMotionEffect:motionEffect];

const static CGFloat kCustomIOS7MotionEffectExtent = 10.0; 

- (void)applyMotionEffects:(UIView *YOUR_VIEW) {
     if (NSClassFromString(@"UIInterpolatingMotionEffect")) {
         UIInterpolatingMotionEffect *horizontalEffect = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"center.x"
                                                                                                        type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
         horizontalEffect.minimumRelativeValue = @(-kCustomIOS7MotionEffectExtent);
         horizontalEffect.maximumRelativeValue = @( kCustomIOS7MotionEffectExtent);
         UIInterpolatingMotionEffect *verticalEffect = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"center.y"
                                                                                                      type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
         verticalEffect.minimumRelativeValue = @(-kCustomIOS7MotionEffectExtent);
         verticalEffect.maximumRelativeValue = @( kCustomIOS7MotionEffectExtent);
         UIMotionEffectGroup *motionEffectGroup = [[UIMotionEffectGroup alloc] init];
         motionEffectGroup.motionEffects = @[horizontalEffect, verticalEffect]; 
         [YOUR_VIEW addMotionEffect:motionEffectGroup];
     }
}

Đây là một danh mục dễ dàng để tích hợp hiệu ứng trên iOs7 +:

NSString *const centerX = @"center.x";
NSString *const centerY = @"center.y";

//#define IS_OS_7_OR_LATER    ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0)

@implementation UIView (TLMotionEffect)

- (void)addCenterMotionEffectsXYWithOffset:(CGFloat)offset {

//    if(!IS_OS_7_OR_LATER) return;
    if(floor(NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_6_1) return;

    UIInterpolatingMotionEffect *xAxis;
    UIInterpolatingMotionEffect *yAxis;

    xAxis = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:centerX type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
    xAxis.maximumRelativeValue = @(offset);
    xAxis.minimumRelativeValue = @(-offset);

    yAxis = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:centerY type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
    yAxis.minimumRelativeValue = @(-offset);
    yAxis.maximumRelativeValue = @(offset);

    UIMotionEffectGroup *group = [[UIMotionEffectGroup alloc] init];
    group.motionEffects = @[xAxis, yAxis];

    [self addMotionEffect:group];
}

@end

https://github.com/jvenegas/TLMotionEffect

UIMotionEffect cung cấp triển khai thị sai miễn phí trên iOS 7.

http://www.teehanlax.com/blog/introduction-to-uimotioneffect/

https://github.com/michaeljbishop/NGAParallaxMotion cho phép bạn đặt cường độ thị sai.

Điều này sẽ giúp những người đang tìm cách triển khai thị sai cho tableView hoặc collectionView.

• trước hết tạo ô cho dạng xem bảng và đặt dạng xem hình ảnh vào đó.

• đặt chiều cao hình ảnh nhiều hơn chiều cao ô một chút. nếu chiều cao ô = 160, hãy để chiều cao hình ảnh là 200 (để tạo hiệu ứng thị sai và bạn có thể thay đổi nó cho phù hợp)

• đặt hai biến này trong viewController của bạn hoặc bất kỳ lớp nào mà đại biểu tableView của bạn được mở rộng

let imageHeight:CGFloat = 150.0
let OffsetSpeed: CGFloat = 25.0

• thêm mã sau vào cùng một lớp

 func scrollViewDidScroll(scrollView: UIScrollView) {
    //  print("inside scroll")

    if let visibleCells = seriesTabelView.visibleCells as? [SeriesTableViewCell] {
        for parallaxCell in visibleCells {
            var yOffset = ((seriesTabelView.contentOffset.y - parallaxCell.frame.origin.y) / imageHeight) * OffsetSpeedTwo
            parallaxCell.offset(CGPointMake(0.0, yOffset))
        }
    }
}

• trong đó seriesTabelView là UItableview của tôi

• và bây giờ hãy truy cập vào ô của tableView này và thêm mã sau

func offset(offset: CGPoint) {
        posterImage.frame = CGRectOffset(self.posterImage.bounds, offset.x, offset.y)
    }

• được áp phích Hình ảnh là UIImageView của tôi

Nếu bạn muốn triển khai điều này cho collectionView, chỉ cần thay đổi tableView có thể có được thành biến collectionView của bạn

và đó là nó. tôi không chắc liệu đây có phải là cách tốt nhất. Nhưng nó làm việc cho tôi. Hi vọng nó có ích cho bạn. và cho tôi biết nếu có bất kỳ vấn đề nào

Thực sự dễ làm như vậy tại sao lại đề cập đến mã phức tạp. hãy thử nó. Đang làm việc

Xem trên imageview chính xác kích thước của chế độ xem hình ảnh. theo mặc định alpha cho chế độ xem đặt 0.

//MARK: Scroll View Delegate methods
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{

NSLog(@"X: %f Y: %f",scrollView.contentOffset.x,scrollView.contentOffset.y);

CGFloat scrollY = _mainScrollView.contentOffset.y;
CGFloat height = _alphaView.frame.size.height;

CGFloat alphaMonitor = scrollY/height;

_alphaView.alpha = alphaMonitor;
}

Bản dịch nhanh:

// Set vertical effect
let verticalMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.y", type: .TiltAlongVerticalAxis)
verticalMotionEffect.minimumRelativeValue = -value
verticalMotionEffect.maximumRelativeValue = value

// Set vertical effect
let horizontalMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.x", type: .TiltAlongHorizontalAxis)
verticalMotionEffect.minimumRelativeValue = -value
verticalMotionEffect.maximumRelativeValue = value

let group = UIMotionEffectGroup()
group.motionEffects = [horizontalMotionEffect, verticalMotionEffect]
self.motionEffect = group
self.addMotionEffect(group)