{"action":"created","issue":{"url":"https://api.github.com/repos/koenbok/Framer/issues/378","repository_url":"https://api.github.com/repos/koenbok/Framer","labels_url":"https://api.github.com/repos/koenbok/Framer/issues/378/labels{/name}","comments_url":"https://api.github.com/repos/koenbok/Framer/issues/378/comments","events_url":"https://api.github.com/repos/koenbok/Framer/issues/378/events","html_url":"https://github.com/koenbok/Framer/issues/378","id":165514271,"number":378,"title":"Proposal: New Animation & States API","user":{"login":"nvh","id":248861,"avatar_url":"https://avatars.githubusercontent.com/u/248861?v=3","gravatar_id":"","url":"https://api.github.com/users/nvh","html_url":"https://github.com/nvh","followers_url":"https://api.github.com/users/nvh/followers","following_url":"https://api.github.com/users/nvh/following{/other_user}","gists_url":"https://api.github.com/users/nvh/gists{/gist_id}","starred_url":"https://api.github.com/users/nvh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nvh/subscriptions","organizations_url":"https://api.github.com/users/nvh/orgs","repos_url":"https://api.github.com/users/nvh/repos","events_url":"https://api.github.com/users/nvh/events{/privacy}","received_events_url":"https://api.github.com/users/nvh/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2016-07-14T09:12:03Z","updated_at":"2016-07-14T15:13:59Z","closed_at":null,"body":"We're changing the way animations are defined and how they interact with states. There are a couple of reasons for this:\r\n\r\n- There are two ways to animate a layer now: With `layer.states.switch` and `layer.animate`  , we would like to combine them\r\n- The current way of animating a layer directly needs the `properties:` keyword, which is confusing for beginners\r\n- It's not obvious how to specify animation options for state switches\r\n\r\nThis proposal tries to provide a solution for the above problems. please provide us with your feedback in the comments!\r\n\r\n# Basic animation of a layer\r\n\r\n## Just change a property\r\n\r\n```coffee\r\nlayer = new Layer\r\n\r\n## Before\r\n\r\nlayer.animate\r\n  properties:\r\n    x: 100\r\n\r\n## After\r\n\r\nlayer.animateTo\r\n  x: 100\r\n```\r\n\r\n## Change the animation timing\r\n\r\n```coffee\r\n## Before\r\n\r\nlayer.animate\r\n  properties:\r\n    x: 100\r\n  time: 0.5\r\n  \r\n## After\r\n\r\nlayer.animateTo\r\n  x: 100\r\n  options:\r\n    time: 0.5\r\n```\r\n\r\n## Change the animation curve\r\n\r\n```coffee\r\n## Before\r\n\r\nlayer.animate\r\n  properties:\r\n    x: 100\r\n  curve: \"spring(250, 50, 0)\"\r\n  \r\n## After\r\n\r\nlayer.animateTo\r\n  x: 100\r\n  options:\r\n    curve: spring(250, 50, 0) # Notice that the quotes are gone\r\n```\r\n\r\n# States\r\n\r\n## Add a single state\r\n\r\n```coffee\r\n## Before\r\n\r\nlayer.states.add\r\n  stateA:\r\n    x: 100\r\n\r\n## After\r\n\r\nlayer.states.stateA = \r\n  x: 100\r\n```\r\n\r\n## Add multiple states\r\n\r\n```coffee\r\n## Before\r\n\r\nlayer.states.add\r\n  stateB:\r\n    x: 200\r\n  stateC:\r\n    x: 400\r\n    \r\n## After\r\n\r\nlayer.states =\r\n  stateB:\r\n    x: 200\r\n  stateC:\r\n    x: 400\r\n```\r\n\r\n## Animate to state\r\n\r\n```coffee\r\n## Before\r\n\r\nlayer.states.switch \"stateA\"\r\n\r\n## After\r\n\r\nlayer.animateToState \"stateA\"\r\n```\r\n\r\n## Add animation options to a state change\r\n\r\n```coffee\r\n## Before\r\n\r\nlayer.states.add\r\n  stateE:\r\n    x: 200\r\n\r\nlayer.states.switch \"stateE\",\r\n  curve: \"ease-in\"\r\n    \r\n## After\r\n\r\nlayer.states.stateE =\r\n    x: 200\r\n    options:\r\n      curve: \"ease-in\"\r\n\r\nlayer.states.animateTo \"stateE\"\r\n\r\n```\r\n\r\n## Instantly switch to a state\r\n\r\n```coffee\r\n## Before\r\n\r\nlayer.states.switchInstant \"stateB\"\r\n\r\n## After\r\n\r\nlayer.switchToState \"stateB\"\r\n```\r\n\r\n# Move to the next state\r\n\r\n```coffee\r\n## Before\r\n\r\nlayer.states.next()\r\nlayer.states.next(\"stateB\",\"stateC\")\r\n\r\n## After\r\n\r\nlayer.animateToNextState()\r\nlayer.animateToNextState(\"stateB\",\"stateC\")\r\n```\r\n\r\n# Special states\r\n\r\nThere are three special states that will be set automatically and can't be overridden:\r\n\r\n- `layer.states.initial` - The state the layer had upon creation. This will contain the properties that are provided to the constructor, not ones that were set in a layer stage (i.e. with `layer.height = 100`)\r\n- `layer.states.previous` - The previous state the layer was in\r\n- `layer.states.current` - The current state the layer is in\r\n\r\nThese states contain the actual values and not (as is the case with `layer.states.current` now) the state string. The name of the previous an current states will still be available through `layer.states.previousName`  and `layer.states.currentName`.\r\n\r\nNotice the absence of `layer.states.next`, this functionality will be provided by `layer.animateToNextState()` as described above. \r\n\r\n# Details\r\n\r\nThe formal API of `layer.animateTo` and `layer.animateToState` will be:\r\n\r\n```coffee\r\nlayer.animateTo(properties,options)\r\n```\r\n\r\nHowever, by adding the options key to the properties object, you can take a shortcut that looks nicer in coffeescript:\r\n\r\n```coffee\r\nlayer.animateTo\r\n  x: 100\r\n  options:\r\n    curve: \"spring\"\r\n    delay: 1\r\n```\r\n\r\nThe same will work for `animateToState`, so animation options can be specified directly in the state:\r\n\r\n```coffee\r\nlayer.states.stateD = \r\n  y: 100\r\n  options:\r\n    delay: 1\r\n    time: 0.25\r\n    \r\nlayer.animateToState \"stateD\"\r\n\r\n## But could also be used like this:\r\n\r\nlayer.animateTo layer.states.stateD\r\n\r\n## When options are provided, they override the options of the state\r\n\r\nlayer.animateToState \"stateD\",\r\n  delay: 0 # Delay will be 0 and not 1\r\n```\r\n\r\n# Pitfalls\r\n\r\nCommon pitfalls we expect with the new approach, so we should have excellent documentation and (if possible) error messages for them:\r\n\r\n- Setting one of the preserved state names: `initial`, `previous`, or `current`\r\n- Using `animate` instead of `animateTo` or `animateToState`\r\n- Checking `layer.states.current` expecting a string\r\n"},"comment":{"url":"https://api.github.com/repos/koenbok/Framer/issues/comments/232695288","html_url":"https://github.com/koenbok/Framer/issues/378#issuecomment-232695288","issue_url":"https://api.github.com/repos/koenbok/Framer/issues/378","id":232695288,"user":{"login":"mrrocks","id":1820716,"avatar_url":"https://avatars.githubusercontent.com/u/1820716?v=3","gravatar_id":"","url":"https://api.github.com/users/mrrocks","html_url":"https://github.com/mrrocks","followers_url":"https://api.github.com/users/mrrocks/followers","following_url":"https://api.github.com/users/mrrocks/following{/other_user}","gists_url":"https://api.github.com/users/mrrocks/gists{/gist_id}","starred_url":"https://api.github.com/users/mrrocks/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mrrocks/subscriptions","organizations_url":"https://api.github.com/users/mrrocks/orgs","repos_url":"https://api.github.com/users/mrrocks/repos","events_url":"https://api.github.com/users/mrrocks/events{/privacy}","received_events_url":"https://api.github.com/users/mrrocks/received_events","type":"User","site_admin":false},"created_at":"2016-07-14T15:13:59Z","updated_at":"2016-07-14T15:13:59Z","body":"Another suggestions, do we really need the key \"options\"?\r\n\r\n```coffeescript\r\nlayer.animateTo\r\n\tx: 10\r\n\toptions:\r\n\t\tcurve: \"ease\"\r\n\r\n#VS\r\n\r\nlayer.animateTo\r\n\tx: 10\r\n\tcurve: \"ease\"\r\n```"}}
{"actor":{"display_login":"mrrocks"}}