https://github.com/athanclark/elm-duration

Issue actions every browser refresh frame, in accordance to some easing function, over a specified time duration.
https://github.com/athanclark/elm-duration

browser-frame duration easing-functions elm

Last synced: 26 days ago
JSON representation

Issue actions every browser refresh frame, in accordance to some easing function, over a specified time duration.

• Host: GitHub
• URL: https://github.com/athanclark/elm-duration
• Owner: athanclark
• Created: 2016-05-17T20:35:57.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-12-25T06:28:16.000Z (about 8 years ago)
• Last Synced: 2023-08-08T20:37:50.897Z (over 1 year ago)
• Topics: browser-frame, duration, easing-functions, elm
• Language: Elm
• Size: 11.7 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Elm-Duration

A helper component for issuing actions every browser frame with some easing functions,

over some time duration.

```elm

type alias MyModel =

  { someComponent : MyComponent.Model

  , duration : Duration.Model

  }

initMyModel : MyModel

initMyModel =

  { someComponent = MyComponent.init

  , duration = Duration.init

  }

type MyMsg

  = ComponentMsg MyComponent.Msg

  | DurationMsg Duration.Msg

updateMyModel : MyMsg -> MyModel -> (MyModel, Cmd MyMsg)

updateMyModel action model =

  case action of

    ComponentMsg a ->

      let (newComponent, eff) = Component.update a model.someComponent

      in  ( { model | someComponent = newComponent }

          , Cmd.map ComponentMsg eff

          )

    DurationMsg a ->

      let (newDuration, eff) = Duration.update

                                 (\t -> Task.perform Debug.log ComponentMsg <|

                                          Task.succeed <| MyComponentVisibility <|

                                            outQuad <| t / (2*second)

                                 )

                                 (2 * second)

                                 a

                                 model.duration

      in  ( { model | duration = newDuration }

          , eff

          )

subscriptions : MyModel -> Sub MyMsg

subscriptions = Sub.map DurationMsg <| Duration.subscriptions model.duration

view : MyModel -> Html MyMsg

view model =

  div []

    [ viewMyComponent model.someComponent

    , button [ onClick <| DurationMsg <| Duration.Forward <|

                            \_ -> Task.perform Debug.log ComponentMsg <|

                                    Task.succeed TransitionComplete

             ] [text "Start animation"]

    ]

```