-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Rounded Corners #1795
Merged
Merged
Add Rounded Corners #1795
Changes from 9 commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
1401d63
Add RoundCorners and RoundCorners Node
johnny-duo dc41e2a
Add support for parsing rounded corners
johnny-duo 52b1f4e
Add Rounded Corners algorithm with bug
johnny-duo 6b49f10
Safety check
johnny-duo 212f8b0
Add extra support for closed paths
johnny-duo 4a46aee
Add comments
johnny-duo 79fe294
Add test and reformat
johnny-duo 6386e7b
Add Tests
johnny-duo 46a57bc
Merge branch 'master' into master
johnny-duo 5a3c06f
Update Snapshot Tests
johnny-duo 6a80de7
Merge branch 'master' of https://github.com/johnny-duo/lottie-ios
johnny-duo 20a190e
Switch order
johnny-duo 4d09483
Forgot Comma
johnny-duo 490552c
import necessary libraries
johnny-duo File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
81 changes: 81 additions & 0 deletions
81
Sources/Private/MainThread/NodeRenderSystem/Nodes/ModifierNodes/RoundedCornersNode.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| // | ||
| // RoundedCornersNode.swift | ||
| // Lottie | ||
| // | ||
| // Created by Duolingo on 10/31/22. | ||
| // | ||
|
|
||
| import Foundation | ||
| import QuartzCore | ||
|
|
||
| // MARK: - RoundedCornersProperties | ||
|
|
||
| final class RoundedCornersProperties: NodePropertyMap, KeypathSearchable { | ||
|
|
||
| // MARK: Lifecycle | ||
|
|
||
| init(roundedCorners: RoundedCorners) { | ||
| keypathName = roundedCorners.name | ||
| radius = NodeProperty(provider: KeyframeInterpolator(keyframes: roundedCorners.radius.keyframes)) | ||
| keypathProperties = ["Radius" : radius] | ||
| properties = Array(keypathProperties.values) | ||
| } | ||
|
|
||
| // MARK: Internal | ||
|
|
||
| let keypathProperties: [String: AnyNodeProperty] | ||
| let properties: [AnyNodeProperty] | ||
| let keypathName: String | ||
|
|
||
| let radius: NodeProperty<LottieVector1D> | ||
| } | ||
|
|
||
| // MARK: - RoundedCornersNode | ||
|
|
||
| final class RoundedCornersNode: AnimatorNode { | ||
|
|
||
| // MARK: Lifecycle | ||
|
|
||
| init(parentNode: AnimatorNode?, roundedCorners: RoundedCorners, upstreamPaths: [PathOutputNode]) { | ||
| outputNode = PassThroughOutputNode(parent: parentNode?.outputNode) | ||
| self.parentNode = parentNode | ||
| properties = RoundedCornersProperties(roundedCorners: roundedCorners) | ||
| self.upstreamPaths = upstreamPaths | ||
| } | ||
|
|
||
| // MARK: Internal | ||
|
|
||
| let properties: RoundedCornersProperties | ||
|
|
||
| let parentNode: AnimatorNode? | ||
| let outputNode: NodeOutput | ||
| var hasLocalUpdates = false | ||
| var hasUpstreamUpdates = false | ||
| var lastUpdateFrame: CGFloat? = nil | ||
| var isEnabled = true | ||
|
|
||
| // MARK: Animator Node | ||
| var propertyMap: NodePropertyMap & KeypathSearchable { | ||
| properties | ||
| } | ||
|
|
||
| func forceUpstreamOutputUpdates() -> Bool { | ||
| hasLocalUpdates || hasUpstreamUpdates | ||
| } | ||
|
|
||
| func rebuildOutputs(frame: CGFloat) { | ||
| for pathContainer in upstreamPaths { | ||
| let pathObjects = pathContainer.removePaths(updateFrame: frame) | ||
| for path in pathObjects { | ||
| pathContainer.appendPath( | ||
| path.roundCorners( | ||
| radius: properties.radius.value.cgFloatValue), | ||
| updateFrame: frame) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // MARK: Fileprivate | ||
|
|
||
| fileprivate let upstreamPaths: [PathOutputNode] | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| // | ||
| // RoundedCorners.swift | ||
| // Lottie | ||
| // | ||
| // Created by Duolingo on 10/31/22. | ||
| // | ||
|
|
||
| import Foundation | ||
|
|
||
| // MARK: - RoundedCorners | ||
|
|
||
| final class RoundedCorners: ShapeItem { | ||
|
|
||
| // MARK: Lifecycle | ||
|
|
||
| required init(from decoder: Decoder) throws { | ||
| let container = try decoder.container(keyedBy: RoundedCorners.CodingKeys.self) | ||
| radius = try | ||
| container.decode( | ||
| KeyframeGroup<LottieVector1D>.self, | ||
| forKey: .radius) | ||
| try super.init(from: decoder) | ||
| } | ||
|
|
||
| required init(dictionary: [String: Any]) throws { | ||
| let radiusDictionary: [String: Any] = try dictionary.value(for: CodingKeys.radius) | ||
| radius = try KeyframeGroup<LottieVector1D>(dictionary: radiusDictionary) | ||
| try super.init(dictionary: dictionary) | ||
| } | ||
|
|
||
| // MARK: Internal | ||
|
|
||
| /// The radius of rounded corners | ||
| let radius: KeyframeGroup<LottieVector1D> | ||
|
|
||
| override func encode(to encoder: Encoder) throws { | ||
| try super.encode(to: encoder) | ||
| var container = encoder.container(keyedBy: CodingKeys.self) | ||
| try container.encode(radius, forKey: .radius) | ||
| } | ||
|
|
||
| // MARK: Private | ||
|
|
||
| private enum CodingKeys: String, CodingKey { | ||
| case radius = "r" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You work at Duolingo? Cool!
I have a 1083 day streak learning Spanish 😄 Really love what Duolingo has been doing with Lottie lately -- cutting edge stuff. The new feature where the characters lip-sync with the text-to-speech synth honestly blew my mind. Is that using Lottie or some sort of custom lip sync renderer?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah! Glad you're enjoying that! I implemented that on iOS actually :D. We couldn't figure out a way to do that with Lottie so we ended up having to use a different more state-machine based animation Library
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So cool, awesome work! (Not surprised that isn't possible with Lottie)
Are you on Twitter? Would love to give you a follow if so -- I'm https://twitter.com/calstephens98
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't use it much for work-related stuff but gave you a follow!