From 6f15554870ada6cab27d0b583abe290cecb8fc1e Mon Sep 17 00:00:00 2001 From: Charlon Date: Fri, 3 May 2024 21:16:33 +0700 Subject: [PATCH 1/3] Fix steps resetting to initial states + Added an example for animating a timeline --- examples-new/elm.json | 30 ++++++----- examples-new/src/AnimationX.elm | 92 ++++++++++++++++++++++++++++++++ examples-new/{ => src}/Basic.elm | 0 src/Animator/Value.elm | 4 +- 4 files changed, 109 insertions(+), 17 deletions(-) create mode 100644 examples-new/src/AnimationX.elm rename examples-new/{ => src}/Basic.elm (100%) diff --git a/examples-new/elm.json b/examples-new/elm.json index 174c4db..820945f 100644 --- a/examples-new/elm.json +++ b/examples-new/elm.json @@ -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": {} } -} +} \ No newline at end of file diff --git a/examples-new/src/AnimationX.elm b/examples-new/src/AnimationX.elm new file mode 100644 index 0000000..772ec90 --- /dev/null +++ b/examples-new/src/AnimationX.elm @@ -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, isAnimating : Bool } + + +type Msg + = NewPosix Time.Posix + | StopAnimation + + +init : ( Model, Cmd Msg ) +init = + let + initialTimeline : Animator.Timeline.Timeline number + initialTimeline = + Animator.Timeline.init 10 + + queuedSteps : List (Animator.Timeline.Step number) + 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 number + timelineWithSteps = + Animator.Timeline.scale 3 <| Animator.Timeline.queue queuedSteps initialTimeline + in + ( { timeline = timelineWithSteps, isAnimating = True } + , 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 ) + + StopAnimation -> + ( { model | isAnimating = False }, Cmd.none ) + + +subscriptions : Model -> Sub Msg +subscriptions model = + if model.isAnimating 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 StopAnimation ] [ Html.text "Stop" ] + ] diff --git a/examples-new/Basic.elm b/examples-new/src/Basic.elm similarity index 100% rename from examples-new/Basic.elm rename to examples-new/src/Basic.elm diff --git a/src/Animator/Value.elm b/src/Animator/Value.elm index 45755ee..a3005ce 100644 --- a/src/Animator/Value.elm +++ b/src/Animator/Value.elm @@ -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 ) From 20493919076d223457c2bcec5c66d38cb0be09be Mon Sep 17 00:00:00 2001 From: Charlon Date: Fri, 3 May 2024 22:06:16 +0700 Subject: [PATCH 2/3] Remove stop button and add restart button --- examples-new/src/AnimationX.elm | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/examples-new/src/AnimationX.elm b/examples-new/src/AnimationX.elm index 772ec90..11b4366 100644 --- a/examples-new/src/AnimationX.elm +++ b/examples-new/src/AnimationX.elm @@ -27,24 +27,24 @@ type alias Model = type Msg = NewPosix Time.Posix - | StopAnimation + | Start init : ( Model, Cmd Msg ) init = let - initialTimeline : Animator.Timeline.Timeline number + initialTimeline : Animator.Timeline.Timeline Float initialTimeline = Animator.Timeline.init 10 - queuedSteps : List (Animator.Timeline.Step number) + 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 number + timelineWithSteps : Animator.Timeline.Timeline Float timelineWithSteps = Animator.Timeline.scale 3 <| Animator.Timeline.queue queuedSteps initialTimeline in @@ -57,10 +57,10 @@ update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of NewPosix posix -> - ( { model | timeline = Animator.Timeline.update posix model.timeline }, Cmd.none ) + ( { model | timeline = Animator.Timeline.update posix model.timeline, isAnimating = Animator.Timeline.isRunning model.timeline }, Cmd.none ) - StopAnimation -> - ( { model | isAnimating = False }, Cmd.none ) + Start -> + init subscriptions : Model -> Sub Msg @@ -88,5 +88,5 @@ view model = [ Html.div [] [ Html.text ("Position Standard: " ++ String.fromFloat positionStandard) ] , Html.div [] [ Html.text ("Position Linear: " ++ String.fromFloat positionLinear) ] ] - , Html.button [ Html.Events.onClick StopAnimation ] [ Html.text "Stop" ] + , Html.button [ Html.Events.onClick Start ] [ Html.text "Re-Start" ] ] From 4e100456edbed4d4ee65ff303cbf979c0529df25 Mon Sep 17 00:00:00 2001 From: Charlon Date: Fri, 3 May 2024 22:46:04 +0700 Subject: [PATCH 3/3] refacto --- examples-new/src/AnimationX.elm | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples-new/src/AnimationX.elm b/examples-new/src/AnimationX.elm index 11b4366..b3c3788 100644 --- a/examples-new/src/AnimationX.elm +++ b/examples-new/src/AnimationX.elm @@ -22,7 +22,7 @@ main = type alias Model = - { timeline : Animator.Timeline.Timeline Float, isAnimating : Bool } + { timeline : Animator.Timeline.Timeline Float } type Msg @@ -48,7 +48,7 @@ init = timelineWithSteps = Animator.Timeline.scale 3 <| Animator.Timeline.queue queuedSteps initialTimeline in - ( { timeline = timelineWithSteps, isAnimating = True } + ( { timeline = timelineWithSteps } , Cmd.none ) @@ -57,7 +57,7 @@ update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of NewPosix posix -> - ( { model | timeline = Animator.Timeline.update posix model.timeline, isAnimating = Animator.Timeline.isRunning model.timeline }, Cmd.none ) + ( { model | timeline = Animator.Timeline.update posix model.timeline }, Cmd.none ) Start -> init @@ -65,7 +65,7 @@ update msg model = subscriptions : Model -> Sub Msg subscriptions model = - if model.isAnimating then + if Animator.Timeline.isRunning model.timeline then Browser.Events.onAnimationFrame NewPosix else