Skip to content

What's New in 2.1

Jump to bottom
Nicolas Roard edited this page Dec 18, 2020 · 14 revisions

New features in 2.1 Alpha 2

MotionLabel animation

ConstraintLayout

  • android:layout_width and android:layout_height are now optional, with wrap_content as default behavior
  • new layout_constraintWidth and layout_constraintHeight attributes for expressing dimension constraints
  • supports negative margins for constraints
  • supports baseline to top and baseline to bottom constraints
  • supports baseline margin constraints
  • SharedValues allow to inject external values into ConstraintLayout

MotionLayout

  • Support for overshoot interpolators (anticipate, overshoot)
  • Enhanced MotionHelper support
  • Add animated update of ConstraintSet to MotionLayout updateStateAnimate(id,cset,duration);
  • Shared value based ViewTransition
  • scheduleTransitonTo allow you to que a transition to run at the completion of the current transition.

Helpers

  • Carousel now supports an infinite (wrap-around) mode
  • ReactiveGuide : A guideline that position itself automatically when a SharedValue changes
  • MotionEffect : inject Keyframes to referenced views moving in a given direction
  • MotionLabel - A View for animating single line text

New features in 2.1 Alpha 1

MotionLayout

  • ViewTransition - Transitions on single views
  • noState ViewTransitions can be launched from KeyTrigger
  • Include files - constraintSets can be in there own xml files
  • ConstraintOverride - Compact form of Constraint
  • Rotational OnSwipe - Swipe in a circular motion
  • KeyTrigger now support custom attributes
  • Dynamic pivot point setting
  • Custom wave shapes in keyCycle
  • Quantized motion - can break up smooth animation for special effect (watch ticking)
  • KeyTrigger now support custom attributes
  • CustomAttributes support motion:customReference

Helpers

  • ImageFilterView/Button image matrix features
  • Carousel helper : new Motion Helper (see doc)

<ViewTransition>

ViewTransition is a new tag that enables single view animations within MotionLayout. With ViewTransition you can change a single view within MotionLayout.

The attributes

 <ViewTransition
        android:id="@+id/spin_equ"
        motion:motionTarget="@+id/button10"
        motion:viewTransitionMode="noState"
        motion:onStateTransition="actionDown"
        motion:duration="600"
        motion:pathMotionArc="none"
        motion:motionInterpolator="linear"
        motion:setsTag="@id/sets_tag_on_done"
        motion:clearsTag="@id/clears_tag_on_done"
        motion:ifTagSet="@id/only_run_if_set"
        motion:ifTagNotSet="@id/only_run_if_not_set"
      >
     <ConstraintOverride ....> 
       <CustomAttribute ...\>
     </ConstraintOverride>
    
    <KeyFrameSet>
         ...
    </KeyFrameSet>
  </ViewTransition>
  • id is used for invoking a View Transition with motionLayout.viewTransition(id, view...)
  • motionTarget may be used to define the view or collection of views in conjunction with layout_constraintTag
  • viewTransitionMode defines 3 major modes of ViewTransition currentState, allStates and noState. (noState runs asynchronously per view)
  • onStateTransition allows the ViewTransition on actionDown or actionUp
  • duration duration of the transition in milliseconds (same as <Transition>)
  • transitionDisable allows you to have disabled ViewTransitions which can be enabled with motionLayout.enableViewTransition(id)
  • pathMotionArc views move in quarter ellipses (same as )
  • motionInterpolator defines how the transition will animate easing (same as )
  • setsTag on completion of a ViewTransition on a view it calls view.setTag(id, System.nanoTime)
  • clearsTag on completion of a ViewTransition on a view it calls view.setTag(id, null)
  • ifTagSet ViewTransition will not run if view.getTag(id) == null
  • ifTagNotSet ViewTransition will not run if view.getTag(id) != null

<ConstraintOverride> under <ViewTransition>

ConstraintOverride will be applied to the end state of a transition. Note. This will only work in currentState and allStates mode.

in allStates mode it will modify all the states within the MotionLayout in currentState it only modifies the current state. in noState mode it is ignored

<KeyFrameSet> under <ViewTransition>

All KeyFrame types can be use in ViewTransition It is particular useful under noState but Warning! Return the view to the original configuration by the end of the KeyFrameSet

<KeyTrigger> can now start a ViewTransition

You can Launching ViewTransition from a KeyTrigger if it is of type noState. The transition was run in parellel to the on going transition. It is up to the developer to not provide a ViewTransition that conflicts with the Transition. This adds the following 3 attributes:

  • viewTransitionOnNegativeCross - Fire when going from above the threshold to below threshold or leaving the collision
  • viewTransitionOnPositiveCross - Fire when going from below the threshold to aboge threshold or entering the collision
  • viewTransitionOnCross -Fire when crossing threshold or entering and leaving the collision
            <KeyTrigger
                motion:motionTarget="@id/astroid"
                motion:framePosition="50"
                motion:viewTransitionOnPositiveCross="@id/spin" />

            <KeyTrigger
                motion:motionTarget="inspace"
                motion:framePosition="50"
                motion:motion_postLayoutCollision="false"
                motion:motion_triggerOnCollision="@+id/rocket"
                motion:viewTransitionOnPositiveCross="@id/shake"
             />

Include files

Tag: Include
Attributes: ConstraintSet

Allows including a ConstraintSet from a different file. A constraint set file starts with the tag.

E.g.

<Include motion:constraintSet="@xml/file" /> 
 // load the ConstraintSet file res/xml/file.xml

In Transition

Tag: Transition
Attributes: startConstraintSet, endConstraintSet

motion:startConstraintSet & motion:endConstraintSet now support @xmll/

E.g.

<Transition motion:endConstraintSet=@xml/file />

Load the ConstraintSet file res/xml/file.xml The ConstraintSet found in that file will be used as the endConstraintSet (Note from api point of view the id will be the id of the ConstraintSet in that file.)

ConstraintOverride

Tag: ConstraintOverride
Attributes: same as Constraint except "layout_constraint*_to*Of" attributes

Takes the same argument as Constraint except the ones that provide anchors ( layout_constraintBottom_toBottomOf, layout_constraintEnd_toEndOf etc.) The Constraints are set to all the parent constraints but changed but adding these. It is useful when you are simply changing a margin etc in the parameters. If you are changing where a view is anchored you need to use the

E.g.

         <ConstraintOverride
            android:id="@+id/button"
            motion:layout_constraintHorizontal_bias="0" />

Rotational OnSwipe

Tag: OnSwipe
Attributes: dragDirection , rotationCenterId

Attribute motion:dragDirection now also takes dragClockwise, dragAnticlockwise New attribute rotationCenterId combines with drag*Clockwise to allow rotation

Tag OnSwipe attribute motion:dragDirection add dragClockwise and dragAnticlockwise E.g. This allows the support for rotation gestures. The center of rotation can be defined in one of two ways:

  1. Attribute motion:rotationCenterId= defines the center of rotation. (The center of the view pointed by that id)
  2. The motion:anchorID is a View that is layout_constraintCircle in which case that view is the center of rotation.
       <OnSwipe motion:dragDirection="dragClockwise"
            motion:touchAnchorId="@id/earth"
            motion:rotationCenterId="@id/sun"/>

ImageFilterView/Button image matrix features

Tags/class: ImageFilterView, ImageFilterButton
Attributes: imagePanX, imagePanY, imageZoom, **imageRotate **

  • imagePanX = 0 is centered -1 is left, +1 is to the right
  • imagePanY = 0 is centered -1 is top, +1 is to the bottom
  • imageZoom = 1 is scaled to just fit the viewport (all of image visible)
  • imageRotate = 0 is normal rotation is clockwise

CustomWave shape in keyCycle

Tag: keyCycle
Attributes: waveShape

In addition to sin,cos,bounce etc. motion:waveShape can now take a series of float which describe are points along the wave shape E.g

<KeyCycle motion:waveShape=”spline(0.0, 1.0, -1.0, 0)” />

Quantized motion

Tag: Constraint, ConstraintOverride, Motion
Attributes: waveShape

Support views moving in discretes steps Tags in Constraint, ConstraintOverride, Motion

  • quantizeMotionSteps=n - break the motion into n steps
  • quantizeMotionPhase
  • quantizeMotionInterpolator

Dynamic pivot point setting

Tag: Constraint, ConstraintOverrid, Motion Attributes: transformPivotTarget

transformPivotTarget sets the view pivot point to be the center of the view pointed to by the id.

KeyCycle/KeyTimeCycle support motion:wavePhase

Tag: KeyCycle, KeyTimeCycle
Attributes: wavePhase

Phase adjust the phase of the cycle

Transition motionInterpolator enhancements

Tag: Transition, Motion, Constraint, ConstraintOverrid
Attributes: motionInterpolator

Transition motionInterpolator now supports spline(v1, v2, v3,...) and Schlick(x,y)

CustomAttributes support motion:methodName

As an alternative to motion:attributeName you can now use motion:methodName

attributeName="foo" looks for a method named setFoo() where as methodName="foo" would look for foo() This allow you to directly call method. Also to increase clarity you can use the tag CustomMethod it is synonymous with CustomAttributes

CustomAttributes support motion:customReference

this can be use to set images etc.

     <CustomAttribute motion:attributeName="imageResource"
        motion:customReference="@drawable/ic_battery"/>

KeyTrigger now support custom attributes

This allow you to call a range of methods to produce a wide range of effects.

Normally onNegativeCross="foo" will call the method foo(); Now onNegativeCross="." indicates call the CustomMethods defined within the KeyTrigger tag.
(This applies to onNegativeCross, onPositiveCross, onCross)

In the below example the method view.performHapticFeedback(3) is called

 <KeyTrigger 
  motion:framePosition="30"
  motion:motionTarget="@+id/view"  
  motion:onNegativeCross="." >
     <CustomMethod 
       motion:methodName="performHapticFeedback"   
       motion:customIntegerValue="3" />
 </KeyTrigger>

Support for interpolators (anticipate, overshoot)

The spline fitting algorithms have been enhanced to continue past there end points. This allows the use of the anticipate and overshoot interpolator.

Enhanced MotionHelper support

MotionHelpers can now programmatically inject keyframes or Constraintsets. This allows motionHelpers to generate behavior using familiar KeyFrame mechanisms
Demo MotionHelper FadeMove added.

updateStateAnimate(id,cset,duration);

Now you can do a simple animated update of a ConstraintSet.

call updateStateAnimate(int stateId, ConstraintSet set, int duration) to animate the change.

Shared value based ViewTransition

a ViewTransition can be configured to launch by a change to a SharedValue. SharedValue is a new singleton on constraintLayout which allows send named values across the system.

MotionLabel

A View for animating single line text It has several key features to support Animation:

  • PanX and PanY instead of gravity, Floating point where -1 is left 0=center +1 is right. This allows for animation of the position.
  • set the thickness and color of the outline of the text
  • set the color or a texture as the background of the text.
  • Effort was done to ensure smooth animation of textSize.

Example MotionLable width texture background

    <androidx.constraintlayout.utils.widget.MotionLabel
        ...
        android:gravity="center"
        app:textureHeight="20dp"
        app:textureWidth="20dp"
        app:textBackgroundPanX="1"
        android:text="Hellow World"
        android:textSize="80sp"
        app:textBackground="@drawable/texture2"
        app:textOutlineColor="#FAA"
        app:textOutlineThickness="1dp"
     />

scheduleTransitonTo

Works just like TransitionTo but it adds your request to a Queue if you are mid transition.

Clone this wiki locally