Repository for the first challenge of the SwiftUI Animation Challenges. Create the likeable now playing animation from the Spotify app.

Overview

Challenge 1

Welcome to the SwiftUI Animation Challenge where we hand out animation challenges that everyone can participate in and solve.

This week's challenge is inspired by the Spotify now playing animation in its macOS app:

🤔 How does it work?

You can submit your video for this challenge until Wednesday, July 27, 2022. 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).

When the deadline is there, Amos and Stefan will not only discuss the solutions by the community, but also reveal their solutions to the problem and give a walkthrough.

🤨 Why?

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! :)

🤠 How to get started?

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 Amos and/or Stefan. We're always happy to chat and help you when you are stuck or have questions. Good luck in the challenge!

Comments
  • Animation challenge - Josue

    Animation challenge - Josue

    https://user-images.githubusercontent.com/1470487/180671019-edff1041-2363-45d5-91f9-587b1d3d21d2.mp4

    In this folder ImagePreviews/JosueH-AnimationChallenge1 has all code

    opened by jghg02 3
  • Challenge submission by Chris Harper

    Challenge submission by Chris Harper

    My submission for the first challenge.

    It has the visualizer and the ability to change the color (as well as resetting it to Spotify's green). Also showcases a little remake of the List/Form views.

    https://user-images.githubusercontent.com/56522199/180358463-7a46b6f9-d98e-4876-ba45-763b6bec3642.mov

    opened by chrisharper22 3
  • Challenge Submission by Intout

    Challenge Submission by Intout

    It was very fun, looking forward for future challenges.

    https://user-images.githubusercontent.com/49282941/180263946-f5cbc833-bb7b-49d1-ab5d-6e5220268bbe.mov

    opened by Intout 3
  • Challenge submission by drucelweisse

    Challenge submission by drucelweisse

    Just tried to complete challenge, it was fun

    You can found screen recording in pr and also here

    https://user-images.githubusercontent.com/36012972/180179646-48bfe95c-785f-4ed5-a22c-1ef6f1cf4383.mov

    opened by drucelweisse 2
  • Challenge submission by Yogiraj . Done on android using kotlin

    Challenge submission by Yogiraj . Done on android using kotlin

    Hi, I have Implemented animation on android using Kotlin. I have developed a custom view and used canvas methods to implement it however the animation is not that smooth.

    https://user-images.githubusercontent.com/68183759/179385835-762f3b4a-dac3-48ba-89d0-549535b9b85e.mp4

    opened by yogirajthombre 2
  • Challenge submission by Radek Čep

    Challenge submission by Radek Čep

    This PR adds a solution for a simple Now Playing animation.

    https://user-images.githubusercontent.com/31346847/179068501-0edd08e9-ea76-4fe2-af13-0d87c6e95b6b.mov

    opened by radekcep 2
  • Submission by Intout

    Submission by Intout

    It was very fun, looking forward for future challenges.

    https://user-images.githubusercontent.com/49282941/180262861-dfd2054f-dd27-4aef-94cb-ff72915c160e.mov

    opened by Intout 0
Owner
null
Challenge-M2Y-TM4 - A challenge provided by Mobile2You, with the purpose of analyzing knowledge about UI, API consumption

Challenge-M2Y-TM4 Um desafio proporcionado pela Mobile2You, com proposito de ana

Felipe Brigagão de Almeida 0 Jan 31, 2022
TakeHomeChallenge - iOS Tech Challenge - Take Home Challenge

iOS Tech Challenge - Take Home Challenge Thank you for your interest in taking t

Michael 0 Feb 1, 2022
Example App for playing around with

BookStore ?? 한글 버전 See new releases and search for programming books from IT Bookstore API This is a sample app to practice using Result type, stubbin

Danny Gilbert 0 Nov 3, 2021
Full featured Spotify iOS Client written in Swift 5

Spotify Client (iOS - Swift 5 - 2021) Full featured Spotify like app written in Swift 5 with MVVM architecture. Features Official Spotify API Use Play

Anton Tuzov 3 Dec 8, 2022
The concept won first place in the Design Concept Award contest Season 1 in 2021.

TallyCounter Developed by Vladyslav Fil as part of the You are launched "Design Concept Award" contest Season #1. Tally Counter Micro-Interaction demo

You are launched 3 Dec 17, 2022
The concept won first place in the Design Concept Award contest Season 1 in 2021.

TallyCounter Developed by Vladyslav Fil as part of the You are launched "Design Concept Award" contest Season #1. Tally Counter Micro-Interaction demo

You are launched 3 Dec 17, 2022
The concept won first place in the Design Concept Award contest Season 2 in December 2021.

SwiftUI-ChristmasGift Developed by Alex Kryvodub as part of the You are launched "Design Concept Award" contest Season #2. ChristmasGift demo. alex.mp

You are launched 5 Jan 12, 2022
Challenge-swiftui-space - Project for SwiftUI Dev Sprints on Devpass

SwiftUI Challenge - Space App ?? Neste desafio, desenvolveremos a interface de u

Devpass 7 Dec 27, 2022
Working through Challenge: SwiftUI science fiction! 🖖🏻

Challenge: SwiftUI science fiction! ????

An Trinh 27 Sep 27, 2022
Birthdays App Challenge set by Chalkboard

Chalkboard Birthdays App Challange This is an app that utilises a web api to provide the user an ordered list of birthdays youngest to oldest How to i

Rob Copping 0 Nov 25, 2021
Code challenge iOS - Movies app

Code challenge iOS - Movies app Project structure The Common folder contains sha

Danny Narvaez 0 Dec 21, 2021
Tests Challenge - Finance App

Tests Challenge - Finance App ?? No Desafio Testes, temos apenas tarefas de implementação de testes em uma aplicação iOS. Nosso objetivo é implementar

Devpass 11 Nov 16, 2022
A repository of example plugins for Delta Client

Example Plugins for Delta Client This repository contains a few example plugins to help developers get a practical understanding of how to use the plu

null 0 Oct 30, 2021
A repository for training iOS programming and UI patterns.

iOS Swift Training This repository will be used for training iOS programming using Swift and UI patterns. Some examples may be simple, but they are us

Guilherme Daniel Fernandes da Silva 0 Nov 25, 2021
[Accepted] My WWDC21 Swift Student Challenge submission

My WWDC21 Swift Student Challenge submission I made a playground book that teaches you the basics of ARKit through interactive lessons. It covers posi

Zheng 25 Nov 12, 2022
WWDC2020 Swift Student Challenge - TheHackOfRayTracing playground book

wwdc2021 My wwdc2021 submission The HackOf RayTracing How to run Install swift playground from App Store on your Mac or iPad Double clik TheHackOfRayT

haoboxuxu 20 May 20, 2022
[Accepted] My WWDC2021 Swift Student Challenge submission chosen as one of the 350 winners!

Genetic Algorithms | WWDC21 This project was entirely built with SwiftUI. To direct download this Playground and run it on your Mac or IPad, click he

Fred Lacis 2 Dec 22, 2021
My Winning Submission for Apple's WWDC 2021 Swift Student Challenge

Symmetries This playground book gives a quick insight into the symmetry groups of 3-dimensional objects like the platonic solids. The user can play ar

David 4 Apr 23, 2022
🎉 WWDC 2021 Swift Student Challenge Winner 🎉 Dance Party allows users to record choreography and play against other users to try and match the key poses!

?? Dance Party ?? ?? WWDC 2021 Swift Student Challenge Winner ?? Installation Steps (Works on iPad Only) Clone or Download Unzip the .playgroundbook.z

Alan Yan 7 Oct 17, 2022