কীভাবে একটি ইউআইভিউ বাউন্স অ্যানিমেশন তৈরি করবেন?


93

আমার কাছে একটি ইউআইভিউউয়ের জন্য নীচে বর্ণিত CATransition রয়েছে finalScoreView, যা এটি উপরে থেকে স্ক্রিনে প্রবেশ করে:

CATransition *animation = [CATransition animation];
animation.duration = 0.2;
animation.type = kCATransitionPush;
animation.subtype = kCATransitionFromBottom;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

[gameOver.layer addAnimation:animation forKey:@"changeTextTransition"];
[finalScoreView.layer addAnimation:animation forKey:@"changeTextTransition"];

আমি এটি কীভাবে তৈরি করব যাতে এটি একবার নেমে আসার পরে তা ছুঁড়ে যায়, তারপরেও স্থির থাকে? এটি এখনও উপরে থেকে পর্দা প্রবেশ করা উচিত তবে নীচে নেমে আসার পরে বাউন্স করা উচিত।

কোন সাহায্যের অনেক, ধন্যবাদ প্রশংসা হবে!


4
আপনি কি iOS7 এবং তারপরের উপরে লক্ষ্যবস্তু করছেন? যদি তা হয় তবে আপনি ইউআইকিট ডায়নামিক্স
ডাব্লুডিইউ

উত্তর:


146

আইওএস 7 এবং ইউআইকিট ডায়নামিক্স সহ, আর ব্যবহার CAKeyframeAnimationsবা UIViewঅ্যানিমেশনগুলির আর প্রয়োজন নেই !

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

টিনহ্যালাক্স টিউটোরিয়াল থেকে কোডটি এখানে দেওয়া হয়েছে:

self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

UIGravityBehavior *gravityBehavior = 
                [[UIGravityBehavior alloc] initWithItems:@[self.redSquare]];
[self.animator addBehavior:gravityBehavior];
    
UICollisionBehavior *collisionBehavior = 
                [[UICollisionBehavior alloc] initWithItems:@[self.redSquare]]; 
collisionBehavior.translatesReferenceBoundsIntoBoundary = YES;
[self.animator addBehavior:collisionBehavior];
    
UIDynamicItemBehavior *elasticityBehavior = 
                [[UIDynamicItemBehavior alloc] initWithItems:@[self.redSquare]];
elasticityBehavior.elasticity = 0.7f;
[self.animator addBehavior:elasticityBehavior];

এবং ফলাফল এখানে

স্কয়ার বাউন্স

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

অন্যান্য উদাহরণ:

বাটন বাউন্স

স্লাইড বাউন্স

স্প্রিং কালেকশন

ডাব্লুডাব্লুডিসি বসন্ত সংগ্রহ

ইউআইকিট গতিবিদ্যা বাস্তবায়নের পদক্ষেপগুলি সর্বদা এক রকম:

  1. একটি তৈরি করুন UIDynamicAnimatorএবং একটি শক্তিশালী সম্পত্তি এ এটি সংরক্ষণ করুন
  2. এক বা একাধিক তৈরি করুন UIDynamicBehaviors। প্রতিটি আচরণে এক বা একাধিক আইটেম থাকা উচিত, সাধারণত প্রাণবন্ত করার জন্য একটি ভিউ।
  3. নিশ্চিত হয়ে নিন যে ব্যবহৃত আইটেমগুলির প্রাথমিক অবস্থা অনুকরণের UIDynamicBehaviorsমধ্যে একটি বৈধ রাষ্ট্র UIDynamicAnimator

4
হাই মাইকেল, আপনার সহায়তার জন্য অনেক ধন্যবাদ! এটি অবশ্যই করা অত্যন্ত চূড়ান্ত বলে মনে হচ্ছে! আমি এটি চেষ্টা করেছিলাম এবং এটি যখন ভিউয়ের নীচে ছিটকে যায় তখন এটি কাজ করে, তবে এটি অন্য দৃশ্যের সাথে কাজ করে না - stackoverflow.com/questions/21895674/… - আপনি যদি আমাকে সেখানে সাহায্য করতে পারতেন তবে আমি পছন্দ করব! :) ধন্যবাদ
ব্যবহারকারীর 12127576

4
একটি চৌম্বক টিউটোরিয়াল তবে আপনি কেবল একটি বাউন্সের জন্য স্প্রিং উইথড্যাম্পিং ব্যবহার করে কোডের একটি লাইন ব্যবহার করবেন!
ফ্যাটি

4
আপনি কি উপরের মতো ইউটিবেলভিউ বাউন অ্যানিমেশনের জন্য কিছু কোড নমুনা ভাগ করতে পারেন? আমি ইউআইটিএলভিউ দিয়ে চেষ্টা করছি তবে কোথা থেকে শুরু করব তা নিশ্চিত নই।
দিনেশ

4
আপনি উদাহরণস্বরূপ কেসগুলি মোকাবেলা করার সময় ইউআইকিট ডায়নামিক্স দুর্দান্ত। কিন্তু যখন আসল কাজগুলির কথা আসে, আপনি দেখতে পান এটি কতটা কাঁচা এবং সীমাবদ্ধ। একটি বড় সমস্যা হ'ল UIDynamicItemBehavior(যা আসলে বৈশিষ্ট্য, আচরণ নয়), আপনি বিভিন্ন আচরণে কেবল বিভিন্ন শারীরিক বৈশিষ্ট্য ব্যবহার করতে পারবেন না। অন্য একটি মামলা ইউআইএসক্রলভিউ-র মত রাবারের সীমানা বাস্তবায়ন করছে - এটি খুব জটিল। আমি আরও লিখতে পারি তবে মন্তব্যটি খুব ছোট।
কেলিন

4
সম্পূর্ণ কোড যোগ করুন। আপনার কোডটি কীভাবে তৈরি করতে হবে UIDynamicAnimatorএবং এর সাথে সম্পর্কিত জিনিসগুলি বর্ণনা করে তবে সেগুলি কীভাবে ব্যবহার করা যায় তার জবাব দেয় না
ভাইচাস্লাভ গের্চিকভ

263

UIDynamicAnimatorআইওএস in এর একটি সহজ বিকল্প হ'ল স্প্রিং অ্যানিমেশন (একটি নতুন এবং শক্তিশালী ইউআইভিউ ব্লক অ্যানিমেশন), যা আপনাকে স্যাঁতসেঁতে এবং বেগের সাথে দুর্দান্ত বাউন্সিং এফেক্ট দিতে পারে: উদ্দেশ্য সি

[UIView animateWithDuration:duration
  delay:delay
  usingSpringWithDamping:damping
  initialSpringVelocity:velocity
  options:options animations:^{
    //Animations
    }
  completion:^(BOOL finished) {
    //Completion Block
}];

সুইফট

UIView.animateWithDuration(duration,
     delay: delay,
     usingSpringWithDamping: damping,
     initialSpringVelocity: velocity,
     options: options,
     animations: {
            //Do all animations here
            }, completion: {
            //Code to run after animating
                (value: Bool) in
        })

সুইফট 4.0

UIView.animate(withDuration:duration,
     delay: delay,
     usingSpringWithDamping: damping,
     initialSpringVelocity: velocity,
     options: options,
     animations: {
            //Do all animations here
            }, completion: {
            //Code to run after animating
                (value: Bool) in
        })

usingSpringWithDamping 0.0 == খুব বাউন্সি। 1.0 এটিকে ওভারশুটিং ছাড়াই সহজেই হ্রাস পেতে পারে।

initialSpringVelocityমোটামুটিভাবে "কাঙ্ক্ষিত দূরত্ব, কাঙ্ক্ষিত সেকেন্ডে বিভক্ত"। ১.০ এক সেকেন্ডে মোট অ্যানিমেশন দূরত্বের সাথে সম্পর্কিত। উদাহরণস্বরূপ, মোট অ্যানিমেশন দূরত্ব 200 পয়েন্ট এবং আপনি 100 পেন্ট / সেকেন্ডের ভিউ বেগের সাথে মিলিয়ে অ্যানিমেশনটির শুরু করতে চান, 0.5 এর মান ব্যবহার করুন।

আরও টিউটোরিয়াল এবং নমুনা অ্যাপ্লিকেশনটি এই টিউটোরিয়ালে পাওয়া যাবে । আমি আশা করি এটি কারওর জন্য দরকারী।


4
অ্যানিমেশনটি ঠিক ঠিক পেতে সহায়তা করার জন্য আমি এখানে একটি ডেমো প্রকল্প তৈরি করেছি। উপভোগ করুন! github.com/jstnheo/SpringDampingDemo
jstn

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

32

অ্যানিমেশনটি ঠিক ঠিক পেতে সহায়তা করার জন্য আমি এখানে একটি ডেমো প্রকল্প তৈরি করেছি। উপভোগ করুন!

স্প্রিংড্যাম্পিংডেমো

এখানে চিত্র বর্ণনা লিখুন


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

-1
- (IBAction)searchViewAction:(UIButton*)sender
{
  if(sender.tag == 0)
  {
    sender.tag = 1;

    CGRect optionsFrame2 = self.defaultTopView.frame;
    optionsFrame2.origin.x = -320;

    CGRect optionsFrame = self.searhTopView.frame;
    optionsFrame.origin.x = 320;
    self.searhTopView.frame = optionsFrame;

    [UIView animateWithDuration:1.0 delay:0.0 usingSpringWithDamping:0.5 initialSpringVelocity:1.0 options:0 animations:^{

        CGRect optionsFrame = self.searhTopView.frame;

        optionsFrame.origin.x = 0;
        self.searhTopView.frame = optionsFrame;
        self.defaultTopView.frame = optionsFrame2;
    } completion:^(BOOL finished) {
    }];        
}
else
{
    sender.tag = 0;

    CGRect optionsFrame2 = self.defaultTopView.frame;
    optionsFrame2.origin.x = 0;

    CGRect optionsFrame = self.searhTopView.frame;
    optionsFrame.origin.x = 320;

    [UIView animateWithDuration:1.0 delay:0.0 usingSpringWithDamping:0.5 initialSpringVelocity:1.0 options:0 animations:^{

        CGRect optionsFrame = self.searhTopView.frame;

        optionsFrame.origin.x = 320;
        self.searhTopView.frame = optionsFrame;
        self.defaultTopView.frame = optionsFrame2;
    } completion:^(BOOL finished) {
    }];
}
}

4
কোডটিতে কোনও ব্যাখ্যা নেই এবং কোনও মন্তব্য নেই। এটি সহায়ক নয়
লরেঞ্জো
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.