UIView बाउंस एनीमेशन कैसे बनाएं?


92

मेरे पास एक UIView नामक निम्नलिखित कैट्रिशन है 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"];

मैं इसे कैसे बनाऊं ताकि यह नीचे आने के बाद एक बार उछले, फिर भी रुके? यह अभी भी ऊपर से स्क्रीन दर्ज करना चाहिए, लेकिन फिर नीचे आने पर उछाल।

किसी भी मदद की सराहना की जाएगी, धन्यवाद!


3
क्या आप iOS7 और इसके बाद के संस्करण को लक्षित कर रहे हैं? यदि हां, तो आप
WDUK

जवाबों:


144

IOS7 और UIKit डायनेमिक्स के साथ, अब उपयोग CAKeyframeAnimationsया UIViewएनिमेशन की कोई आवश्यकता नहीं है !

Apple के UIKit Dynamics कैटलॉग ऐप पर एक नज़र डालें । वैकल्पिक रूप से, Teehanlax एक स्पष्ट, संक्षिप्त ट्यूटोरियल है साथ GitHub में पूर्ण परियोजना । यदि आप डायनामिक्स के इन्स-एंड-आउट के बारे में अधिक विस्तृत ट्यूटोरियल चाहते हैं, तो रे विंडरलिच ट्यूटोरियल बहुत अच्छा है। हमेशा की तरह, Apple डॉक्स एक महान पहला पड़ाव है, इसलिए डॉक्स में UIDynamicAnimator क्लास संदर्भ देखें

यहाँ किशानलक्स ट्यूटोरियल से थोड़ा सा कोड दिया गया है:

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

और यहाँ परिणाम हैं

चौकोर उछाल

UIKit Dynamics iOS7 के अलावा एक बहुत शक्तिशाली और उपयोग करने में आसान है और आप इससे कुछ बेहतरीन दिखने वाले UI प्राप्त कर सकते हैं।

अन्य उदाहरण:

बटन उछाल स्लाइड उछाल बसंत का संग्रह WWDC स्प्रिंट संग्रह

UIKit डायनामिक्स को लागू करने के चरण हमेशा समान होते हैं:

  1. एक बनाएँ UIDynamicAnimatorऔर इसे एक मजबूत संपत्ति में संग्रहीत करें
  2. एक या एक से अधिक बनाएँ UIDynamicBehaviors। प्रत्येक व्यवहार में एक या अधिक आइटम होना चाहिए, आम तौर पर चेतन को देखने के लिए।
  3. सुनिश्चित करें कि उपयोग की गई वस्तुओं की प्रारंभिक स्थिति सिमुलेशन के UIDynamicBehaviorsभीतर एक वैध स्थिति है UIDynamicAnimator

1
हाय माइकल, आपकी मदद के लिए बहुत बहुत धन्यवाद! यह निश्चित रूप से करने के लिए बहुत आसान लग रहा है! मैंने इसे आज़माया और यह तब काम करता है जब यह दृश्य के नीचे से टकराता है, लेकिन यह किसी अन्य दृश्य के साथ काम नहीं करता है - stackoverflow.com/questions/21895674/… - मुझे अच्छा लगेगा अगर आप वहाँ मेरी मदद कर सकें! :) धन्यवाद
user3127576

2
एक शिक्षाप्रद ट्यूटोरियल बट आप एक उछाल के लिए, कोड की एक पंक्ति का उपयोग करते हुए, SpringWithDamping का उपयोग करेंगे!
फेटी

2
क्या आप ऊपर दिए गए Uitableview उछाल एनीमेशन के लिए कुछ कोड नमूना साझा कर सकते हैं। मैं UITableview के साथ प्रयास कर रहा हूं लेकिन यह सुनिश्चित नहीं है कि कहां से शुरू करना है।
दिनेश

1
जब आप उदाहरण के मामलों से निपटते हैं तो UIKit Dynamics बहुत अच्छा होता है। लेकिन जब वास्तविक कार्यों की बात आती है, तो आप देखते हैं कि यह कितना कच्चा और प्रतिबंधित है। एक बड़ी समस्या ओवरराइडिंग है UIDynamicItemBehavior(जो वास्तव में गुण है, व्यवहार नहीं)। आप विभिन्न व्यवहारों में विभिन्न भौतिक गुणों का उपयोग नहीं कर सकते। एक और मामला UIScrollView जैसे रबर की सीमा को लागू कर रहा है - यह बहुत जटिल है। मैं और भी लिख सकता हूं लेकिन टिप्पणी बहुत कम है।
केलिन

2
कृपया पूर्ण कोड जोड़ें। आपका कोड वर्णन करता है कि कैसे बनाएं UIDynamicAnimatorऔर इससे जुड़ी वस्तुएं लेकिन उनका उपयोग करने के तरीके का जवाब नहीं देते हैं
व्यासचावल गेरिकोव

261

UIDynamicAnimatorIOS 7 में एक सरल विकल्प स्प्रिंग एनीमेशन (एक नया और शक्तिशाली UIView ब्लॉक एनीमेशन) है, जो आपको भिगोना और वेग के साथ अच्छा उछाल प्रभाव दे सकता है: उद्देश्य सी

[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मोटे तौर पर, "वांछित दूरी, वांछित सेकंड से विभाजित" है। 1.0 एक सेकंड में ट्रेस की गई कुल एनीमेशन दूरी से मेल खाती है। उदाहरण, कुल एनिमेशन दूरी 200 अंक है और आप 100 पीटी / एस के दृश्य वेग से मेल खाने के लिए एनीमेशन की शुरुआत चाहते हैं, 0.5 के मान का उपयोग करें।

अधिक विस्तृत ट्यूटोरियल और सैंपल ऐप इस ट्यूटोरियल में देखे जा सकते हैं । मुझे उम्मीद है कि यह किसी के लिए उपयोगी है।


2
यहाँ एक डेमो प्रोजेक्ट है जिसे मैंने एनीमेशन को सही बनाने में आपकी मदद करने के लिए बनाया है। का आनंद लें! github.com/jstnheo/SpringDampingDemo
jstn

उस डेमो प्रोजेक्ट के लिए चीयर्स, मेट। वास्तव में इन मूल्यों का पता लगाने में मदद करता है क्योंकि वे काफी मोटे हैं। काश Apple ने उन्हें स्पष्ट कर दिया होता
kakubei

32

यहाँ एक डेमो प्रोजेक्ट है जिसे मैंने एनीमेशन को सही बनाने में आपकी मदद करने के लिए बनाया है। का आनंद लें!

SpringDampingDemo

यहां छवि विवरण दर्ज करें


उस डेमो प्रोजेक्ट के लिए चीयर्स, मेट। वास्तव में इन मूल्यों का पता लगाने में मदद करता है क्योंकि वे काफी मोटे हैं। काश Apple ने उन्हें स्पष्ट कर दिया होता
kakubei

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

1
कोड में कोई स्पष्टीकरण नहीं है और कोई टिप्पणी नहीं है। यह मददगार नहीं है
लोरेंजो
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.