Giter VIP home page Giter VIP logo

animateitall's Introduction

AnimateItAll

Purpose

A simple iOS app to demonstrate how to do some different types of animations to add some spice to an app!

It was prepared by Justin Stanley to present at the Learn Swift Winnipeg meetup Wed, Nov 15, 2017.

Consideration

It would make sense to create an object that handles performing the animations when dealing with the new UIViewPropertyAnimator API. For the purpose of this demo, this all exists within the ViewController itself.

Appearance Animations

These animations happen when the first tab appears. You can tap on the Reset tab and return to the Animations tab and it will perform the appearance animations again.

  • The background colour animates continuously between teal and yellow
  • The 'Welcome to' label flies in from the left
  • The 'WINNIPEG' label appears and flips into view
  • The first image flies in from the right
  • The second image pops in in place, with some spring in its step

Action-Based Animations

WINNIPEG Label

  • Tap on WINNIPEG to make it animate it's text colour change between white and black.
  • This demonstrates using the UIView.transition method to do what otherwise requires diving into Core Animation. Using the UIView.animate method will not animate the colour change.

Image #1

  • Tap on the image of Winnipeg's Canadian Museum for Human Rights.
    • This uses the standard UIView.animate API.
    • The background dims and the image moves to the centre of the screen and becomes full width.
    • Tap when expanded and it moves back.

Image #2

Option #1

  • Tap on the image of Winnipeg's SkipTheDishes
    • Uses the newer UIViewPropertyAnimator API.
    • The background dims, the image moves to the centre of the screen, its aspect ratio changes from square to 3:2, its rounded corners go back to squared, and becomes full width.
    • Tap when expanded and it moves back.

Option #2

  • Long-press on the SkipTheDishes image
    • Uses the newer UIViewPropertyAnimator API.
    • The thumbnail slowly grows to 1.1x it's normal size, kind of like how iOS mimics 3D touching on a non-3D Touch device.
    • Once it reaches 1.1x its size, it performs the same animation as Option #1 did, popping open.
    • Tap when expanded and it moves back like in Option #1 (it does not respond to long-press the same way it does when not expanded)

Resources

Animate with UIViewPropertyAnimator

Introduced in iOS 10.

A class that animates changes to views and allows the dynamic modification of those animations.

See Apple's official documentation for UIViewPropertyAnimator.

Animate with UIView's animate & transition Methods

Introduced in iOS 4.

Apple notes this in its documentation:

Use of these methods is discouraged. Use the UIViewPropertyAnimator class to perform animations instead.

See Apple's official documentation for some of the more commonly used methods, such as the animate method, without spring animations, the animate method, with spring animations, and the transition method.

About the Presenter/Developer

Justin works at SkipTheDishes as a full time React Native/JavaScript mobile developer (recently switched from Swift to React Native). He also designed and created an app called BB Links, which is used by over 21,000 monthly active Beachbody coaches and has over 1,000 ratings averaging 4.9 stars.

animateitall's People

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.