मेरे विचार नियंत्रक में iOS 7 लंबन प्रभाव

112

मैं ऑब्जेक्टिव-सी में iOS 7 के लिए एक ऐप विकसित कर रहा हूं। मुझे अपने ऐप में कुछ बटन और एक सुंदर पृष्ठभूमि छवि के साथ एक स्क्रीन मिली है। (यह एक साधारण xib है जिसके UIButtonsशीर्ष पर है UIImageView।)

मैं सोच रहा था कि अगर यह बटन आईओएस 7 होम स्क्रीन है, तो उन बटन का लंबवत प्रभाव होगा, तो यह अच्छा होगा, इसलिए यदि आप फोन को झुकाते हैं तो आप पृष्ठभूमि देख सकते हैं।

मैं अपने स्वयं के ऐप में उस प्रभाव को कैसे लागू कर सकता हूं?

— डान फेबुलिच
स्रोत

1

इस पुस्तकालय पर एक नज़र डालें: github.com/Przytua/UIView-MWParallax

— CRDave

स्विफ्ट के लिए, इसके साथ प्रयास करें: github.com/ArvindPrakashJoshi/AJParallaxEffect

— अरविंद

273

IOS 7 के साथ, Apple ने UIMotionEffectमोशन इफेक्ट्स जोड़ने के लिए शुरुआत की जो उपयोगकर्ता के डिवाइस के ओरिएंटेशन से संबंधित हैं। उदाहरण के लिए, होम स्क्रीन पर लंबन प्रभाव का अनुकरण करने के लिए, आप उप-वर्ग का उपयोग कर सकते हैं UIInterpolationMotionEffect, जैसा कि यहां और यहां बताया गया है , कोड की कुछ पंक्तियों के साथ।

उद्देश्य-सी :

// 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 संस्करणों में इस कार्यक्षमता को जोड़ने के लिए पा सकते हैं:

NGAParallaxMotion ( iOS 7 की आवश्यकता है )।
DVParallaxView ( iOS 5.0 या उच्चतर और ARC की आवश्यकता है )।
MKParallaxView ( iOS 6.0 के साथ परीक्षण किया गया , ARC की आवश्यकता है )।
UIView-MWParallax ( iOS 6.1 के साथ परीक्षण किया गया , ARC की आवश्यकता है )।

— veducm
स्रोत

2

NGAParallaxMotion iOS 7+ के लिए है, पुराने iOS संस्करणों के लिए नहीं। यह UIView के लिए एक श्रेणी प्रदान करता है, जो आपको एक .parallaxIntensity मूल्य सेट करने की अनुमति देता है, कोड की एक पंक्ति के साथ UIMotionEffect पैरामीटर सेट करता है।

— डेन फ़ाबुलिच

2

धन्यवाद! मैंने समर्थित संस्करणों और आवश्यकताओं को शामिल करने के लिए उत्तर को अपडेट किया है।

— veducm

1

दरअसल, आप मोशन व्यू में नहीं बल्कि फ्रंट व्यू में मोशन इफेक्ट जोड़ना चाहते हैं। लेकिन इसके अलावा, यह कोड बहुत अच्छा काम करता है! धन्यवाद।

— 23

1

क्या किसी को पता है कि उपयोगकर्ता ने प्रभावों को निष्क्रिय कर दिया है या नहीं, इसकी जांच कैसे करें? stackoverflow.com/questions/19132000/…

— एरिक

3

@gstroup दरअसल, होम स्क्रीन पर फोरग्राउंड और बैकग्राउंड दोनों चल रहे हैं। लेकिन अगर आप लंबन प्रभाव को लागू करने के लिए केवल एक परत को चुना गया था, तो मैं मानता हूं कि पृष्ठभूमि शायद सबसे अच्छी होगी।

— रबरडक

16

किसी को आलसी होने की स्थिति में तेजी से अनुवादित किया जाना। अगर आपको यह उपयोगी लगा तो कृपया @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

7

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

— XOXO
स्रोत

2

बस एक सिर ऊपर अगर किसी को भी इस संक्षिप्त रूप का उपयोग किया जाता है, पहले गति प्रभाव की जरूरत है एक के लिए के रूप में typeकी UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxisऔर नहीं UIInterpolatingMotionEffectTypeTiltAlongVerticalAxisके रूप में यह कोड में है बाहर रखी

— Flexicoder

1

@ बू एक समूह के रूप में उन्हें जोड़ना अप्रचलित है? आप ने उसे कहाँ देखा? इस लेखन के समय के रूप में Apple डॉक्स को अप्रचलित होने के बारे में कुछ भी नहीं है। उन्हें समूहीकृत करने का पूरा उद्देश्य प्रदर्शन में सुधार करना है। समूह में सभी प्रभाव एक बार प्रदान किए जाते हैं। जब आप उन्हें अलग से लागू करते हैं, तो उन्हें अलग से प्रस्तुत किया जाना चाहिए। अगर मैं गलत हूं तो मुझे सुधारने के लिए स्वतंत्र महसूस करें (और इस पर मुझे Apple के प्रलेखन की ओर इशारा करें।)

— डेविड लारी

6

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

— damithH
स्रोत

1

@Rob ने आपके सुझाव के अनुसार उत्तर अपडेट किया

— damithH

5

यहाँ 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

— Bejil
स्रोत

1

हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, लेकिन उत्तर के आवश्यक भागों को शामिल करना और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक-केवल उत्तर अमान्य हो सकते हैं यदि लिंक किए गए पृष्ठ बदल जाते हैं।

— मैकीज स्विक

यहाँ पूरे

— गीथूब

1

आपको पूरे प्रोजेक्ट को लाने की ज़रूरत नहीं है, केवल आवश्यक भाग जैसे कि मैंने उत्तर को संपादित करके प्रदर्शित किया है। यह इतना है कि कोड गिथब के नीचे होने पर कोड चिपक जाता है, आप रेपो खींच लेते हैं या आकाश नीचे गिर जाता है।

— Maciej Swic

4

UIMotionEffect iOS 7 पर एक मुफ्त लंबन कार्यान्वयन प्रदान करता है।

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

https://github.com/michaeljbishop/NGAParallaxMotion आपको सिर्फ लंबन तीव्रता सेट करने देता है।

— डान फेबुलिच
स्रोत

3

यह किसी ऐसे व्यक्ति की मदद करेगा जो तालिका दृश्य या संग्रह दृश्य के लिए लंबन को लागू करना चाहता है।

सबसे पहले टेबलव्यू के लिए सेल बनाएं और उसमें इमेज व्यू डालें।

सेल ऊंचाई से छवि की ऊंचाई को थोड़ा अधिक सेट करें। यदि सेल ऊंचाई = 160 छवि ऊंचाई 200 है (लंबन प्रभाव बनाने के लिए और आप इसे तदनुसार बदल सकते हैं)

इस दो वैरिएबल को अपने viewController या किसी भी वर्ग में रखें जहां आपके टेबल व्यू प्रतिनिधि को बढ़ाया गया है

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 मेरा UItableview है

और अब गोटो को इस टेबल व्यू की सेल देता है और निम्नलिखित कोड को जोड़ता है

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

posterImage थे मेरे UIImageView

यदि आप इसे संग्रह दृश्य में लागू करना चाहते हैं, तो बस अपने संग्रह दृश्य चर में तालिका दृश्य परिवर्तन को बदल दें

और बस। मुझे यकीन नहीं है कि यह सबसे अच्छा तरीका है। लेकिन यह मेरे लिए काम कर गया। उम्मीद है कि यह आपके लिए भी उपयोगी होगा। और मुझे बताएं कि क्या कोई समस्या है

— मुनीफ एम
स्रोत

2

वास्तव में बांधना आसान है इसलिए जटिल कोड को संदर्भित करता है। कर के देखो।काम कर रहे

इमेजव्यू पर एक नज़र डालें, छवि के आकार का बिल्कुल आकार। डिफॉल्ट अल्फ़ा बाय व्यू सेट 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;
}

— श्री जावेद मुल्तानी
स्रोत

-1

स्विफ्ट अनुवाद:

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

— mukaissi
स्रोत