mirror of
https://github.com/mdgriffith/elm-animator.git
synced 2024-09-11 12:47:52 +03:00
Merge pull request #27 from CharlonTank/v2
Fix steps resetting to initial states + Added an example for animating a timeline
This commit is contained in:
commit
b19ce307c2
@ -1,7 +1,7 @@
|
||||
{
|
||||
"type": "application",
|
||||
"source-directories": [
|
||||
".",
|
||||
"src",
|
||||
"../src"
|
||||
],
|
||||
"elm-version": "0.19.1",
|
||||
@ -9,33 +9,35 @@
|
||||
"direct": {
|
||||
"avh4/elm-color": "1.0.0",
|
||||
"elm/browser": "1.0.2",
|
||||
"elm/core": "1.0.2",
|
||||
"elm/core": "1.0.5",
|
||||
"elm/html": "1.0.0",
|
||||
"elm/json": "1.1.3",
|
||||
"elm/svg": "1.0.1",
|
||||
"elm/time": "1.0.0",
|
||||
"elm/url": "1.0.0",
|
||||
"ianmackenzie/elm-geometry": "2.0.0",
|
||||
"ianmackenzie/elm-units": "2.2.0",
|
||||
"terezka/line-charts": "2.0.0"
|
||||
"ianmackenzie/elm-geometry": "4.0.0",
|
||||
"ianmackenzie/elm-units": "2.10.0",
|
||||
"mdgriffith/elm-bezier": "1.0.0",
|
||||
"terezka/line-charts": "2.0.2"
|
||||
},
|
||||
"indirect": {
|
||||
"debois/elm-dom": "1.3.0",
|
||||
"elm/parser": "1.1.0",
|
||||
"elm/virtual-dom": "1.0.2",
|
||||
"elm/random": "1.0.0",
|
||||
"elm/virtual-dom": "1.0.3",
|
||||
"ianmackenzie/elm-1d-parameter": "1.0.1",
|
||||
"ianmackenzie/elm-float-extra": "1.1.0",
|
||||
"ianmackenzie/elm-interval": "2.0.0",
|
||||
"ianmackenzie/elm-triangular-mesh": "1.0.2",
|
||||
"ianmackenzie/elm-units-interval": "1.0.0",
|
||||
"justinmimbs/date": "3.2.0",
|
||||
"justinmimbs/time-extra": "1.1.0",
|
||||
"myrho/elm-round": "1.0.4",
|
||||
"ryannhg/date-format": "2.3.0"
|
||||
"ianmackenzie/elm-interval": "3.1.0",
|
||||
"ianmackenzie/elm-triangular-mesh": "1.1.0",
|
||||
"ianmackenzie/elm-units-interval": "3.2.0",
|
||||
"justinmimbs/date": "4.1.0",
|
||||
"justinmimbs/time-extra": "1.2.0",
|
||||
"myrho/elm-round": "1.0.5",
|
||||
"ryan-haskell/date-format": "1.0.0"
|
||||
}
|
||||
},
|
||||
"test-dependencies": {
|
||||
"direct": {},
|
||||
"indirect": {}
|
||||
}
|
||||
}
|
||||
}
|
92
examples-new/src/AnimationX.elm
Normal file
92
examples-new/src/AnimationX.elm
Normal file
@ -0,0 +1,92 @@
|
||||
module AnimationX exposing (main)
|
||||
|
||||
import Animator
|
||||
import Animator.Timeline
|
||||
import Animator.Transition
|
||||
import Animator.Value
|
||||
import Browser
|
||||
import Browser.Events
|
||||
import Html
|
||||
import Html.Events
|
||||
import Time
|
||||
|
||||
|
||||
main : Program () Model Msg
|
||||
main =
|
||||
Browser.element
|
||||
{ init = always init
|
||||
, update = update
|
||||
, subscriptions = subscriptions
|
||||
, view = view
|
||||
}
|
||||
|
||||
|
||||
type alias Model =
|
||||
{ timeline : Animator.Timeline.Timeline Float }
|
||||
|
||||
|
||||
type Msg
|
||||
= NewPosix Time.Posix
|
||||
| Start
|
||||
|
||||
|
||||
init : ( Model, Cmd Msg )
|
||||
init =
|
||||
let
|
||||
initialTimeline : Animator.Timeline.Timeline Float
|
||||
initialTimeline =
|
||||
Animator.Timeline.init 10
|
||||
|
||||
queuedSteps : List (Animator.Timeline.Step Float)
|
||||
queuedSteps =
|
||||
[ Animator.Timeline.transitionTo (Animator.ms 1000) 100
|
||||
, Animator.Timeline.transitionTo (Animator.ms 1000) 50
|
||||
, Animator.Timeline.transitionTo (Animator.ms 1000) 5
|
||||
]
|
||||
|
||||
timelineWithSteps : Animator.Timeline.Timeline Float
|
||||
timelineWithSteps =
|
||||
Animator.Timeline.scale 3 <| Animator.Timeline.queue queuedSteps initialTimeline
|
||||
in
|
||||
( { timeline = timelineWithSteps }
|
||||
, Cmd.none
|
||||
)
|
||||
|
||||
|
||||
update : Msg -> Model -> ( Model, Cmd Msg )
|
||||
update msg model =
|
||||
case msg of
|
||||
NewPosix posix ->
|
||||
( { model | timeline = Animator.Timeline.update posix model.timeline }, Cmd.none )
|
||||
|
||||
Start ->
|
||||
init
|
||||
|
||||
|
||||
subscriptions : Model -> Sub Msg
|
||||
subscriptions model =
|
||||
if Animator.Timeline.isRunning model.timeline then
|
||||
Browser.Events.onAnimationFrame NewPosix
|
||||
|
||||
else
|
||||
Sub.none
|
||||
|
||||
|
||||
view : Model -> Html.Html Msg
|
||||
view model =
|
||||
let
|
||||
positionStandard : Float
|
||||
positionStandard =
|
||||
Animator.Value.float model.timeline Animator.Value.to
|
||||
|
||||
positionLinear : Float
|
||||
positionLinear =
|
||||
Animator.Value.float model.timeline (Animator.Value.withTransition Animator.Transition.linear << Animator.Value.to)
|
||||
in
|
||||
Html.div []
|
||||
[ Html.div []
|
||||
[ Html.div [] [ Html.text ("Position Standard: " ++ String.fromFloat positionStandard) ]
|
||||
, Html.div [] [ Html.text ("Position Linear: " ++ String.fromFloat positionLinear) ]
|
||||
]
|
||||
, Html.button [ Html.Events.onClick Start ] [ Html.text "Re-Start" ]
|
||||
]
|
@ -99,9 +99,7 @@ movement timeline lookup =
|
||||
Timeline.startTime target
|
||||
|
||||
isHappening =
|
||||
(Time.thisAfterOrEqualThat now startTransition
|
||||
&& Time.thisBeforeOrEqualThat now arrived
|
||||
)
|
||||
Time.thisAfterOrEqualThat now startTransition
|
||||
|| (List.isEmpty future
|
||||
&& Time.thisAfterThat now interruptedOrEnd
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user