Giter Club home page Giter Club logo

material-motion-swift's Introduction

Material Motion

Reactive motion driven by Core Animation.

Swift 3.1.x iOS 9.0+ Build Status codecov CocoaPods Compatible Platform Docs

This library includes a variety of ready-to-use interactions. Interactions are registered to an instance of MotionRuntime:

// Store me for as long as the interactions should take effect.
let runtime = MotionRuntime(containerView: <#view#>)
InteractionSnippet
ArcMove
let arcMove = ArcMove()
arcMove.from.value = <#from#>
arcMove.to.value = <#to#>
runtime.add(arcMove, to: <#view#>)
ChangeDirection
runtime.add(ChangeDirection(withVelocityOf: gesture),
            to: <#direction#>)
DirectlyManipulable
runtime.add(DirectlyManipulable(), to: <#view#>)
Draggable
runtime.add(Draggable(), to: <#view#>)
Rotatable
runtime.add(Rotatable(), to: <#view#>)
Scalable
runtime.add(Scalable(), to: <#view#>)
SetPositionOnTap
runtime.add(SetPositionOnTap(),
            to: runtime.get(<#view#>.layer).position)
Spring
let spring = Spring()
spring.destination.value = <#initial destination#>
runtime.add(spring, to: <#view#>)
Tossable
let tossable = Tossable()
tossable.spring.destination.value = <#initial destination#>
runtime.add(tossable, to: <#view#>)
Tween
runtime.add(Tween(duration: 0.5, values: [1, 0]),
            to: runtime.get(<#view#>.layer).opacity)

Installation

Installation with CocoaPods

CocoaPods is a dependency manager for Objective-C and Swift libraries. CocoaPods automates the process of using third-party libraries in your projects. See the Getting Started guide for more information. You can install it with the following command:

gem install cocoapods

Add MaterialMotion to your Podfile:

pod 'MaterialMotion'

You will need to add use_frameworks! to your Podfile in order use Material Motion in your swift app.

A simple Podfile might look like so:

project 'MyApp/MyApp.xcodeproj'

use_frameworks!

target 'MyApp' do
  pod 'MaterialMotion'
end

Then run the following command:

pod install

Usage

Import the framework:

import MaterialMotion

You will now have access to all of the APIs.

Example apps/unit tests

Check out a local copy of the repo to access the Catalog application by running the following commands:

git clone https://github.com/material-motion/material-motion-swift.git
cd material-motion-swift
pod install
open MaterialMotion.xcworkspace

Case studies

Carousel

A carousel with pages that scale in and fade out in reaction to their scroll position.

View the source.

Contextual transition

A contextual view can be used to create continuity during transitions between view controllers. In this case study the selected photo is the contextual view. It's possible to flick the view to dismiss it using the tossable interaction.

Makes use of: Draggable, Tossable, Transition, TransitionSpring, Tween.

View the source.

Floating action button transition

A floating action button transition is a type of contextual transition that animates a mask outward from a floating button.

Makes use of: Transition and Tween.

View the source.

Material expansion

A Material Design transition using asymetric transformations.

Makes use of: Tween.

View the source.

Modal dialog

A modal dialog that's presented over the existing context and is dismissable using gestures.

Makes use of: Tossable and TransitionSpring.

View the source.

Pull down to dismiss

A modal scroll view controller that can be dismissed with a drag gesture.

Makes use of: Tossable and TransitionSpring.

View the source.

Sticker picker

Each sticker is individually directly manipulable, meaning they can be dragged, rotated, and scaled using multitouch gestures.

Makes use of: DirectlyManipulable.

View the source.

Contributing

We welcome contributions!

Check out our upcoming milestones.

Learn more about our team, our community, and our contributor essentials.

License

Licensed under the Apache 2.0 license. See LICENSE for details.

material-motion-swift's People

Contributors

jverkoey 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.