Fuse手册之形状绘制与触发及动画（1）

作者: 衣咸 | 来源:发表于2016-05-06 05:37 被阅读47次

衣咸：受够了有道笔记的各种奇葩BUG和问题，现移步简书，文集属于译文+自己的心得+官方代码的验证与修正，翻译不当之处欢迎在评论中提出，一起来交流、进步。

在Fuse中，触发器是用声明的方式建立动画的。大多数基本情况是，触发器被用户或程序中的输入框响应式触发时来描绘事件。触发器能包含动画与动作这常常被用到动画和操控元素，此外也用来与JavaScript交互。
触发器基于一个节点(Node)或UI元素(Element)，在响应时监听事件和完成动画及动作。
举例来说，这儿是一个 Panel节点，附加了一个WhilePressed触发引起Panel节点90度旋转并附加一个弹性效果。

    <Panel>
    <WhilePressed>
    <Rotate Degrees="90" Duration="0.5" Easing="BounceInOut"/>    </WhilePressed>
    </Panel>

静止状态和偏移状态

默认布局和UX markup元素的配置被称为静止状态，我们要使元素动起来就要进入偏移状态了，我们是在触发器中定义偏移的。

每一个触发器都知道怎样去取消（un-apply）他自己的动画以便回归到静止状态，甚至于被中断的不规则中间动画（mid-animation）也如是。这意味着动画是完全与你的程序的逻辑层状态分离的，大大地减少了在多种类设备与屏幕尺寸上和与真实数据和用户输入时实现组合动画的复杂度。

分清向前动画和回退动画（forward and backward）

一些高级触发器动画充许分开向前动画和回退动画，为了做到这点，将回退动画包含在一个TriggerAnimation标签中，然后梆定他执行后退动画BackwardAnimation ，梆定到前一个或者父级动画。
在动画中使用BackwardAnimation 来实现用不同的释放方式来返回动画到闲置状态，如下例：

<Panel Color="#000" Width="120" Height="120">
<WhilePressed>
    <Rotate Degrees="90" Duration="0.5" />
    <!--下边加了不同于向前动画的回退动画效果-->
    <TriggerAnimation ux:Binding="BackwardAnimation" >
                <Rotate Degrees="90" Duration="0.5" Easing="BounceOut" />
    </TriggerAnimation>
    <!--回退动画效果结束-->
</WhilePressed>
</Panel>

当然，我们可以把回退效果改得更突兀，例如，我们可以把上面的<Rotate Degrees="90" Duration="0.5" Easing="BounceOut" />换成<Move Y="19" Duration="1" Easing="BounceOut" />，大家试一试吧。

注意：在BackwardAnimation中的动画是自动靠右对齐的。

动画

当一个触发器被触发的时候，动画用来指定元素以何种方式运动，一共有3对非常重要的属性用来控制一个动画的精准动作。

持续时间与回退持续时间Duration/DurationBack

动画可以有同的表现形式，当向前与向后动的时候。当一个触发器被激活，动画可认为是向前动，当触发器释放的时候，动画向后回退。持续时间被用来设置期间动画的持续时间。DurationBack可以用来设置一个不同的持续时间给回退动画。
当有多组动画的时候包含在同一个触发器里的时候，持续时间的总时间以当中最长的一个持续时间为动画的总时长。
下例中的在 WhileTrue 触发时的总持续时长是3秒，如果我们希望这些动画出现的时候是一个接着一个地出现我们可以用下面的Delay 延迟命令。

<WhileTrue>
    <Move X="10" Duration="2"/>
    <Rotate Degrees="90" Duration="3"/>
</WhileTrue>

延迟时间与回退延迟时间Delay/DelayBack

Setting the Delay property results in the actual animation being delayed by that amount of seconds. DelayBack is used to set a different delay on the backward animation. The total duration of the animation becomes the delay + the duration. The following change animator has a total duration of 7 seconds. It waits 5 seconds after being activated and then animates its target element over 2 seconds.

<Change Delay="5" Duration="2" someElement.Height="100"/>

释放与回退释放Easing/EasingBack

Fuse有一个标准的释放动作库，释放动作用来控制一个动画在结束时通过什么方式结束，默认的释放动作是线性方式Linear。线性释放方式时，动画在他的整个持续过程当中用的是同样的速度。但这常常会让人觉得有些假和不自然，要想让人觉得自然的话，我们可以改变释放的方式为QuadraticInOut：

<Change Easing="QuadraticInOut" Duration="2" someElement.Property="SomeValue"/>

这个动画将全程将慢慢地开始，中间变快，然后在结束时再次变慢。
所有的释放动作定义如下：
线性Linear
二次方Quadratic
立方式Cubic
四次式Quartic
五次式Quintic
正弦运动Sinusoidal
指数式Exponential
循环式Circular
橡皮圈Elastic
倒退Back
弹跳Bounce

上边的每个动作都有三种不同的应用：
[easing]In
[easing]Out
[easing]InOut
给动画指定一个释放动作可按如下方式：

<Move Easing="CubicIn" X="5" Y="10" Duration="0.5"/>
<Scale Easing="BounceOut" Factor="1.5" Duration="0.2"/>
<Rotate Easing="BounceOut" Degrees="10" Duration="0.4"/>

改变Change

当容器的触发器激活的时候，Chang临时地变更属性的值，如果需要永久性地更改一个值可使用Set 命令。
这里的Target 属性指的是我们想要做的动画的属性，这里的Value属性值是动画的结果的值。
注意：你能使用和单元匹配的目标原始单元一样长的值来指定单元 Units 的值

因为设置一个目标属性和值的操作非常常用，UX有一种特别的语法来处理，来代替下边的做法：
<Change Target="target.Property" Value="Value"/>
可以简单地写为如下语法：
<Change target.Property="Value"/>
Change 动画能被用到几乎所有的动画的属性上（下边的官方示例不能直接调试，需要修改才能运行，<WhilePressed>为加入的代码。）

<Panel ux:Name="somePanel" Color="Red" />
 <WhilePressed>
<Change somePanel.Opacity="0"/>
<Change somePanel.Color="Blue" Duration="0.3"/>
<Change somePanel.Visibility="Collapsed"/>
 </WhilePressed>

??????暂时没能理解
有一个命令也能执行修改属性的功能，像是 Width、Height、Margin，但是因为这些属性可以影响全部的UI图层，所以在结束这些动画时在性能方面会有很大的牺牲，在与图层交互方面其实是有更有效的办法的，详情请参看LayoutAnimation and MultiLayoutPanel 章节。

循环Cycle

Cycle循环连续不断地在给定的两个频率值之间运动(为了看到效果我们把Panel布局块用红色标出)。
衣咸注：截止到20160503Cycle又加入了新的属性 Waveform，其值为Sawtooth？?这里没测试出具体的效果。
Cycle gains the Waveform option. Of particular interest is Sawtooth which animates in one direction in a linear fashion

<Panel  Color="Red">
    <Translation ux:Name="someTranslation" />
    <WhilePressed>
        <Cycle Target="someTranslation.X" Low="-20" High="20" Frequency="2" />
    </WhilePressed>
</Panel>

同样，你也可以指定一个持续时间来控制动画的长度，用Duration。

转换动画Transform animators

转换动画应用转换动作到元素上，他们并不影响到图层因此保证了动的速度。
所有的转换动画接收一个目标属性的选项指示着将要改变的是哪一个元素。

移动Move

Move 动画常常用来移动一个元素，Move 命令不会影响到图层，被转换的元素仅仅是从他原来的位置发生偏移。

<Move X="50" />

当被触发，上例的元素将会沿X轴向移动50点距离。

相对位移

你可能期望着元素元素移动时基于他自身的尺寸或者说是其他元素的尺寸。想要达到这个想法的话我们可以用 RelativeTo属性，如下例:
<Move X="0.5" RelativeTo="Size" />
当被触发时，这里元素将沿X轴移动到相对他自身一半的宽度。
相对位移RelativeTo支持下面的这些值：

Local(默认): 沿X或Y轴移到到设定的数值；
尺寸Size: 移动到设定的数值乘以元素自身的尺寸，因此如果 X="1" 的话，将沿X轴移动元素到其自身整个宽度的距离。
父级尺寸ParentSize: 同上，是移动时基于尺寸，只不过是基于父级的；
PositionChange: 用来响应布局动画命令 LayoutAnimation ，用来移动元素基于在父元素的位置的内部；to move the element by the amount of change in position within it's parent；
WorldPositionChange: 用来响应布局动画命令 LayoutAnimation 用来移动元素的改变是基于全局的展示区；to move the element by the amount of change in position relative to the entire display.
键盘Keyboard: 移动元素相对于键盘的尺寸；Moves the element relative to the size of the keyboard.

RelativeNode 属性可以让我们移动一个元素时相对于其它元素。在这种情况下的话你就只能使用下面的几种 RelativeTo 模式了：

尺寸Size: 是以同样的方式工作，他将/可以没有RelativeNode，但会- - 测量 RelativeNode 的尺寸来替代；
父级尺寸ParentSize: 同上只是测量相对的元素的父级元素的尺寸来替代；
PositionOffset: 移动元素用在同样的位置当元素被指定为相对节点时RelativeNode；in the same position as the element specified by RelativeNode. 衣咸注：？？待测试——The offset is measured as the difference in ActualPosition between the two elements.
TransformOriginOffset: 类似上面 PositionOffset的机制，但是用测量转换源TransformOrigin的差异来代替；but instead measures the difference in TransformOrigin.

移动的全过程相当于在元素上增加一个 Translation ，然后使用 Change 运动到他的 X and Y 轴值。下面两例实现的是同样的效果：

<Panel  Color="Red">
    <WhilePressed>
        <Move X="100" Duration="0.2"/>
    </WhilePressed>
</Panel>

<Panel  Color="Red">
    <Translation ux:Name="someTranslation"/>Transition
    <WhilePressed>
        <Change someTranslation.X="100" Duration="0.2"/>
    </WhilePressed>
</Panel>

比例Scale

比例Scale 的机制类似 Move 除了他按比例来缩放元素。注意，比例命令没有真正地改变元素的尺寸大小，这意味着处于静止状态的 UI布局不会受到影响，而且保证了动画的最佳速度。
你可以使用因子Factor属性，沿着所有的轴线，按比例来缩放一个元素，两者各选其一，你也可以基于全局轴线缩放一个元素 on a per-axis basis使用微量Vector或 X, Y, and Z.
<Scale Factor="2" Duration="0.4"/>
衣咸注：我们不得不说官方上述这个例子如果拿到上面的例子中去试会完全看不出效果，但如果改成Factor = 0.2立竿见影，说白了就是一缩放效果。
Scale 能被用到引用 RelativeTo 属性的一些相关地方，有两个选项如下：

尺寸更改SizeChange - 比例涉及到在元素被相对节点 RelativeNode 的属性所指定尺寸里改变；scales relative to the change in size of the element specified by the property.
尺寸因子SizeFactor - 比例基于引用自另一个元素的因子, 通常是用相对节点RelativeNode来指定。specified by RelativeNode. 因子数值为1的话将会使用基于相对节点RelativeNode同样的尺寸，如果是0.5的话，那就是一半的尺寸了，以此类推。

辐射Rotate

辐射Rotate rotates旋转一个元素，这等于增加一个 Rotation 到元素并用使用改变命令Change使他动起来。

<Panel Color="Red" >   
    <WhilePressed>
        <Rotate Degrees="90" Duration="0.5"/>
    </WhilePressed>
</Panel>

使用角度 Degrees 属性旋转元素是围绕Z轴，同样的，你也可以使用DegreesX、DegreesY或DegreesZ来指定元素基于指定的轴来旋转。

调整大小Resize

衣咸注：待重新测试？？？？？？？

当与LayoutAnimation结合一起使用时，Resize允许你推动元素的尺寸：

<Resize RelativeTo="SizeChange" Duration="0.5" Easing="CircularInOut" />

Resize有两个选项给RelativeTo使用：

SizeChange - resizes relative to the change in size during a LayoutAnimation.
Size - resizes relative to the size of the element specified by RelativeNode.

连续旋转Spin

Spin continuously rotates an element, given a Frequency measured in full rotations per second.

<Panel  Color="Red">
    <WhilePressed>
        <Spin Frequency="2" />
    </WhilePressed>
</Panel>

像 Cycle一样，你也可以指定一个持续时间来控制动画的时长。

倾斜Skew
Skew 允许你控制一个元素做一定角度的倾斜运动。

<Panel Color="Red">
    <WhilePressed>
       <Skew DegreesX="30" Duration="0.4"/>
    </WhilePressed>
</Panel>

你可以使用DegreesX和DegreesY来改变倾斜轴心，或者DegreesXY和XY来基于两个轴心 to skew on both axes 在角度或弧度。

吸引效果Attractor

吸引效果Attractor标签用来实现更多的自然性的移动效果到动画中，他的执行有点像中间人，相对于动画与他的目标，一个Attractor 将连续不断地推动目标朝着设定值运动，使用一个简单的仿物理学的形式。我们能结合这个形式到动画，并使用吸引效果的Value 属性来设定数值。

<Panel ux:Name="somePanel" Color="Red">
    <Translation ux:Name="someTranslation"/>
    <Attractor ux:Name="someAttractor" Target="someTranslation.X"/>
    <WhilePressed>
        <Change someAttractor.Value="100"/>
    </WhilePressed>
</Panel>

关键帧Keyframes

现在假设情况是我不希望动画简单地从A点运动到B点，或者说更希望指定若干个阶梯状效果时，我们可以使用keyframes标签（可改成如下代码调度，但效果并不明显）。

<Panel Color="Red">
<WhilePressed>
<Move RelativeTo="ParentSize">
    <Keyframe X="10" Time="0.5"/>
    <Keyframe X="15" Time="1"/>
    <Keyframe X="5" Time="2"/>
</Move>
</WhilePressed>
<Panel>

这个Move 移动动画将首先水平移动10点距离持续0.5秒，然后从10移动点到15点持续0.5 second。最后，他将从15点移动5点持续1 second。这儿有一个使用关键帧到Change标签的例子：

<Page>
    <SolidColor ux:Name="background" Color="#f00"/>
    <ActivatingAnimation>
        <Change Target="background.Color">
            <Keyframe Value="#0f0" TimeDelta="0.25"/>
            <Keyframe Value="#f00" TimeDelta="0.25"/>
            <Keyframe Value="#ff0" TimeDelta="0.25"/>
            <Keyframe Value="#0ff" TimeDelta="0.25"/>
        </Change>
    </ActivatingAnimation>
</Page>

上面这个例子就很明显，也很好理解了，这次我们用的是TimeDelta来代替的Time，使用TimeDelta我们可以指定时间作为一个相对项来代替绝对时间，这意思是关键帧事件的命令，但它让我们理解关键帧在项中时间轴上的持续时间来替代它们的绝对时间。
衣咸注：好吧，这里不好翻译，留着下次理解完整了再写？？？？？？？
This means that the order of the keyframes matter, but it lets us reason about the keyframes in terms of their duration instead of their absolute time on the timeline.

空白动画Nothing

对于一个触发器Trigger来说所有的动画都共享或者说是基于一个普通的时间轴，当最后一个动画的动作完成时这个时间轴会结束。某些情况下，你可能想要人为地延长时间轴，这就可以通过使用Nothing空白动画来实现了，逻辑上来说，它就是一个设定了长度length的空白动画，逼着时间轴留出Nothing设定长度的持续时间。

<Nothing Duration="1" />