Welcome to the fourth SwiftUI Animation Challenge where we hand out animation challenges that everyone can participate in and solve.
This week's challenge is all about the Dynamic Island that was recently announced for the iPhone 14 Pro and Pro Max. Here is the link to the announcement video for the challenge.
It is NOT necessary to use the real API, you can just create any fun animation that you like. We found a few nice implementations for you to have a look at and get inspired by:
- Loading Spinner coming out of the Dynamic Island
- Cat reaching out of the Dynamic Island
- Apollo app the has a cute animal hanging out around the Dynamic Island
- API documentation for the Dynamic Island (not necessary to use this)
- Human Interface Guidelines from Apple for Dynamic Island
You can submit your video for this challenge. Submissions are done in form of Pull Requests (PRs) to this repository (Not sure how to do that? We got you covered!). Create a folder with your project inside and give that folder a clear name (e.g. your name, so that we know whose solution it was).
We want to emphasize again, that in order for us to discuss your solution and for others to learn from it, it is important that you submit the code for your project together with an optional sample video. This project is intended to be a learning resource for the community, so this is integral to it. ❤️
When the deadline is there, Stefan and Amos will not only discuss the solutions by the community, but also reveal their solutions to the problem and give a walkthrough.
Great question! We are both passionate about animations, SwiftUI, and the community. It's always fun to exchange ideas on how to solve certain challenges and if we can profit from each other's solutions it's a win-win-situation for everybody.
We benefit because we learn cool new tricks and solutions from the community and hope to give back the same. The community comes together and learns cool techniques how to improve their apps. Which even benefits end-users with better UX. See, it's great for all the people! :)
If you already have a strategy to start and solve the challenge, then go ahead. This is more aimed at people who are not that experienced with building up something like this. It an be overwhelming at the beginning, which is why we recommend to first by looking at the video itself and playing it over and over again. Until you really understand what is going on in the animation. Then, try to figure out the UI elements that are part of the animation. When you have those you can start building up a basic UI in SwiftUI and are over that initial hurdle of starting.
What we then recommend you to do is to try to figure out how the elements behave themselves and how they (maybe) interact with each other. This way you might find a way to start with the basic animations that take place and can finetune from there.
If you get stuck at any point always feel free to tweet at Stefan and/or Amos. We're always happy to chat and help you when you are stuck or have questions. Good luck in the challenge!