What's New in 2.1
- Gone<->Visible components are now animated as expected
- add guidelineUseRtl
- add json dump getSceneString() to ConstraintLayout
- OnSwipe enhancement including spring (stiffness, damping, mass etc) & never complete
- jumpToState function
- ViewTransition downUp mode where on touch Down it plays to 100 and on up reverses to 0
- Reverted LayoutParams changes -- layout_width/layout_height are again mandatory...
- Various bug fixes:
Flow issues (RTL, etc.) optimizer (ratio) Group visibility
- Programmatic support for inserting and removing onSwipe and onClick on Transitions
- Experimental Support for Transitions through screen rotation
- support duration argument to transitions
- Better support for customAttributes that are boolean or Refrences
- Small bug fixes:
Rotating swipe coordnates were wrong, ImageFilter* set/getImage APIs, KeyTriggers firing on short transitions
- CircularFlow: Easily organize objects in a circular pattern
- Carousel: added method to animate to / jump to a specific item
- 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
- 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.
- 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
- 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
ViewTransition is a new tag that enables single view animations within MotionLayout. With ViewTransition you can change a single view within MotionLayout.
<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 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
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
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"
/>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.xmlTag: 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.)
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" />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:
- Attribute motion:rotationCenterId= defines the center of rotation. (The center of the view pointed by that id)
- 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"/>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
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)” />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
Tag: Constraint, ConstraintOverrid, Motion Attributes: transformPivotTarget
transformPivotTarget sets the view pivot point to be the center of the view pointed to by the id.
Tag: KeyCycle, KeyTimeCycle
Attributes: wavePhase
Phase adjust the phase of the cycle
Tag: Transition, Motion, Constraint, ConstraintOverrid
Attributes: motionInterpolator
Transition motionInterpolator now supports spline(v1, v2, v3,...) and Schlick(x,y)
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
this can be use to set images etc.
<CustomAttribute motion:attributeName="imageResource"
motion:customReference="@drawable/ic_battery"/>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>
The spline fitting algorithms have been enhanced to continue past there end points. This allows the use of the anticipate and overshoot interpolator.
MotionHelpers can now programmatically inject keyframes or Constraintsets.
This allows motionHelpers to generate behavior using familiar KeyFrame mechanisms
Demo MotionHelper FadeMove added.
Now you can do a simple animated update of a ConstraintSet.
call updateStateAnimate(int stateId, ConstraintSet set, int duration) to animate the change.
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.
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 MotionLabel 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"
/>Works just like TransitionTo but it adds your request to a Queue if you are mid transition.