Giter Club home page Giter Club logo

material-motion-swift's Introduction

layout permalink
default
/

Material Motion

Welcome to the Material Motion documentation site. Please check out the Starmap for our engineering specification and our Team documentation to learn more about our culture.

Current status: early development.

Chat Chat with us on Discord.

Android platform support

Library Build status Coverage Version Docs Issues
conventions-android Build Status codecov Release Docs Open issues
gestures-android Build Status codecov Release Docs Open issues
indefinite-observable-android Build Status codecov Release Docs Open issues
material-motion-android Build Status codecov Release Docs Open issues
material-motion-rebound-android Build Status codecov Release Docs Open issues
physics-android Build Status codecov Release Docs Open issues

Apple platform support

Library Build status Coverage Version Platforms Docs Issues
conventions-objc Build Status codecov CocoaPods Compatible Platform Docs Open issues
indefinite-observable-swift Build Status codecov CocoaPods Compatible Platform Docs Open issues
material-motion-pop-swift Build Status codecov CocoaPods Compatible Platform Docs Open issues
material-motion-swift Build Status codecov CocoaPods Compatible Platform Docs Open issues

Web platform support

Library Build status Coverage Version Issues
indefinite-observable-js Build Status codecov Release Open issues
material-motion-js Build Status codecov Release Open issues

Misc libraries

Library Build status Coverage Version Issues
apidiff Build Status codecov Release Open issues
loopy Build Status codecov Release Open issues
material-motion Build Status codecov Release Open issues
milemarker Build Status codecov Release Open issues
starmap Build Status codecov Release Open issues
sublime Build Status codecov Release Open issues
tools Build Status codecov Release Open issues
tsc-reduction Build Status codecov Release Open issues

material-motion-swift's People

Contributors

appsforartists avatar jverkoey avatar randcode-generator avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

material-motion-swift's Issues

Writes to position won't propagate to positionX or positionY

This is because each of these is a distinct property instance. This can be confusing to the end user. The "hack" fix is to always use the same property and apply constraints on it instead, e.g. position.x() and position.y().

Ideally the positionX and positionY properties would react to changes to position.

Note that changes to positionX and positionY do propagate to position because they use externalWrite to adjust the position property.

Resolving this would probably be a matter of having property do an external write to positionX and positionY, so long as this didn't cause a retain cycle.

Javascript prototype for iOS

Goal: build a javascript bridge that can commit streams to a native MotionRuntime.

The bridge would ideally only be executed one time for a given director. E.g. a given transition might have a javascript bridge that can be used to drive the transition.

The javascript director will have a single mechanism for adding streams to a runtime, e.g. transition.runtime.write(to:)

Fix this build failure

let spring = Spring(to: 1, threshold: 0.1, system: coreAnimation)

Ambiguous reference to member 'coreAnimation(_:initialValue:)'

Solution is to cast:

let spring = Spring(to: CGFloat(1), threshold: 0.1, system: coreAnimation)

But we should support using literal numbers as well.

_map behaves oddly for additive Core Animation animation

It attempts to map the additive values, resulting in values that aren't compatible with the additive animation.

To resolve this we may need to store the pre-additive information in the animation channel and allow map to affect this. We can then calculate the additive information when the animation is committed to a layer.

Directly manipulable can't easily be added to a parent view and just affect the target view

Context: sticker picker case study.

The current case study registers directly manipulable to each sticker view directly. This ensures that each sticker view is individually manipulable, but doesn't allow you to pinch outside of a sticker in order to affect it.

Ideally it would be possible to register a single gesture recognizer set to the parent view and to only have them modify the top-most view at the centroid of the gestural interaction. This logic could be built into DirectlyManipulable as a feature with the following characteristics:

  1. Only one set of gesture recognizers is added to the parent view.
  2. The gesture recognizer delegate allows simultaneous recognition, as before.
  3. The gesture recognizer only begins if one of the target views is within the centroid of the gesture.
  4. Only the top-most target view is affected by the gesture.

Formalize slop as an interaction

It's currently an operator and requires use of runtime.connect. Ideally it would be an interaction with the relevant configurable properties, e.g. slop size.

Challenge here is building an interaction that supports n-dimensional slopping, e.g. vertical/horizontal slop or slop outside of a 2d region.

runtime.get may lead to unexpected behavior when working with subclasses

runtime.get is currently making use of function overloading to create and cache reactive versions of non-reactive objects. This will create problems when working with sub-types, such as CAShapeLayer, because now the sub-type has its own cache. Consider the following example:

let shapeLayer = CAShapeLayer()
let layer: CALayer = shapeLayer
let reactiveShapeLayer = runtime.get(shapeLayer)
let reactiveLayer = runtime.get(layer)
// reactiveShapeLayer !== reactiveLayer

Note that even though we're using the same shape layer instance, we get a different reacitve object instance depending on the type of the variable we pass to runtime.get. This will lead to unexpected behavior in practice and we should consider alternative solutions to this.

Add support for tracing data moving down a stream

Unclear what this API would look like, but ideally there'd be some way to turn:

let someStream = gesture.translation().xLocked(to: 20)

into

gesture => { ... } => translation() => {50, 20} => xLocked(to: 50) => {20, 20}

or something similar. This would be emitted in real time to the console.

Some possible approaches:

  • Create an operator that traces anything upstream of it. E.g. gesture.translation().xLocked(to: 20).trace()

Not easy to apply an impulse to make an object "bounce" with core animation

Consider the following interaction:

let spring = Spring<CGFloat>(threshold: 0.01, system: coreAnimation)
spring.initialVelocity.value = 10
spring.destination.value = 1
runtime.add(spring, to: runtime.get(square.layer).scale)

When using POP, this would behave as expected; the view would scale outward somewhat and eventually settle back at 1. This is because POP looks at the overall energy in the system to determine completeness.

When using Core Animation, however, this animation does nothing. This is because Core Animation thinks of velocity only relative to the distance to be traveled (in this case 0), so the animation ends up nooping.

I'm not sure whether there's a clear fix here, but I'll explore some hackfixes.

Make it easier to use Int types throughout

We may want to treat Int values as CGFloat types throughout material motion in order to ease use of simple constants, e.g. 0 or 1 without requiring need for explicit typing, e.g. CGFloat(0) or CGFloat(1).

Maintain consistency between ReactiveUIView's properties and its backing ReactiveCALayer's.

For example, if I write to a ReactiveUIView's backing ReactiveCALayer's position property the ReactiveUIView's center property should be updated as well (and vice versa).

A solution might be to use the layer's property directly if we can, and write a wrapper around it when it's not a 1:1 map:

public lazy var alpha: ReactiveProperty<CGFloat> = {
  return self.reactiveLayer.opacity
}()
public lazy var center: ReactiveProperty<CGPoint> = {
    let view = self.view
    let property = ReactiveProperty(initialValue: view.center,
                                    write: {
                                      // TODO: Adjust depending on anchor point
                                      self.reactiveLayer.position.value = $0
                                    }, coreAnimation: {event in
                                      self.reactiveLayer.position.coreAnimation(event) })
    let subscription = self.reactiveLayer.position.asStream().subscribe(next: { position in
      // TODO: Adjust depending on anchor point
      if position != property.value {
        property.value = position
      }
    }, state: { _ in }, coreAnimation: { _ in })
    self.subscriptions.append(subscription)
    return property
}()

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.