반응형
내 보기 컨트롤러의 iOS 7 시차 효과
Objective-C에서 iOS 7용 앱을 개발하고 있습니다.앱에 몇 개의 버튼과 예쁜 배경 이미지가 있는 화면이 있습니다.(간단한 xib with)UIButtons위에UIImageView.)
저는 그 버튼들이 iOS 7 홈 화면이 가지고 있는 시차 효과가 있으면 멋질 것 같아서 핸드폰을 기울이면 배경이 보일 것이라고 생각했습니다.
어떻게 하면 그 효과를 내 앱에 구현할 수 있습니까?
애플은 iOS 7을 통해 사용자 기기의 방향과 관련된 모션 효과를 추가하기 시작했습니다.예를 들어 홈 화면의 시차 효과를 에뮬레이트하려면 여기 설명된 대로 몇 줄의 코드만으로 서브클래스를 사용할 수 있습니다.
목표-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];
스위프트(@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)
또한 이 기능을 더 쉽게 실행하거나 이전 iOS 버전에 이 기능을 추가할 수 있는 라이브러리를 많이 찾을 수 있습니다.
- NGAP ParalaxMotion(iOS 7 필요).
- DVParallaxView(iOS 5.0 이상 및 ARC 필요)
- MKParallaxView(iOS 6.0으로 테스트한 경우 ARC 필요).
- UIView-MWP Paralax(iOS 6.1로 테스트한 경우 ARC가 필요)
게으른 사람이 있을 경우를 대비해 swift로 번역했습니다.이것이 유용하다고 생각되면 @veducm 응답해주세요.
@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)
}
@veducm의 솔루션은 조금 더 짧을 수 있습니다.x축 및 y축 모션 효과를 별도로 추가하면 해당 x 및 y축 모션에 대한 UIMotionEffectGroup은 더 이상 사용되지 않습니다.
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];
}
}
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는 iOS 7에서 무료 시차 구현을 제공합니다.
http://www.teehanlax.com/blog/introduction-to-uimotioneffect/
https://github.com/michaeljbishop/NGAParallaxMotion 을 사용하면 시차 강도만 설정할 수 있습니다.
이렇게 하면 tableView 또는 collectionView에 대해 시차를 구현하려는 사용자에게 도움이 됩니다.
먼저 테이블 뷰의 셀을 만들고 이미지 뷰를 그 안에 넣습니다.
셀 높이보다 이미지 높이를 약간 높게 설정합니다. 셀 높이 = 160이면 이미지 높이를 200으로 설정합니다(시차 효과를 내고 그에 따라 변경할 수 있습니다).
뷰에 이 두 변수를 넣습니다. 컨트롤러 또는 테이블 뷰 위임자가 확장된 클래스
let imageHeight:CGFloat = 150.0
let OffsetSpeed: CGFloat = 25.0
- 같은 클래스에 다음 코드를 추가합니다.
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))
}
}
}
여기서 seriesTabelView는 내 UI 테이블 뷰입니다.
이제 이 테이블의 셀로 이동하여 다음 코드를 추가합니다.
func offset(offset: CGPoint) {
posterImage.frame = CGRectOffset(self.posterImage.bounds, offset.x, offset.y)
}
- were posterImageImageImageImageView
이를 컬렉션에 구현하려면Table을 변경하기만 하면 됩니다CollectionView변수에 적용 가능한 보기
그게 다에요 이게 최선의 방법인지는 잘 모르겠지만 저한테는 효과가 있어요당신에게도 효과가 있기를 바랍니다.그리고 문제가 있으면 저에게 알려주세요.
왜 복잡한 코드를 참조하는지 정말 쉽게 알 수 있습니다.그냥 한번 해보세요.일하는중
이미지 뷰에서 뷰 세트 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;
}
빠른 번역:
// 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)
언급URL : https://stackoverflow.com/questions/18972994/ios-7-parallax-effect-in-my-view-controller
반응형
'programing' 카테고리의 다른 글
| 표에 없는 목록에서 값 선택 (0) | 2023.10.25 |
|---|---|
| jQuery Waypoints 오류:스틱 메서드가 없습니다. (0) | 2023.10.25 |
| 앱을 시작할 때 'npm start'와 'node app.js'의 차이점은? (0) | 2023.10.25 |
| $filter를 Microsoft Graph Excel API와 함께 사용 (0) | 2023.10.25 |
| Tymeleaf의 각 연산자에 대해 (0) | 2023.10.25 |