Snippet: SnapKit & RxSwift, some animations

Snippet: Swift UILabel, letter by letter animation

Original Post : weareopensource.me (only the original post is updated)

Here is a code snippet to animate a UILabel display as if you were typing text on the keyboard, letter by letter. It is a swift extension to be used by simply call as a function.

I also advise you for this kind of thing to create a file by extension, UILabel.swift, UIImage.swift …. as we started to do in the swift stack.

extension UILabel {
    /**
    * @desc anime text like if someone write it
    * @param {String} text,
    * @param {TimeInterval} characterDelay,
    */
    func animate(newText: String, interval: TimeInterval = 0.07, lineSpacing: CGFloat = 1.2, letterSpacing: CGFloat = 1.1) {
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.lineSpacing = 1.2
        paragraphStyle.lineHeightMultiple = 1.2
        paragraphStyle.alignment = .center
        var pause: TimeInterval = 0
        self.text = ""
        var charIndex = 0.0
        for letter in newText {
            Timer.scheduledTimer(withTimeInterval: interval * charIndex + pause, repeats: false) { (_) in
                self.text?.append(letter)
                let attributedString = NSMutableAttributedString(string: self.text ?? "")
                attributedString.addAttribute(NSAttributedString.Key.paragraphStyle, value: paragraphStyle, range: NSRange(location: 0, length: attributedString.length))
                attributedString.addAttribute(NSAttributedString.Key.kern, value: letterSpacing, range: NSRange(location: 0, length: attributedString.length - 1))
                self.attributedText = attributedString
            }
            charIndex += 1
            if(letter == "," || letter == ".") {
                pause += 0.5
            }
        }    }
}

After a rush of code lately, I will be able to resume writing more regularly on the blog. I will try to share a lot of Snippets of this style, always useful to give a little more life to a project, but also compatible with our stacks.

Snippet: Swift SnapKit & RxSwift animation

Original Post : weareopensource.me (only the original post is updated)

Here is a code snippet of a sample animation with RxSwift and Snapkit. It is not that complicated but with all the updates on the subject, it is interesting to summarize the current state.

As a reminder:

• RxSwift: Rx is a generic abstraction of computation expressed through Observable interface. This is a Swift version of Rx.
• Snapkit: SnapKit is a DSL to make Auto Layout easy on both iOS and OS X.

We will see how to simply move an object f from point A to point B. Simple of course, but sufficient to animate a logo for example :). We’ll assume that you already know how to use rxSwift. This example is based on our Stack Swift.

1/ Define the element

// we user Then.swift for easy declaration
let logo1 = UIImageView().then {
    $0.contentMode = .scaleAspectFit
    $0.alpha = 1
    $0.UIImage(named: "logo1")
}
// edited constraint
var rightLogo1: Constraint?

2/ Add it

override func viewDidLoad() {
    super.viewDidLoad()
    self.logo1.image = UIImage(named: "logo1")
}

3/ Define these constraints

// called once during override updateViewConstraints
override func setupConstraints() {
    self.width = self.view.frame.width
    // logo
    self.logo1.snp.makeConstraints { make in
        make.top.equalTo(self.view).inset(40)
        make.width.height.equalTo(width/3)
        // save start constraint status
        self.rightLogo1 = make.centerX.equalTo(self.view).offset(width).constraint
}

4/ Animate when your state is ready (for example)

func bindState(_ reactor: OnboardingReactor) {
    reactor.state
        .debounce(.milliseconds(1000), scheduler: MainScheduler.instance)
        .take(1)
        .subscribe(onNext: { _ in
            self.rightLogo1?.update(offset: 0)
            UIView.animate(withDuration: 0.75, animations: { self.view.layoutIfNeeded() }, completion: nil)
        })
        .disposed(by: self.disposeBag)
}

That’s it 🚀 !

Snippet: Swift infinite image rotation

Original Post : weareopensource.me (only the original post is updated)

This snippet will be the last in our series on Swift animations for now. We will see how to set up the infinite image rotation, we use it for a starry background 😊.

Previous articles were:

Snippet: Swift UILabel, letter animation

Snippet: Swift SnapKit & RxSwift animation

Image

let stars = UIImageView().then {
        $0.contentMode = .scaleToFill
        $0.alpha = 1
        $0.image = UIImage(named: "stars")
        $0.alpha = 0.4
    }

Rotation

private func rotateImageView() {
        UIView.animate(withDuration: 240, delay: 0, options: UIView.AnimationOptions.curveLinear, animations: { () -> Void in
            self.stars.transform = self.stars.transform.rotated(by: .pi / 2)
        }) { (finished) -> Void in
            if finished {
                self.rotateImageView()
            }
        }
    }

Launch

override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        rotateImageView()
    }

Perfect 👏

Links

weareopensource.me | Slack | Waos Discord | My Mail | My Github | My Twitter | My Youtube | My Linkedin

Feel free to help us ! :)