Skip to content

Commit b8e284b

Browse files
andrewMacmurrayandrewMacmurray
committed
exposes animation Step, reorganise docs for Animated and Animation
1 parent ba917f0 commit b8e284b

File tree

3 files changed

+111
-81
lines changed

3 files changed

+111
-81
lines changed

‎src/Simple/Animated.elm‎

Lines changed: 57 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,10 @@ module Simple.Animated exposing
1212
1313
This module gives you animated `Html` `div`s out of the box, and some helpers to create animated versions of whatever `UI` library you're using.
1414
15-
e.g. You want animated `elm-ui` `Element`s? Create an animated helper like this:
16-
17-
animatedUi =
18-
Simple.Animated.ui
19-
{ behindContent = Element.behindContent
20-
, htmlAttribute = Element.htmlAttribute
21-
, html = Element.html
22-
}
23-
24-
Then make animated `el`s, `column`s and `row`s!
25-
26-
el : Animation -> List (Element.Attribute msg) -> Element msg -> Element msg
27-
el =
28-
animatedUi Element.el
29-
30-
Then render an animation
31-
32-
dot : Element msg
33-
dot =
34-
Utils.Animated.el expandFade [] elmUiDot
35-
3615
3716
## Common Helpers
3817
39-
You can find many of these common helpers here: <https://github.com/andrewMacmurray/elm-simple-animation/blob/main/examples/src/Utils/Animated.elm>
18+
You can find examples of building many of the common helpers mentioned below: <https://github.com/andrewMacmurray/elm-simple-animation/blob/main/examples/src/Utils/Animated.elm>
4019
4120
4221
# Html Animations
@@ -46,69 +25,16 @@ You can find many of these common helpers here: <https://github.com/andrewMacmur
4625
4726
# Hook Into SVG
4827
49-
So you can use whatever version of `elm/svg` you like use the `Simple.Animated.svg` function along with `Svg.Attributes.class` to create animated `Svg` elements:
50-
51-
g : Animation -> List (Svg.Attribute msg) -> List (Svg msg) -> Svg msg
52-
g =
53-
animatedSvg Svg.g
54-
55-
animatedSvg =
56-
Simple.Animated.node Svg.Attributes.class
57-
58-
Then render an animation
59-
60-
dot : Svg msg
61-
dot =
62-
Svg.svg []
63-
[ Utils.Animated.g expandFade [] [ svgDot ]
64-
]
65-
6628
@docs svg
6729
6830
6931
# Hook Into Elm UI
7032
71-
Create animated `elm-ui` `Element`s
72-
73-
el : Animation -> List (Element.Attribute msg) -> Element msg -> Element msg
74-
el =
75-
animatedUi Element.el
76-
77-
animatedUi =
78-
Simple.Animated.ui
79-
{ behindContent = Element.behindContent
80-
, htmlAttribute = Element.htmlAttribute
81-
, html = Element.html
82-
}
83-
84-
Then render an animation
85-
86-
dot : Element msg
87-
dot =
88-
Utils.Animated.el expandFade [] elmUiDot
89-
9033
@docs UiOptions, ui
9134
9235
9336
# Custom Renderer
9437
95-
When you want to completely customise how to render animations you can use the low level `Simple.Animated.custom` - which gives you access to the raw animation `stylesheet` and `class` name that will apply the animation.
96-
97-
For example, say you wanted to animate `elm-community/typed-svg` nodes - you could create animated versions like this:
98-
99-
g : Animation -> List (TypedSvg.Attribute msg) -> List (TypedSvg.Svg msg) -> TypedSvg.Svg msg
100-
g =
101-
animatedTypedSvg TypedSvg.g
102-
103-
animatedTypedSvg node animation attributes children =
104-
Simple.Animated.custom
105-
(\className stylesheet ->
106-
node
107-
(TypedSvg.Attributes.class [ className ] :: attributes)
108-
(TypedSvg.style [] [ TypedSvg.text stylesheet ] :: children)
109-
)
110-
animation
111-
11238
@docs ClassName, Stylesheet, custom
11339
11440
-}
@@ -168,7 +94,24 @@ html =
16894
node Html.Attributes.class
16995

17096

171-
{-| -}
97+
{-| So you can use whatever version of `elm/svg` you like use the `Simple.Animated.svg` function along with `Svg.Attributes.class` to create animated `Svg` elements:
98+
99+
animatedSvg =
100+
Simple.Animated.node Svg.Attributes.class
101+
102+
Then render an animation
103+
104+
dot : Svg msg
105+
dot =
106+
Svg.svg []
107+
[ g expandFade [] [ svgDot ]
108+
]
109+
110+
g : Animation -> List (Svg.Attribute msg) -> List (Svg msg) -> Svg msg
111+
g =
112+
animatedSvg Svg.g
113+
114+
-}
172115
svg :
173116
(ClassName -> Html.Attribute msg)
174117
-> (List (Html.Attribute msg) -> List (Html msg) -> Html msg)
@@ -201,7 +144,26 @@ type alias UiOptions element attribute msg =
201144
}
202145

203146

204-
{-| -}
147+
{-| Create animated `elm-ui` `Element`s
148+
149+
animatedUi =
150+
Simple.Animated.ui
151+
{ behindContent = Element.behindContent
152+
, htmlAttribute = Element.htmlAttribute
153+
, html = Element.html
154+
}
155+
156+
Then render an animation
157+
158+
dot : Element msg
159+
dot =
160+
el expandFade [] elmUiDot
161+
162+
el : Animation -> List (Element.Attribute msg) -> Element msg -> Element msg
163+
el =
164+
animatedUi Element.el
165+
166+
-}
205167
ui :
206168
UiOptions element attribute msg
207169
-> (List attribute -> children -> element)
@@ -230,7 +192,24 @@ type alias Stylesheet =
230192
String
231193

232194

233-
{-| -}
195+
{-| When you want to completely customise how to render animations you can use the low level `Simple.Animated.custom`. This gives you access to the raw animation `stylesheet` and `class` name that will apply the animation.
196+
197+
For example, say you wanted to animate `elm-community/typed-svg` nodes - you could create animated versions like this:
198+
199+
g : Animation -> List (TypedSvg.Attribute msg) -> List (TypedSvg.Svg msg) -> TypedSvg.Svg msg
200+
g =
201+
animatedTypedSvg TypedSvg.g
202+
203+
animatedTypedSvg node animation attributes children =
204+
Simple.Animated.custom
205+
(\className stylesheet ->
206+
node
207+
(TypedSvg.Attributes.class [ className ] :: attributes)
208+
(TypedSvg.style [] [ TypedSvg.text stylesheet ] :: children)
209+
)
210+
animation
211+
212+
-}
234213
custom : (ClassName -> Stylesheet -> animated) -> Animation -> animated
235214
custom toAnimated anim =
236215
toAnimated

‎src/Simple/Animation.elm‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
module Simple.Animation exposing
22
( Animation, Millis, fromTo, steps
3-
, step, set, wait, waitTillComplete
3+
, Step, step, set, wait, waitTillComplete
44
, Option, loop, count, delay
55
, linear, easeIn, easeOut, easeInOut, cubic
66
, easeInSine, easeOutSine, easeInOutSine, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInBack, easeOutBack, easeInOutBack
@@ -19,12 +19,14 @@ All animation durations are in `milliseconds`
1919
2020
# Steps
2121
22-
@docs step, set, wait, waitTillComplete
22+
Build up a multi step animation
23+
24+
@docs Step, step, set, wait, waitTillComplete
2325
2426
2527
# Options
2628
27-
Customise the feel an behaviour of an animation
29+
Customise the feel and behaviour of an animation
2830
2931
@docs Option, loop, count, delay
3032
@@ -80,6 +82,7 @@ type Stepped
8082
}
8183

8284

85+
{-| -}
8386
type Step
8487
= Step Millis (List Property)
8588
| Wait Millis

‎tests/StepsSuite.elm‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,57 @@ suite =
7070
, frame 50 "{ opacity: 0; }"
7171
, frame 100 "{ opacity: 1; }"
7272
]
73+
, describe "waitUntilComplete"
74+
[ test "ensures given animation's duration has passed until the next step" <|
75+
\_ ->
76+
steps
77+
[ Animation.step 500 []
78+
, Animation.waitTillComplete (fromToWithDuration 2000)
79+
]
80+
|> Animation.duration
81+
|> Expect.equal 2000
82+
, test "adds a wait step with remaining duration" <|
83+
\_ ->
84+
steps
85+
[ Animation.step 500 [ P.opacity 1 ]
86+
, Animation.waitTillComplete (fromToWithDuration 2000)
87+
]
88+
|> Expect.keyframes
89+
[ frame 0 "{ opacity: 0; }"
90+
, frame 25 "{ opacity: 1; }"
91+
, frame 100 "{ opacity: 1; }"
92+
]
93+
, test "adds a single ms step if duration has already passed" <|
94+
\_ ->
95+
steps
96+
[ Animation.step 2000 []
97+
, Animation.waitTillComplete (fromToWithDuration 2000)
98+
, Animation.step 500 []
99+
]
100+
|> Animation.duration
101+
|> Expect.equal 2501
102+
]
73103
]
74104

75105

106+
steps : List Animation.Step -> Animation
107+
steps =
108+
Animation.steps
109+
{ options = []
110+
, startAt = [ P.opacity 0 ]
111+
}
112+
113+
114+
fromToWithDuration : Animation.Millis -> Animation
115+
fromToWithDuration ms =
116+
Animation.fromTo
117+
{ duration = ms
118+
, options = []
119+
}
120+
[ P.opacity 0 ]
121+
[ P.opacity 1 ]
122+
123+
76124
frame : Float -> String -> String
77125
frame n f =
78126
String.fromFloat n ++ "%" ++ f

0 commit comments

Comments
 (0)