UILabel এ পাঠ্য পরিবর্তন অ্যানিমেট করুন


133

আমি একটিতে একটি নতুন পাঠ্য মান সেট করছি UILabel। বর্তমানে, নতুন পাঠ্যটি ঠিক আছে। তবে, নতুন পাঠ্যটি উপস্থিত হওয়ার পরে আমি কিছু অ্যানিমেশন যুক্ত করতে চাই। আমি ভাবছি নতুন পাঠ্যের চেহারা সঞ্চারিত করতে আমি কী করতে পারি।


সুইফ্ট 5 এর জন্য, আমার উত্তরটি দেখুন যা আপনার সমস্যা সমাধানের জন্য 2 টি পৃথক উপায় দেখায়।
ইমানো পেটিট 7:57

উত্তর:


177

আমি অবাক হই যে এটি কাজ করে, এবং এটি পুরোপুরি কার্যকর হয়!

উদ্দেশ্য গ

[UIView transitionWithView:self.label 
                  duration:0.25f 
                   options:UIViewAnimationOptionTransitionCrossDissolve 
                animations:^{

    self.label.text = rand() % 2 ? @"Nice nice!" : @"Well done!";

  } completion:nil];

সুইফট 3, 4, 5

UIView.transition(with: label,
              duration: 0.25,
               options: .transitionCrossDissolve,
            animations: { [weak self] in
                self?.label.text = (arc4random()() % 2 == 0) ? "One" : "Two"
         }, completion: nil)

16
নোট করুন যে ট্রানজিশনক্রসড ডিসলভ এই কাজের জন্য মূল বিষয়।
আকারু

7
ইউআইভিউ অ্যানিমেশন ব্লকে আপনার [দুর্বল স্ব] দরকার নেই। দেখুন stackoverflow.com/a/27019834/511299
Sunkas

162

উদ্দেশ্য গ

সত্যিকারের ক্রস-দ্রবীভূত রূপান্তরটি অর্জন করতে ( নতুন লেবেলটি ম্লান হয়ে যাওয়ার সময় পুরানো লেবেল ম্লান হয়ে যাচ্ছে), আপনি অদৃশ্য হয়ে যাওয়াতে বিবর্ণ হতে চান না। এটি পাঠ্য অপরিবর্তিত থাকলেও এটি অযাচিত ঝলকানির ফলাফল করবে ।

পরিবর্তে এই পদ্ধতির ব্যবহার করুন:

CATransition *animation = [CATransition animation];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.type = kCATransitionFade;
animation.duration = 0.75;
[aLabel.layer addAnimation:animation forKey:@"kCATransitionFade"];

// This will fade:
aLabel.text = "New"

আরও দেখুন: দুটি সংখ্যার মধ্যে ইউিলাবল পাঠ্য অ্যানিমেট করবেন?

আইওএস 10, 9, 8 এ বিক্ষোভ:

ফাঁকা, তারপরে 1 থেকে 5 বিবর্ণ রূপান্তর


সাথে পরীক্ষিত Xcode 8.2.1 & 7.1 , ObjectiveC উপর 8.0 থেকে আইওএস 10

► পূর্ণ প্রকল্পের ডাউনলোড করতে, অনুসন্ধান তাই-3073520 মধ্যে সুইফট রেসিপি


যখন আমি একই সাথে দুটি লেবেল সেট করি তবে এটি সিমুলেটারে ফ্লিকার দেয়।
হুগি

1
সম্ভবত অপব্যবহার? আমার পদ্ধতির বিষয়টি হল 2 টি লেবেল ব্যবহার না করা। আপনি -addAnimation:forKeyসেই লেবেলে একটি একক লেবেল ব্যবহার করেন , তারপরে লেবেলের পাঠ্যটি পরিবর্তন করুন।
সুইফট আরকিটেক্ট

@ কনফিউজড ভার্লন, দয়া করে আপনার বক্তব্য যাচাই করুন। এবং swiftarchitect.com/recines/#SO-3073520 এ পোস্ট প্রকল্পের বিরুদ্ধে পরীক্ষা করুন ।
সুইফট আরকিটেক্ট

আমি অতীতে এই স্টিকের ভুল প্রান্তটি পেয়েছি। আমি ভেবেছিলাম আপনি একবার স্তরটির জন্য রূপান্তরটি সংজ্ঞায়িত করতে পারেন, তারপরে পরবর্তী পরিবর্তনগুলি করতে পারেন এবং একটি 'ফ্রি' বিবর্ণ পেতে পারেন। দেখে মনে হচ্ছে আপনাকে প্রতিটি পরিবর্তনের সময় বিবর্ণ নির্দিষ্ট করতে হবে। সুতরাং - আপনি যদি প্রতিবার এই সংক্রমণকে কল করেন তবে এটি iOS9 এ আমার পরীক্ষায় ভাল কাজ করে।
বিভ্রান্ত ভোরলন

দয়া করে বিভ্রান্তিমূলক অপসারণ করুন তবে মনে হয় না যে এটি আর উপযুক্ত নয় বলে iOS9 এ কাজ করবে। ধন্যবাদ.
SwiftArchitect

134

সুইফট 4

কোনও ইউআইএলবেলকে বিবর্ণ করার উপযুক্ত উপায় (বা সেই বিষয়ে কোনও ইউআইভিউ) ব্যবহার করা Core Animation Transition। এটি ঝলকানি হবে না, বা লিখিত সামগ্রীটি অপরিবর্তিত থাকলে তা কালো হয়ে যাবে f

একটি পোর্টেবল এবং ক্লিন সলিউশন হ'ল Extensionসুইফটে একটি ব্যবহার করা (দৃশ্যমান উপাদানগুলির পরিবর্তনের আগে অনুরোধ করা)

// Usage: insert view.fadeTransition right before changing content


extension UIView {
    func fadeTransition(_ duration:CFTimeInterval) {
        let animation = CATransition()
        animation.timingFunction = CAMediaTimingFunction(name:
            CAMediaTimingFunctionName.easeInEaseOut)
        animation.type = CATransitionType.fade
        animation.duration = duration
        layer.add(animation, forKey: CATransitionType.fade.rawValue)
    }
}

অনুরোধটি দেখতে এরকম দেখাচ্ছে:

// This will fade
aLabel.fadeTransition(0.4)
aLabel.text = "text"

ফাঁকা, তারপরে 1 থেকে 5 বিবর্ণ রূপান্তর


It গিটহাবের এই সমাধান এবং সুইফ্ট রেসিপিগুলির অতিরিক্ত বিশদটি সন্ধান করুন ।


1
হ্যালো আমি আপনার প্রকল্পটি আপনার কোডটি ব্যবহার করেছি, ভেবেছিলাম আপনার আগ্রহী হতে পারে: github.com/goktugyil/CozyLoadingActivity
Esqarrouth

ভাল - আপনি যদি এমআইটি লাইসেন্স (একই লাইসেন্সের আইনজীবী-টক সংস্করণ) ব্যবহার করতে পারতেন তবে এটি বাণিজ্যিক অ্যাপ্লিকেশনগুলিতে ব্যবহার করা যেতে পারে ...
সুইফটআর্কিটেক্ট

আমি লাইসেন্স স্টাফ সম্পর্কে সত্যিই বুঝতে পারি না। লোকেরা এখন বাণিজ্যিক অ্যাপগুলিতে এটি ব্যবহার করতে বাধা দেয় কি?
এসকারুথ

2
অনেক সংস্থা স্ট্যান্ডার্ড লাইসেন্স ব্যবহার করতে পারে না যদি না ওপেনসোর্স.আর / লাইসেন্সগুলিতে তালিকাভুক্ত হয় এবং কিছু কেবল ওপেনসোর্স.আর / লিকেন্স / এমআইটি মেনে কোকোপডগুলিকে অন্তর্ভুক্ত করে । এই MITলাইসেন্সটি গ্যারান্টি দেয় যে আপনার কোকোপোড সবাই এবং যে কেউ অবাধে ব্যবহার করতে পারবেন।
সুইফট আর্কিটেক্ট

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

20

iOS4 যেহেতু এটি ব্লক দিয়ে স্পষ্টতই করা যেতে পারে:

[UIView animateWithDuration:1.0
                 animations:^{
                     label.alpha = 0.0f;
                     label.text = newText;
                     label.alpha = 1.0f;
                 }];

11
ক্রস ফেইড রূপান্তর নয়।
সুইফট আরকিটেক্ট

17

এই কাজটি করার কোডটি এখানে।

[UIView beginAnimations:@"animateText" context:nil];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationDuration:1.0f];
[self.lbl setAlpha:0];
[self.lbl setText:@"New Text";
[self.lbl setAlpha:1];
[UIView commitAnimations];

3
এটি বিবর্ণ নয়। এটি ফেইড আউট, পুরোপুরি অদৃশ্য হয়ে যাবে এবং তারপরে বিবর্ণ।
সুইফট আরকিটেক্ট

18
দয়া করে আপনার ইউআইএলবেলগুলির নাম এলবিএল করবেন না
rigdonmr

5

UILabel এক্সটেনশন সমাধান S

extension UILabel{

  func animation(typing value:String,duration: Double){
    let characters = value.map { $0 }
    var index = 0
    Timer.scheduledTimer(withTimeInterval: duration, repeats: true, block: { [weak self] timer in
        if index < value.count {
            let char = characters[index]
            self?.text! += "\(char)"
            index += 1
        } else {
            timer.invalidate()
        }
    })
  }


  func textWithAnimation(text:String,duration:CFTimeInterval){
    fadeTransition(duration)
    self.text = text
  }

  //followed from @Chris and @winnie-ru
  func fadeTransition(_ duration:CFTimeInterval) {
    let animation = CATransition()
    animation.timingFunction = CAMediaTimingFunction(name:
        CAMediaTimingFunctionName.easeInEaseOut)
    animation.type = CATransitionType.fade
    animation.duration = duration
    layer.add(animation, forKey: CATransitionType.fade.rawValue)
  }

}

কেবল কল করা ফাংশন দ্বারা

uiLabel.textWithAnimation(text: "text you want to replace", duration: 0.2)

সব টিপস জন্য ধন্যবাদ বলছি। আশা করি এটি দীর্ঘমেয়াদে সহায়তা করবে


4

উপরের সুইফট আরকিটেক্টের সমাধানটির উত্স 4.2 সংস্করণ (দুর্দান্ত কাজ করে):

    // Usage: insert view.fadeTransition right before changing content    

extension UIView {

        func fadeTransition(_ duration:CFTimeInterval) {
            let animation = CATransition()
            animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
            animation.type = CATransitionType.fade
            animation.duration = duration
            layer.add(animation, forKey: CATransitionType.fade.rawValue)
        }
    }

আবাহন:

    // This will fade

aLabel.fadeTransition(0.4)
aLabel.text = "text"

3

সুইফট ২.০:

UIView.transitionWithView(self.view, duration: 1.0, options: UIViewAnimationOptions.TransitionCrossDissolve, animations: {
    self.sampleLabel.text = "Animation Fade1"
    }, completion: { (finished: Bool) -> () in
        self.sampleLabel.text = "Animation Fade - 34"
})

অথবা

UIView.animateWithDuration(0.2, animations: {
    self.sampleLabel.alpha = 1
}, completion: {
    (value: Bool) in
    self.sampleLabel.alpha = 0.2
})

1
প্রথমটি কাজ করে তবে দ্বিতীয়টি আমার অবধি নির্ধারিত ছাড়াই ঠিক এখনই সমাপ্তির কল করে। আর একটি সমস্যা হ'ল আমি প্রথম সমাধানটি অ্যানিমেট করার সময় কোনও বোতাম টিপতে পারি না।
এন্ডেভিড

পারস্পরিক ক্রিয়ার সময় চেতক অনুমতি দিতে, আমি এক বিকল্প, বিকল্প যোগ করেছে: [.TransitionCrossDissolve, .AllowUserInteraction]
endavid

সেল্ফ.ভিউ ব্যবহার করে প্রথম বিকল্পটিতে সম্পূর্ণ দর্শন পরিবর্তন করা হয়, এর অর্থ শুধুমাত্র ট্রানজিশনক্রসডিসলভ ব্যবহার করা যায়। পরিবর্তে কেবলমাত্র পাঠ্যটি স্থানান্তর করা ভাল: "ইউআইভিউ.ট্রান্সশনভিথভিউ (স্ব.সাম্পেল লেবেল, সময়কাল: 1.0 ..."। এছাড়াও আমার ক্ষেত্রে এটি "..., সমাপ্তি: শূন্য)" দিয়ে আরও ভাল কাজ করেছে।
ভিটালি

3

সুইফট 5 এর সাহায্যে আপনার UILabelক্রস দ্রবীভূত অ্যানিমেশন দিয়ে আপনার পাঠ্যের পরিবর্তনগুলিকে অ্যানিমেট করার জন্য আপনি নীচের দুটি প্লেগ্রাউন্ড কোডের নমুনাগুলির মধ্যে একটি চয়ন করতে পারেন ।


# 1। UIViewএর transition(with:duration:options:animations:completion:)ক্লাস পদ্ধতি ব্যবহার করা হচ্ছে

import UIKit
import PlaygroundSupport

class ViewController: UIViewController {

    let label = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()

        label.text = "Car"

        view.backgroundColor = .white
        view.addSubview(label)

        label.translatesAutoresizingMaskIntoConstraints = false
        label.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        label.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(toggle(_:)))
        view.addGestureRecognizer(tapGesture)
    }

    @objc func toggle(_ sender: UITapGestureRecognizer) {
        let animation = {
            self.label.text = self.label.text == "Car" ? "Plane" : "Car"
        }
        UIView.transition(with: label, duration: 2, options: .transitionCrossDissolve, animations: animation, completion: nil)
    }

}

let controller = ViewController()
PlaygroundPage.current.liveView = controller

# 2। ব্যবহার CATransitionএবং CALayerএর add(_:forKey:)পদ্ধতি

import UIKit
import PlaygroundSupport

class ViewController: UIViewController {

    let label = UILabel()
    let animation = CATransition()

    override func viewDidLoad() {
        super.viewDidLoad()

        label.text = "Car"

        animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
        // animation.type = CATransitionType.fade // default is fade
        animation.duration = 2

        view.backgroundColor = .white
        view.addSubview(label)

        label.translatesAutoresizingMaskIntoConstraints = false
        label.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        label.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(toggle(_:)))
        view.addGestureRecognizer(tapGesture)
    }

    @objc func toggle(_ sender: UITapGestureRecognizer) {
        label.layer.add(animation, forKey: nil) // The special key kCATransition is automatically used for transition animations
        label.text = label.text == "Car" ? "Plane" : "Car"
    }

}

let controller = ViewController()
PlaygroundPage.current.liveView = controller

উভয় অ্যানিমেশনগুলি কেবল ক্রসডিসলভের মতো কাজ করে। যাইহোক এই জাতীয় বর্ণনামূলক উত্তরের জন্য আপনাকে ধন্যবাদ।
যশ বেদী

2

সুইফট ৪.২ সমাধান (নতুন উত্তরগুলি সংকলনের জন্য answer.০ উত্তর গ্রহণ এবং আপডেট করা)

extension UIView {
    func fadeTransition(_ duration:CFTimeInterval) {
        let animation = CATransition()
        animation.timingFunction = CAMediaTimingFunction(name:
            CAMediaTimingFunctionName.easeInEaseOut)
        animation.type = CATransitionType.fade
        animation.duration = duration
        layer.add(animation, forKey: CATransitionType.fade.rawValue)
    }
}

func updateLabel() {
myLabel.fadeTransition(0.4)
myLabel.text = "Hello World"
}

2

সিস্টেমের ডিফল্ট মানগুলি 0.25 durationএবং .curveEaseInEaseOut এর জন্য timingFunctionঅ্যানিমেশন জুড়ে অবিচ্ছিন্নতার জন্য প্রায়শই পছন্দনীয় এবং বাদ দেওয়া যায়:

let animation = CATransition()
label.layer.add(animation, forKey: nil)
label.text = "New text"

যা এই লেখার মতোই:

let animation = CATransition()
animation.duration = 0.25
animation.timingFunction = .curveEaseInEaseOut
label.layer.add(animation, forKey: nil)
label.text = "New text"

1

এটি একটি সি # ইউআইভিউ এক্সটেনশন পদ্ধতি যা @ সুইফটআর্কিটেক্টের কোডের উপর ভিত্তি করে। যখন অটো বিন্যাস জড়িত থাকে এবং নিয়ন্ত্রণগুলির লেবেলের পাঠ্যের উপর নির্ভর করে স্থানান্তরিত হওয়া দরকার হয়, এই কলিং কোডটি লেবেলের সুপারভাইভটিকে লেবেলের পরিবর্তে রূপান্তর দর্শন হিসাবে ব্যবহার করে। আমি ক্রিয়াটির জন্য আরও লম্বা করে তুলতে ল্যাম্বডা এক্সপ্রেশন যুক্ত করেছি।

public static void FadeTransition( this UIView AView, double ADuration, Action AAction )
{
  CATransition transition = new CATransition();

  transition.Duration = ADuration;
  transition.TimingFunction = CAMediaTimingFunction.FromName( CAMediaTimingFunction.Linear );
  transition.Type = CATransition.TransitionFade;

  AView.Layer.AddAnimation( transition, transition.Type );
  AAction();
}

কলিং কোড:

  labelSuperview.FadeTransition( 0.5d, () =>
  {
    if ( condition )
      label.Text = "Value 1";
    else
      label.Text = "Value 2";
  } );

0

আপনি যদি Swiftদেরি করে এটি করতে চান তবে এটি ব্যবহার করে দেখুন:

delay(1.0) {
        UIView.transitionWithView(self.introLabel, duration: 0.25, options: [.TransitionCrossDissolve], animations: {
            self.yourLabel.text = "2"
            }, completion:  { finished in

                self.delay(1.0) {
                    UIView.transitionWithView(self.introLabel, duration: 0.25, options: [.TransitionCrossDissolve], animations: {
                        self.yourLabel.text = "1"
                        }, completion:  { finished in

                    })
                }

        })
    }

@ ম্যাট - https://stackoverflow.com/a/24318861/1982051 দ্বারা নির্মিত নিম্নলিখিত ফাংশন ব্যবহার করে :

func delay(delay:Double, closure:()->()) {
    dispatch_after(
        dispatch_time(
            DISPATCH_TIME_NOW,
            Int64(delay * Double(NSEC_PER_SEC))
        ),
        dispatch_get_main_queue(), closure)
}

যা এটি সুইফটে 3 তে পরিণত হবে

func delay(_ delay:Double, closure:()->()) {
    let when = DispatchTime.now() + delay
    DispatchQueue.main.after(when: when, execute: closure)
}

0

এটি অর্জনের জন্য আরও একটি সমাধান রয়েছে। এটি এখানে বর্ণিত ছিল । ধারণাটি নিম্নলিখিত উপায়ে সাবক্লাসিং UILabelএবং ওভাররাইডিং action(for:forKey:)ফাংশন:

class LabelWithAnimatedText: UILabel {
    override var text: String? {
        didSet {
            self.layer.setValue(self.text, forKey: "text")
        }
    }

    override func action(for layer: CALayer, forKey event: String) -> CAAction? {
        if event == "text" {
            if let action = self.action(for: layer, forKey: "backgroundColor") as? CAAnimation {
                let transition = CATransition()
                transition.type = kCATransitionFade

                //CAMediatiming attributes
                transition.beginTime = action.beginTime
                transition.duration = action.duration
                transition.speed = action.speed
                transition.timeOffset = action.timeOffset
                transition.repeatCount = action.repeatCount
                transition.repeatDuration = action.repeatDuration
                transition.autoreverses = action.autoreverses
                transition.fillMode = action.fillMode

                //CAAnimation attributes
                transition.timingFunction = action.timingFunction
                transition.delegate = action.delegate

                return transition
            }
        }
        return super.action(for: layer, forKey: event)
    }
}

ব্যবহারের উদাহরণ:

// do not forget to set the "Custom Class" IB-property to "LabelWithAnimatedText"
// @IBOutlet weak var myLabel: LabelWithAnimatedText!
// ...

UIView.animate(withDuration: 0.5) {
    myLabel.text = "I am animated!"
}
myLabel.text = "I am not animated!"
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.