mdgriffith / elm-style-animation

The style animation library for Elm!
http://package.elm-lang.org/packages/mdgriffith/elm-style-animation/latest
BSD 3-Clause "New" or "Revised" License
440 stars 40 forks source link

Floating point rounding issue #33

Closed sgillis closed 7 years ago

sgillis commented 7 years ago

I was working on an animation which consisted of two steps, and noticed that the second step never got executed. It's probably easier to give a minimal example to explain:

module Main exposing (..)

import Animation exposing (..)
import Ease
import Html exposing (..)
import Html.Attributes
import Html.Events

main : Program Never Model Msg
main =
    program
        { init = init
        , update = update
        , subscriptions = subscriptions
        , view = view
        }

type alias Model =
    { style : Animation.State
    }

type Msg
    = Animate Animation.Msg
    | StartAnimation

subscriptions : Model -> Sub Msg
subscriptions model =
    Animation.subscription Animate [ model.style ]

init : ( Model, Cmd Msg )
init =
    ( { style =
            Animation.style
                [ Animation.opacity 1.0 ]
      }
    , Cmd.none
    )

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Animate animMsg ->
            ( { model | style = Animation.update animMsg model.style }
            , Cmd.none
            )

        StartAnimation ->
            ( { model
                | style =
                    Animation.interrupt
                        [ Animation.toWith
                            (Animation.easing
                                { duration = 600
                                , ease = Ease.outCubic
                                }
                            )
                            [ Animation.opacity 0.3 ]
                        , Animation.toWith
                            (Animation.easing
                                { duration = 600
                                , ease = Ease.outCubic
                                }
                            )
                            [ Animation.opacity 1.0 ]
                        ]
                        model.style
              }
            , Cmd.none
            )

view : Model -> Html Msg
view model =
    div []
        [ button [ Html.Events.onClick StartAnimation ] [ text <| "Start animation" ]
        , div
            (Animation.render model.style
                ++ [ Html.Attributes.style
                        [ ( "width", "100px" )
                        , ( "height", "100px" )
                        , ( "background-color", "blue" )
                        ]
                   ]
            )
            []
        ]

It's supposed to go from opacity 1 -> opacity 0.3 -> opacity 1, but it remains on opacity 0.3.

I think the error is in this code: https://github.com/mdgriffith/elm-style-animation/blob/master/src/Animation/Model.elm#L1616-L1617

I made a local copy and changed that to

newPos = (toFloat (truncate (((eased * duration) + start) * 1000))) / 1000

Then the animation does run to the end, but I'm not sure this is the best solution

mdgriffith commented 7 years ago

Thanks for the issue!

I've made changes that resolve the issue and they're released at version 3.5.3.