ConstraintLayout2.0一篇写不完之ViewTransition

Posted 2021-09-08 eclipse_xu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ConstraintLayout2.0一篇写不完之ViewTransition相关的知识，希望对你有一定的参考价值。

点击上方蓝字关注我，知识会给你力量

ViewTransition是ConstraintLayout2.x中的一个新标签，它可以让你在MotionLayout中指定单个视图的动画。这允许你处理复杂的动画和交互，而不必将所有可能的组合定义为ConstraintSets。

这么说有点抽象，我们来看下面这个例子。

想象一下，假如你有一个3x3的键盘，你想在键盘上的每个按钮被点击的时候为它们制作动画。在使用ViewTransition之前，你需要创建10个独立的ConstraintSets（1个用于所有处于静止状态的按钮，9个用于每个按钮的动画），同时重复9次类似的动画。当然，这是在你对一次只做一个按钮的动画感到满意的情况下，而如果你想要更复杂的动画模式，比如，两个或更多的按钮可以同时做动画，组合的数量会迅速爆炸。

相反，使用ViewTransition，你可以为你想要的按钮动画定义一个单一的通用动画（例如，按钮的倾斜效果），然后在一个特定的视图上运行它，基本上可以让你在现有的View上直接应用这个动画效果。

这也是一个重复使用特定动画的好方法（参见MotionEffect的使用，它可以利用ViewTransition的优势来实现多个元素的动画效果）。

The attributes

下面是ViewTransition的一些属性列表。

<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：用于在代码中，用motionLayout.viewTransition(id, view...)调用
motionTarget：用来定义View，或者是通过layout_constraintTag指定的View的集合
viewTransitionMode：定义了ViewTransition的三种主要模式：currentState、allStates和noState。(noState在每个视图中异步运行)
onStateTransition：允许在actionDown或actionUp上进行ViewTransition
duration：ViewTransition的持续时间，以毫秒为单位
transitionDisable：可以创建允许禁用的ViewTransition，在代码中可以用motionLayout.enableViewTransition(id)启用
pathMotionArc：已arc方式修改移动路径
motionInterpolator：修改插值器
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：如果view.getTag(id) == null，ViewTransition将不会运行
ifTagNotSet：如果view.getTag(id) !=null，则ViewTransition不会运行

Running a View Transition

有3种方法来运执行ViewTransition：

使用motion:onStateTransition="... "来自动执行
KeyTrigger可以启动视图转换
以编程方式启动从代码中启动

Launching a View transition from code

MotionLayout有几个API用于处理ViewTransition。

// Execute a ViewTransition.
// Transition will execute if its conditions are met and it is enabled
public void viewTransition(int viewTransitionId, View... view) {  }

//Enable a ViewTransition ID.
public void enableViewTransition(int viewTransitionId, boolean enable) { }

// Is transition id enabled or disabled
public boolean isViewTransitionEnabled(int viewTransitionId) { }

// Apply the view transitions keyFrames to the MotionController.
// Note ConstraintOverride is not used
public boolean applyViewTransition(int viewTransitionId, MotionController motionController) { }

ViewTransitions允许你将逻辑与动画分开。例如，如果你设置了Visibility为invisible，那么它就会被移除，但在这个移除的过程中，你就可以设计退出的动画效果。

Example 1 Simple Popup

这个动画会在点击时会放大，释放后会还原。

<ViewTransition
    android:id="@+id/pop"
    motion:duration="300"
    motion:motionTarget="@+id/button1"
    motion:onStateTransition="actionDownUp"
    motion:viewTransitionMode="noState">
    <KeyFrameSet>
        <KeyAttribute
            android:scaleX="1.5"
            android:scaleY="1.5"
            motion:framePosition="100" />
    </KeyFrameSet>
</ViewTransition>

126887330-61c2fd78-0c4a-4d07-bd60-2ae93ba3bc5a

Example 2 Fancy Pop Button

<ViewTransition
    android:id="@+id/bigPop2"
    motion:duration="3000"
    motion:motionTarget="@+id/button15"
    motion:onStateTransition="actionDownUp"
    motion:upDuration="300"
    motion:viewTransitionMode="noState">

    <KeyFrameSet>

        <KeyAttribute
            android:scaleX="3"
            android:scaleY="3"
            motion:framePosition="100" />
        <KeyTimeCycle
            android:rotation="0"
            motion:framePosition="0"
            motion:wavePeriod="4" />
        <KeyTimeCycle
            android:rotation="0"
            motion:framePosition="80"
            motion:wavePeriod="4" />
        <KeyTimeCycle
            android:rotation="20"
            motion:framePosition="99"
            motion:wavePeriod="4" />

    </KeyFrameSet>
</ViewTransition>

126887406-0dab6878-6ea9-458b-8392-364e9b73b910

Example 3 Removes the button for the current state

<ViewTransition
    android:id="@+id/gone"
    motion:duration="300"
    motion:motionTarget="@+id/button3"
    motion:onStateTransition="actionUp"
    motion:viewTransitionMode="currentState">
    <ConstraintOverride android:visibility="gone" />
</ViewTransition>