Make sure easing curves and shadows are on-spec

[jelbourn]

Current easing curves and shadows are pulled from Angular 1 version. We need to double check that these reflect the current state of the spec.

[bakgat]

In _shadows.scss this link is provided as documentation for shadows
http://google.com/design/spec/what-is-material/objects-in-3d-space.html

In the new spec the link should be http://www.google.com/design/spec/what-is-material/elevation-shadows.html

I think there are differences in shadows.
eg For raised buttons it states 2dp elevation, 8dp on active.

[traviskaufman]

mdElevation Design Doc: https://docs.google.com/document/d/1W3NGSLqDZzjbBBLW2C6y_6NUxtvdZAVaJvg58LY3Q0E/edit?usp=sharing

[jelbourn]

Done for elevation.
@traviskaufman did you have any feedback on easing curves, or should we be able to grab what we need from the spec?

[jelbourn]

@mmalerba the task here is to make sure all the timings and curves we're using are on-spec and shared between components. This is a lower-priority item for beta.

[mmalerba]

Sorry, didn't mean to close this. Interesting part of the spec related to animations is dynamic durations: https://material.googleplex.com/motion/duration-easing.html#duration-easing-dynamic-durations (the idea that the duration changes based on the size of your device). Is this something we want to include in our implementation?

[jelbourn]

I hadn't seen that before. I'd consider that a "nice-to-have" for now, something we can refine later.

[mmalerba]

pr for shadows: #1857

still need to do animations

[thw0rted]

Hello from the future! I don't know if anybody is still subscribed, but I came here to find out how material2 handles changing its animation timing based on device type (as the spec requires) -- looks like maybe the answer at this time is that you don't?

Should I open a new ticket to bring timing in line with the spec or would it be better to reopen this one? I am still trying to figure out how to actually decide what timing to use in my own animations. Best I have right now is:

• if touch isn't supported, use desktop timing (150-200ms)
• otherwise, find the smaller of window.screen.height or window.screen.width and divide by window.devicePixelRatio to get an approximate DP size
• Compare DP size to an arbitrary cutoff (say, 6 in * 96 DP/in) to decide if we use phone timings (~300ms) or tablet timings (~390ms).

It's far from perfect but I don't know if we can get any better information to make the decision.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}