ios - একটি গণনা অগ্রগতি সূচক কীভাবে কাউন্ট ডাউন টাইমার তৈরি করতে হয়




swift animation (2)

আপনি এটি CAShapeLayer ব্যবহার করে এবং স্ট্রোকের শেষটিকে অ্যানিমেশন হিসাবে অনুসরণ করতে পারেন:

এক্সকোড 9 • সুইফট 4 আপডেট করুন

বাম সময় নির্ধারণ করুন

let timeLeftShapeLayer = CAShapeLayer()
let bgShapeLayer = CAShapeLayer()
var timeLeft: TimeInterval = 60
var endTime: Date?
var timeLabel =  UILabel()
var timer = Timer()
// here you create your basic animation object to animate the strokeEnd
let strokeIt = CABasicAnimation(keyPath: "strokeEnd")

ডি ইউআইবেজারপথ তৈরি করতে একটি পদ্ধতি নির্ধারণ করুন

-90˚ এ শেষআঙ্গেল এবং শেষ এঙ্গেল 270

func drawBgShape() {
    bgShapeLayer.path = UIBezierPath(arcCenter: CGPoint(x: view.frame.midX , y: view.frame.midY), radius:
        100, startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath
    bgShapeLayer.strokeColor = UIColor.white.cgColor
    bgShapeLayer.fillColor = UIColor.clear.cgColor
    bgShapeLayer.lineWidth = 15
    view.layer.addSublayer(bgShapeLayer)
}
func drawTimeLeftShape() {
    timeLeftShapeLayer.path = UIBezierPath(arcCenter: CGPoint(x: view.frame.midX , y: view.frame.midY), radius:
        100, startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath
    timeLeftShapeLayer.strokeColor = UIColor.red.cgColor
    timeLeftShapeLayer.fillColor = UIColor.clear.cgColor
    timeLeftShapeLayer.lineWidth = 15
    view.layer.addSublayer(timeLeftShapeLayer)
}

আপনার লেবেল যুক্ত করুন

func addTimeLabel() {
    timeLabel = UILabel(frame: CGRect(x: view.frame.midX-50 ,y: view.frame.midY-25, width: 100, height: 50))
    timeLabel.textAlignment = .center
    timeLabel.text = timeLeft.time
    view.addSubview(timeLabel)
}

ভিডডিয়োড-এ এন্ডটাইম সেট করুন এবং আপনার দৃশ্যে আপনার ক্যাশপ্লেয়ার যুক্ত করুন:

override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = UIColor(white: 0.94, alpha: 1.0)
    drawBgShape()
    drawTimeLeftShape()
    addTimeLabel()
    // here you define the fromValue, toValue and duration of your animation
    strokeIt.fromValue = 0
    strokeIt.toValue = 1
    strokeIt.duration = timeLeft
    // add the animation to your timeLeftShapeLayer
    timeLeftShapeLayer.add(strokeIt, forKey: nil)
    // define the future end time by adding the timeLeft to now Date()
    endTime = Date().addingTimeInterval(timeLeft)
    timer = Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: #selector(updateTime), userInfo: nil, repeats: true)
}

সময় আপডেট করার সময়

@objc func updateTime() {
    if timeLeft > 0 {
        timeLeft = endTime?.timeIntervalSinceNow ?? 0
        timeLabel.text = timeLeft.time
    } else {
        timeLabel.text = "00:00"
        timer.invalidate()
    }
}

আপনি এই এক্সটেনশনটি ডিগ্রিগুলিকে রেডিয়ানে রূপান্তর করতে এবং প্রদর্শনের সময় ব্যবহার করতে পারেন

extension TimeInterval {
    var time: String {
        return String(format:"%02d:%02d", Int(self/60),  Int(ceil(truncatingRemainder(dividingBy: 60))) )
    }
}
extension Int {
    var degreesToRadians : CGFloat {
        return CGFloat(self) * .pi / 180
    }
}

নমুনা প্রকল্প

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

প্রথমদিকে কাউন্টডাউনের প্রতিটি অর্ধেক সেকেন্ডের জন্য আমি একটি পৃথক চিত্রযুক্ত একটি চিত্র তৈরি করেছি তবে এটি চালাতে অনেক বেশি মেমরি নিয়েছে এবং তাই অ্যাপটি ক্র্যাশ করেছে তাই আমাকে এখন একটি বিকল্প খুঁজে বের করতে হবে।

আমি এখানে বর্ণের দিকে নজর দিচ্ছি https://developer.apple.com/library/prerelease/ios/documentation/GraphicsAnimation/Conceptual/SpriteKit_PG/Sprites/Sprites.html#//apple_ref/doc/uid/TP40013043-CH9 তবে স্প্রাইটের কোনও অংশকে রঙিন করার উপায় দেখতে পাচ্ছে না, মনে হচ্ছে পুরো স্প্রাইটটি পরিবর্তিত হয়ে গেছে।

রঙিন করা এখানে কোনও বিকল্প হবে কিনা তা কি কেউ জানেন না, বা কোনও চিত্র অ্যাটলাস দ্বারা ব্যবহৃত স্মৃতি হ্রাস করার কোনও উপায় আছে?

ধন্যবাদ


কোড এবং উত্তর দুর্দান্ত টুকরা! কেবল ভেবেছিলাম আমি নিম্নলিখিতগুলি প্রস্তাব করব। আমি সময়টি 1:00 হিসাবে দেখছিলাম এবং তার পরে 0:60 যা আমি মনে করি কোডের "সিল" অংশের কারণে হতে পারে।

আমি এটিকে নীচে পরিবর্তন করেছি (ly০ এরও কম সময়ও আলাদাভাবে দেখানোর জন্য চাইছি) এবং মনে হচ্ছে এটি সময়ের ওভারল্যাপটিকে সরিয়ে ফেলেছে।

এটি মূল্যবান জন্য ...

extension NSTimeInterval {
    var time:String {
        if self < 60 {
            return String(format: "%02d", Int(floor(self%60)))
        } else
        {
            return String(format: "%01d:%02d", Int(self/60), Int(floor(self%60)))
        }
    }
}




sprite-kit