Anim.Property.Rotate

Rotate elements around the X, Y, and Z axes.

Default: 0 degrees for all axes

When no start value is configured for any axis, the default will be used for that axis.

Types

type alias Builder eng =

RotateBuilder eng

Builder type for rotate animations.

type alias AnimGroupName =

String

Type alias for the animation group name.

Initialize

initXYZ :

AnimGroupName

-> Float

-> AnimBuilder eng

Set the initial X, Y, and Z rotation.

import Anim.Engine.* as Engine
import Anim.Property.Rotate as Rotate


init : ( Model, Cmd Msg )
init =
    ( { animState = Engine.init [ Rotate.initXYZ "animGroupName" 45 30 60 ] }
    , Cmd.none
    )

initXY : AnimGroupName -> Float -> Float -> AnimBuilder eng -> AnimBuilder eng

Set the initial X and Y rotation.

import Anim.Engine.* as Engine
import Anim.Property.Rotate as Rotate


init : ( Model, Cmd Msg )
init =
    ( { animState = Engine.init [ Rotate.initXY "animGroupName" 45 30 ] }
    , Cmd.none
    )

initXZ : AnimGroupName -> Float -> Float -> AnimBuilder eng -> AnimBuilder eng

Set the initial X and Z rotation.

import Anim.Engine.* as Engine
import Anim.Property.Rotate as Rotate


init : ( Model, Cmd Msg )
init =
    ( { animState = Engine.init [ Rotate.initXZ "animGroupName" 45 60 ] }
    , Cmd.none
    )

initX : AnimGroupName -> Float -> AnimBuilder eng -> AnimBuilder eng

Set the initial X rotation.

import Anim.Engine.* as Engine
import Anim.Property.Rotate as Rotate


init : ( Model, Cmd Msg )
init =
    ( { animState = Engine.init [ Rotate.initX "animGroupName" 45 ] }
    , Cmd.none
    )

initYZ : AnimGroupName -> Float -> Float -> AnimBuilder eng -> AnimBuilder eng

Set the initial Y and Z rotation.

import Anim.Engine.* as Engine
import Anim.Property.Rotate as Rotate


init : ( Model, Cmd Msg )
init =
    ( { animState = Engine.init [ Rotate.initYZ "animGroupName" 30 60 ] }
    , Cmd.none
    )

initY : AnimGroupName -> Float -> AnimBuilder eng -> AnimBuilder eng

Set the initial Y rotation.

import Anim.Engine.* as Engine
import Anim.Property.Rotate as Rotate


init : ( Model, Cmd Msg )
init =
    ( { animState = Engine.init [ Rotate.initY "animGroupName" 30 ] }
    , Cmd.none
    )

initZ : AnimGroupName -> Float -> AnimBuilder eng -> AnimBuilder eng

Set the initial Z rotation.

import Anim.Engine.* as Engine
import Anim.Property.Rotate as Rotate


init : ( Model, Cmd Msg )
init =
    ( { animState = Engine.init [ Rotate.initZ "animGroupName" 60 ] }
    , Cmd.none
    )

Build

begin : AnimBuilder eng -> Builder eng

Turn the AnimBuilder into a rotate animation Builder for the specified animation group.

Use this to start configuring a rotate animation.

myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
    Rotate.begin
        >> ... -- Configure and build the animation

end : Builder eng -> AnimBuilder eng

Complete the Builder animation configuration and return an AnimBuilder so you can continue configuring other property animations or execute the animation with an Engine.

myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
    Rotate.begin
        >> ... -- configure the animation with from, to, duration, easing, etc.
        >> Rotate.end
        >> ... -- continue with animation

Configure

Start Value

📖 See Start Values for details.

fromXYZ : Float -> Float -> Float -> Builder eng -> Builder eng

Set the starting X, Y, and Z rotations (degrees).

myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
    Rotate.begin
        >> Rotate.fromXYZ 45 90 180
        >> ... -- continue with animation

fromXY : Float -> Float -> Builder eng -> Builder eng

Set the starting X and Y rotations (degrees). Z is left unchanged (or 0 if not set).

fromXZ : Float -> Float -> Builder eng -> Builder eng

Set the starting X and Z rotations (degrees). Y is left unchanged (or 0 if not set).

fromX : Float -> Builder eng -> Builder eng

Set the starting X rotation (degrees). Y and Z are left unchanged (or 0 if not set).

fromYZ : Float -> Float -> Builder eng -> Builder eng

Set the starting Y and Z rotations (degrees). X is left unchanged (or 0 if not set).

fromY : Float -> Builder eng -> Builder eng

Set the starting Y rotation (degrees). X and Z are left unchanged (or 0 if not set).

fromZ : Float -> Builder eng -> Builder eng

Set the starting Z rotation (degrees). X and Y are left unchanged (or 0 if not set).

End Value

📖 See End Values for details.

Absolute

toXYZ : Float -> Float -> Float -> Builder eng -> Builder eng

Set the target X, Y, and Z rotations (degrees).

myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
    Rotate.begin
        >> Rotate.toXYZ 45 90 180
        >> ... -- continue with animation

toXY : Float -> Float -> Builder eng -> Builder eng

Set the target X and Y rotations (degrees). Z is left unchanged (or 0 if not set).

toXZ : Float -> Float -> Builder eng -> Builder eng

Set the target X and Z rotations (degrees). Y is left unchanged (or 0 if not set).

toX : Float -> Builder eng -> Builder eng

Set the target X rotation (degrees). Y and Z are left unchanged (or 0 if not set).

toYZ : Float -> Float -> Builder eng -> Builder eng

Set the target Y and Z rotations (degrees). X is left unchanged (or 0 if not set).

toY : Float -> Builder eng -> Builder eng

Set the target Y rotation (degrees). X and Z are left unchanged (or 0 if not set).

toZ : Float -> Builder eng -> Builder eng

Set the target Z rotation (degrees). X and Y are left unchanged (or 0 if not set).

Relative

Move by a delta instead of to a fixed rotation. The end value is current + delta where current is the live animated rotation.

Only available on the Sub and WAAPI engines. Using these with any other engine results in a type error.

byXYZ : Float -> Float -> Float -> Builder eng -> Builder eng

Move by a delta on the X, Y, and Z axes.

byXY : Float -> Float -> Builder eng -> Builder eng

Move by a delta on the X and Y axes. Z is unaffected.

byXZ : Float -> Float -> Builder eng -> Builder eng

Move by a delta on the X and Z axes. Y is unaffected.

byX : Float -> Builder eng -> Builder eng

Move by a delta on the X axis. Y and Z are unaffected.

byYZ : Float -> Float -> Builder eng -> Builder eng

Move by a delta on the Y and Z axes. X is unaffected.

byY : Float -> Builder eng -> Builder eng

Move by a delta on the Y axis. X and Z are unaffected.

byZ : Float -> Builder eng -> Builder eng

Move by a delta on the Z axis. X and Y are unaffected.

Timing

📖 See Animation Timing for details.

delay :

Int

-> Builder { eng | withTiming : () }

Set the delay (milliseconds) before the animation starts.

duration :

Int

-> Builder { eng | withTiming : () }

Set the animation duration (milliseconds).

speed :

Float

-> Builder { eng | withTiming : () }

The speed represents how many degrees the element rotates per second.

For example, a rotation animation from 0° to 180° with a speed of 90.0 will take 2 seconds to complete.

Easing

📖 See Easing for details.

easing : Easing -> Builder eng -> Builder eng

Set the easing function for the animation.

import Motion.Easing exposing (Easing(..))


Rotate.easing EaseInOut

Spring

📖 See Spring for details.

spring :

Spring

-> Builder { eng | withSpring : () }

Drive this property with a spring.

import Motion.Spring as Spring


Rotate.spring Spring.wobbly

Clamping

Keep rotate values on each axis within a range you choose.

Values outside the range are clamped to the nearest boundary.

The range stays in effect for future animations until you Unclamp it:

update msg model =
    case msg of
        KnobTurned angle ->
            let
                ( animState, cmd ) =
                    WAAPI.animate model.animState <|
                        Rotate.begin
                            >> Rotate.clampZ -90 90
                            >> Rotate.end
            in
            ( { model | animState = animState }
            , cmd
            )

Clamp

clampX : Float -> Float -> Builder eng -> Builder eng

Keep the X axis rotation within min and max values. If min > max the values are flipped.

clampY : Float -> Float -> Builder eng -> Builder eng

Keep the Y axis rotation within min and max values. If min > max the values are flipped.

clampZ : Float -> Float -> Builder eng -> Builder eng

Keep the Z axis rotation within min and max values. If min > max the values are flipped.

Unclamp

unclampX : Builder eng -> Builder eng

Remove the X axis range for this animation group. Does nothing if no range is set.

unclampY : Builder eng -> Builder eng

Remove the Y axis range for this animation group. Does nothing if no range is set.

unclampZ : Builder eng -> Builder eng

Remove the Z axis range for this animation group. Does nothing if no range is set.

Snap

Snap to a specific rotation, cancelling any in-flight animation on this property.

set : Float -> Builder eng -> Builder eng

Snap to a uniform rotation on all three axes silently, cancelling any in-flight animation on this property.

setXYZ : Float -> Float -> Float -> Builder eng -> Builder eng

Snap target X, Y and Z angles.

setXY : Float -> Float -> Builder eng -> Builder eng

Snap target X and Y angles, preserving the current Z angle.

setXZ : Float -> Float -> Builder eng -> Builder eng

Snap target X and Z angles, preserving the current Y angle.

setX : Float -> Builder eng -> Builder eng

Snap target X angle, preserving the current Y and Z angles.

setYZ : Float -> Float -> Builder eng -> Builder eng

Snap target Y and Z angles, preserving the current X angle.

setY : Float -> Builder eng -> Builder eng

Snap target Y angle, preserving the current X and Z angles.

setZ : Float -> Builder eng -> Builder eng

Snap target Z angle, preserving the current X and Y angles.

phollyer/elm-motion/3.0.4

Anim.Property.Rotate

Types

Initialize

Build

Configure

Start Value

End Value

Absolute

Relative

Timing

Easing

Spring

Clamping

Clamp

Unclamp

Snap

Modules