ios - parallaxheader - parallax swift

Efecto de paralaje de iOS 7 en mi controlador de vista

Question

Estoy desarrollando una aplicación para iOS 7 en Objective-C. Tengo una pantalla en mi aplicación con algunos botones y una bonita imagen de fondo. (Es un xib simple con UIButtons encima de UIImageView .)

Estaba pensando que sería genial si esos botones tuvieran el efecto de paralaje que tiene la pantalla de inicio de iOS 7, así que si inclinas el teléfono, podrías ver el fondo.

¿Cómo puedo implementar ese efecto en mi propia aplicación?

Answer 1

Aquí hay una categoría sencilla para integrar el efecto en 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

Answer 2

Con iOS 7, Apple introdujo UIMotionEffect para agregar efectos de movimiento que están relacionados con la orientación del dispositivo del usuario. Por ejemplo, para emular el efecto de paralaje en la pantalla de inicio, puede usar la subclase UIInterpolationMotionEffect , como se explica here y here , solo con unas pocas líneas de código.

Objective-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 (gracias a @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)

Además, puede encontrar un conjunto de bibliotecas para hacer esto más fácil o para agregar esta funcionalidad a las versiones anteriores de iOS:

• NGAParallaxMotion (requiere iOS 7 ).
• DVParallaxView (requiere iOS 5.0 o superior y ARC ).
• MKParallaxView (probado con iOS 6.0 , requiere ARC ).
• github.com/Przytua/UIView-MWParallax (probado con iOS 6.1 , requiere ARC ).

Answer 3

La solución de @ veducm puede ser un poco más corta. UIMotionEffectGroup para su movimiento xey está obsoleto si agrega los efectos de movimiento xey del eje y por separado.

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];

Answer 4

Realmente es fácil de hacer, entonces ¿por qué se refiere a código complejo? solo inténtalo. Trabajando

Tome una vista de la vista de la imagen exactamente del tamaño de la vista de la imagen. por defecto alfa para ver conjunto 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;
}

Answer 5

Swift traducción:

// 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)

Answer 6

Traducido a veloz en caso de que alguien sea flojo. Por favor, vote @veducm answer si lo encontró útil

@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)
}

Answer 7

UIMotionEffect proporciona una implementación gratuita de paralaje en iOS 7.

here

NGAParallaxMotion te permite establecer la intensidad del paralaje.

Answer 8

Esto ayudará a alguien que esté buscando implementar paralaje para tableView o collectionView.

• primero crea la celda para la vista de tabla y pon la vista de imagen en ella.

• establecer la altura de la imagen ligeramente más que la altura de la celda. si la altura de celda = 160, deje que la altura de la imagen sea 200 (para hacer el efecto de paralaje y puede cambiarlo en consecuencia)

• pon esta dos variables en tu viewController o cualquier clase donde tu delegado tableView esté extendido

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

• agregue el siguiente código en la misma clase

 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))
}
}
}

• donde seriesTabelView es mi UItableview

• y ahora vamos a ir a la celda de esta tabla y agregar el siguiente código

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

• fueron posterImage es mi UIImageView

Si desea implementar esto en collectionView, simplemente cambie tableView vairable a su collectionView variable

y eso es. No estoy seguro si esta es la mejor manera. Pero funciona para mí. Espero que funcione para usted también. y avíseme si hay algún problema

Answer 9

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];
}
}