0

I'm trying to animate a strike through animate. The only help I could find was this UIFont: how to animate strikethrough and match font style? but its Objective-C I'm trying for a result something like this https://dribbble.com/shots/3167358-Microinteractions-for-to-do-list-app. But can't figure out how to animate the strikethrough.

 guard let postsText = post?.post else { return }

        let attributeString: NSMutableAttributedString =  NSMutableAttributedString(string: postsText)
        attributeString.addAttribute(NSAttributedString.Key.strikethroughStyle, value: 1, range: NSMakeRange(0, attributeString.length))
        postLabel.attributedText = attributeString
user
  • 345
  • 2
  • 8
  • 32

2 Answers2

2

I've created a library that creates this effect using Bezier Path, animating the strikethrough. You can find the code here:

https://github.com/chrsp/StrikethroughLabel

For the record, this class shows how you can do that:

https://github.com/chrsp/StrikethroughLabel/blob/master/StrikethroughLabel/StrikethroughLabel.swift

chr0x
  • 1,151
  • 3
  • 15
  • 25
1
self.mylabel.attributedText = nil;
CATransition *transition = [CATransition new];
transition.delegate = self;
transition.type = kCATransitionFromLeft;
transition.duration = 2.0f;
self.mylabel.attributedText = strikeThroughText;
[self.mylabel.layer addAnimation:transition forKey:@"transition"];

So I am posting the original objective C code for reference. Really this is just a matter of translating the objective C code to Swift, which is possible because under the hood Swift can use the same core animation api that objective C can.

I used the apple docs for reference.

https://developer.apple.com/documentation/quartzcore/catransition

let transition = CATransition()
transition.type = CATransitionType.moveIn
transition.subtype = CATransitionSubtype.fromLeft
transition.duration = 2.0
label.attributedText = strikeThroughText
label.layer.add(transition, forKey: kCATransition)

This should achieve something like what what the objective C code in the other post does. You will likely have to modify it, but it should get you started on the correct path. I would play around with the different CATransitionType and see what can be achieved.

Sam Furlong
  • 106
  • 1
  • 6
  • One question, How can I make it only move the line and not the text its self? Is this possible? – user Jun 21 '19 at 01:23
  • For this, the best approach might be to draw the line on top of the label... I will leave that implementation to you. There is a stack overflow post about drawing lines that you can use to get you started. https://stackoverflow.com/questions/42978418/draw-line-animated – Sam Furlong Jun 21 '19 at 17:39