The Focus – Fastest way for memorization of foreign words

I’ve been practicing my skills in animations and wrote an app for words memorization. It based on Flashcards methodology for learning new information. Flashcards are not limited to only language learning, but in this app I use it for this purpose only.

I started an app as little brother of another ALSEDI Group app – CardsOnGo. It has much more functions, for example – unlimited decks, auto translation, numerous professional dictionaries and more. My perception of the app now is that is for professional language learners.

I thought about something much simpler, that I can use when I cycling, or commute at morning or evening. I ended up with one deck, voice synthesizer (Siri) and massive use of animations to make learning more attractive.

App controlled by the following gestures:

  • Swipe to move between¬†cards. Left and Right, Forward or backward.
  • Long tap to show a backside of card and hide it when finger up. It was really annoying in the beginning to tap twice on each word to show and to hide the backside.
  • Single tap to show a backside permanently. Couple years ago Grig told me about this thing in CardsOnGo, but I never had a time to implement it there.

Here is the result:

There are three different animations:

  • Onboarding screen. Idea is the same as in City Guides by National Geographic. I added parallax for images to improve perceptions of the animation. I really enjoying this:

I used tutorial written by Yari D’areglia: Creating custom walkthroughs for your apps. Actually, code behind is from his lib. I just fixed it a little bit and removed stuff that I do not need. Additionally, I wrote custom transition effect for scroll.

  • Swipe animation. That’s quite simple. It’s Spring animation for UILabel and auxiliary label that appears in the beginning of animation.

  • Expand and collapse animation. I was curious how animations work with auto layout. I was worrying that animation on complex constraints will cause side effects. I used align top and bottom constraints to position card area on the screen. If¬†back side should be shown then card area should expand automatically, but front and back side should stay in the middle of the screen.

I was ready to fix a lot of stuff and find a walkarounds, but… everything just works from the box. It required careful¬†work with constraints, but animations works perfectly, with this nice effect:

 

Well, I found it interesting, even (probably, “especially”) ¬†small app became much more attractive with animations. I used mostly¬†UIView animations and currently practicing CALayer animation. I haven’t done a lot yet, but it’s even more cool than UIView animations, because Layer animations gives much more power and more flexible in all meanings.

p.s. I’d like to have videos as GIFs, but I didn’t find a tool that works on my Mac and converts videos to GIF :(

Following to licenses and because I really appreciate the work that StockSnap.io and FlatIcon.com doing, I want to say both resources Thank you for the awesome images and icons that I was able to use in the app.

Leave a Reply

Your email address will not be published. Required fields are marked *