আইওএস 7 আমার ভিউ কন্ট্রোলারে প্যারাল্যাক্স প্রভাব


112

আমি উদ্দেশ্য 7-এ আইওএস 7 এর জন্য একটি অ্যাপ্লিকেশন বিকাশ করছি। আমি আমার বোতামটিতে কয়েকটি বোতাম এবং একটি সুন্দর ব্যাকগ্রাউন্ড চিত্র পেয়েছি। (এটি একটি সাধারণ UIButtonsশীর্ষস্থানীয় যার উপরে রয়েছে UIImageView)

আমি ভাবছিলাম যে যদি শীঘ্রই এই বোতামগুলির আইওএস 7 এর হোম স্ক্রিনের প্যারাল্যাক্স প্রভাব থাকে, তাই আপনি যদি ফোনটি টিল্ট করেন তবে আপনি ব্যাকগ্রাউন্ডটি দেখতে পাবেন।

আমি কীভাবে সেই প্রভাবটি নিজের অ্যাপ্লিকেশনটিতে প্রয়োগ করতে পারি?


1
এই লাইব্রেরিতে একবার দেখুন: github.com/Przytua/UIView-MWParallax
CRDave

উত্তর:


273

আইওএস 7 এর সাহায্যে অ্যাপল 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];

সুইফ্ট (@ লুকাসকে ধন্যবাদ):

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

এছাড়াও, আপনি এটি আরও সহজ করতে বা পুরানো আইওএস সংস্করণগুলিতে এই কার্যকারিতা যুক্ত করার জন্য একগুচ্ছ গ্রন্থাগার সন্ধান করতে পারেন:


2
এনজিএপিআরালাল্যাক্স মোশন আইওএস 7+ এর জন্য, পুরানো আইওএস সংস্করণগুলির জন্য নয়। এটি ইউআইভিউ-র জন্য একটি বিভাগ সরবরাহ করে, আপনাকে কোডের এক লাইনের সাথে ইউআইএমএশনএফেক্ট প্যারামিটার সেট আপ করে একটি .PrallaxIntensity মান সেট করার অনুমতি দেয়।
ড্যান ফাবুলিচ

2
ধন্যবাদ! সমর্থিত সংস্করণ এবং প্রয়োজনীয়তা অন্তর্ভুক্ত করার জন্য আমি উত্তরটি আপডেট করেছি।
বেদুকম

1
প্রকৃতপক্ষে, আপনি গতির প্রভাবটি সামনের দৃশ্যে নয়, ব্যাকগ্রাউন্ড ভিউতে যুক্ত করতে চান। তবে তা ছাড়া এই কোডটি দুর্দান্ত কাজ করে! ধন্যবাদ।
gstroup

1
ব্যবহারকারী প্রভাবগুলি অক্ষম করেছে কিনা তা কীভাবে চেক করতে হয় কেউ জানেন? stackoverflow.com/questions/19132000/…
এরিক

3
@gstroup আসলে হোম স্ক্রিনে অগ্রভাগ এবং পটভূমি উভয়ই চলমান। তবে আপনাকে যদি প্যারাল্যাক্স এফেক্ট প্রয়োগ করতে শুধুমাত্র একটি স্তর বেছে নেওয়া হয় তবে আমি সম্মত হই যে ব্যাকগ্রাউন্ডটি সম্ভবত সেরা be
রাবারডাক্ক

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

ধন্যবাদ @ লুকাস! আমি দ্রুত উত্তরটি অন্তর্ভুক্ত করার জন্য আমার উত্তর আপডেট করেছি answer এটি এই এক উপর ভিত্তি করে। এটি পর্যালোচনা করতে নির্দ্বিধায় এবং কোনও পরিবর্তন প্রয়োজন do
বেদুচম

7

@ বেদুকমের দ্রবণটি আরও খাটো হতে পারে। আপনি এক্স এবং ওয়াই-অ্যাকসিস মোশনএফেক্টগুলি আলাদাভাবে যুক্ত করলে এর এক্স এবং ওয়াই মোশনের জন্য ইউআইমোশনএফেক্টগ্রুপটি অপ্রচলিত।

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

2
শুধু একটি মাথা আপ যদি কেউ এই সংক্ষিপ্ত সংস্করণ ব্যবহার করছে, প্রথম মোশন প্রভাবের চাহিদা একটি আছে যেমন typeএর UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxisএবং UIInterpolatingMotionEffectTypeTiltAlongVerticalAxisযেমন কোডে হয় পরিপূর্ণ
Flexicoder

1
@ বুহু তাদের একটি গ্রুপ হিসাবে যুক্ত করা অচল? তুমি কোথায় দেখছ? এই লেখার সময় হিসাবে অ্যাপল ডক্সের এটি অপ্রচলিত হওয়ার বিষয়ে কিছুই নেই। এগুলি গোষ্ঠীভুক্ত করার পুরো উদ্দেশ্যটি পারফরম্যান্সের উন্নতি করা। গোষ্ঠীর সমস্ত প্রভাব একবারে রেন্ডার করা হয়। আপনি এগুলি পৃথকভাবে প্রয়োগ করার সময় এগুলি পৃথকভাবে উপস্থাপন করতে হবে। আমি ভুল হলে আমাকে সংশোধন করতে নির্দ্বিধায় (এবং এতে অ্যাপলের ডকুমেন্টেশনের দিকে আমাকে ইঙ্গিত করুন)
ডেভিড লারি

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

1
@ রব আপনার পরামর্শ অনুসারে উত্তরটি আপডেট করেছেন
দামিথএইচ

5

আইওএস 7 + এ প্রভাবটি সংহত করার জন্য এখানে একটি সহজ বিভাগ রয়েছে:

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


1
যদিও এই লিঙ্কটি প্রশ্নের উত্তর দিতে পারে, উত্তরের প্রয়োজনীয় অংশগুলি এখানে অন্তর্ভুক্ত করা এবং রেফারেন্সের জন্য লিঙ্কটি সরবরাহ করা ভাল। লিঙ্কযুক্ত পৃষ্ঠাগুলি পরিবর্তিত হলে লিঙ্ক-শুধুমাত্র উত্তরগুলি অবৈধ হতে পারে।
ম্যাকিয়েজ সুইচ

পুরো
গিথুব

1
আপনাকে পুরো প্রকল্পটি আনতে হবে না, উত্তরটির সম্পাদনা করে আমি যেমন প্রযোজ্য তার মতো প্রয়োজনীয় অংশই প্রদর্শন করেছি। এটি এমন যাতে গিথুব নিচে নেওয়ার ক্ষেত্রে কোডটি চারপাশে আটকে থাকে, আপনি রেপো টানেন বা আকাশ নীচে নেমে আসবে।
ম্যাকিয়েজ সুইচ

4

ইউআইএমশনএফেক্ট আইওএস 7 এ একটি ফ্রি প্যারাল্যাক্স বাস্তবায়ন সরবরাহ করে।

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

https://github.com/michaeljbishop/NGAParallaxMotion আপনাকে কেবলমাত্র প্যারাল্যাক্সের তীব্রতা সেট করতে দেয়।


3

এটি এমন কাউকে সহায়তা করবে যা টেবিলভিউ বা সংগ্রহ ভিউয়ের জন্য প্যারাল্যাক্স প্রয়োগ করতে চাইছে।

  • সবার আগে টেবিল ভিউয়ের জন্য ঘর তৈরি করুন এবং এতে চিত্রের দৃশ্যটি রাখুন।

  • ঘরের উচ্চতার চেয়ে চিত্রের উচ্চতাটি কিছুটা বেশি সেট করুন। যদি সেল উচ্চতা = 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))
        }
    }
}
  • যেখানে সিরিজটেলভিউটি আমার ইউআইটিবেল ভিউ

  • এবং এখন এই টেবিলভিউয়ের ঘরটিতে যেতে দিন এবং নীচের কোডটি যুক্ত করুন

func offset(offset: CGPoint) {
        posterImage.frame = CGRectOffset(self.posterImage.bounds, offset.x, offset.y)
    }
  • পোস্টার আইমেজটি আমার ইউআইআইমেজভিউ

আপনি যদি এইটিকে কালেকশনভিউতে বাস্তবায়ন করতে চান তবে কেবল আপনার সংগ্রহের ভিউ পরিবর্তনশীলের জন্য টেবিলভিউ পরিবর্তনযোগ্য change

এবং এটাই. আমি নিশ্চিত নই যে এটি সর্বোত্তম উপায় কিনা। তবে এটি আমার পক্ষে কাজ করে। আশা করি এটি আপনার জন্যও কাজ করে। এবং কোনও সমস্যা আছে কিনা তা আমাকে জানান


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)
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.