发布时间： 2015-07-01 10:35
最新稳定版中动画增加了新功能
（是的，新功能早就在开发版里了，但是没进稳定版是不能写教程的，我也想让大家早点学会新功能，可是代码过早流传开会导致不明真相的制作者辛辛苦苦做完主题发现在稳定版上不能用... ）
1. 动画控制命令支持播放参数
value内容：
play，从头播放
pause， 暂停
resume，从当前位置继续播放
play(startTime,endTime,loop,delay)
这个命令比较复杂，有4个参数，都支持表达式
第一二个参数表示控制动画开始时间和结束时间，
loop表示是否循环播放，默认为0，需要写数字0,1 或者数值表达式，如果为0表示只播放一遍就停止
delay表示是否支持delay，默认false，需要写数字0,1 或者数值表达式
例如： play(100,500,1,1)
支持只写前面的参数，后面的参数可忽略:
play(100) 从time 100开始播放到结束，不循环播放
play(100, 500) 从time 100开始播放到500，停止
play(100,500,1) 从time 100开始播放到500，循环播放
2. 动画支持缓动类型
缓动就是让动画不那么死板，加上各种加速度，运动效果会比较真实，具体大家可以百度一下。
缓动效果速查表（这里的缓动名字和MAML里不太一样，注意别混淆了）：
http://easings.net/zh-cn#
动画关键帧增加了两个属性：easeType和easeExp
easeType的值有以下几种
BackEaseIn
BackEaseOut
BackEaseInOut
BounceEaseIn
BounceEaseOut
BounceEaseInOut
CircEaseIn
CircEaseOut
CircEaseInOut
CubicEaseIn
CubicEaseOut
CubicEaseInOut
ElasticEaseIn
ElasticEaseOut
ElasticEaseInOut
ExpoEaseIn
ExpoEaseOut
ExpoEaseInOut
QuadEaseIn
QuadEaseOut
QuadEaseInOut
QuartEaseIn
QuartEaseOut
QuartEaseInOut
QuintEaseIn
QuintEaseOut
QuintEaseInOut
SineEaseIn
SineEaseOut
SineEaseInOut
其中BackEase可以带1个参数，overshot
ElasticEase可以带2个参数，priod和amplitude
参数为常数，比如BackEaseIn(1.5) ElasticEase(2,3)
具体效果大家可以试一下
最简单的例子：
<Image src="1.png" x="200" y="500">
<PositionAnimation>
<Position y="0" time="0" easeType="QuadEaseOut"/>
<Position y="-200" time="150" easeType="BounceEaseOut"/>
<Position y="0" time="550"/>
</PositionAnimation>
</Image>
easeExp为表达式，引用一个内置变量#__ratio,可以自定义缓动函数
比如 easeType="QuadEaseIn" 也可以用 easeExp="#__ratio*#__ratio" 来实现
当有easeExp时，easeType不起作用
属性作用于从该帧到下一帧，最后一帧没用
附上demo：
bounce实现了类似v6锁屏时间弹跳动画
easeType和easeExp分别用两种方式来实现BackEaseIn
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<font face="Arial">
<Lockscreen screenWidth="720" framerate="60">
<Var name="bounce">
<VariableAnimation loop="false" initPause="true">
<AniFrame value="1" time="0" easeType="QuadEaseOut"/>
<AniFrame value="0" time="150" easeType="BounceEaseOut"/>
<AniFrame value="1" time="550"/>
</VariableAnimation>
</Var>
<Var name="easeType">
<VariableAnimation loop="false" initPause="true">
<AniFrame value="1" time="0" easeType="BackEaseIn"/>
<AniFrame value="0" time="1000" easeType="BackEaseIn"/>
<AniFrame value="1" time="2000"/>
</VariableAnimation>
</Var>
<Var name="easeExp">
<VariableAnimation loop="false" initPause="true">
<AniFrame value="1" time="0" easeExp="#__ratio*#__ratio*((1.70158 + 1)*#__ratio-1.70158)"/>
<AniFrame value="0" time="1000" easeExp="#__ratio*#__ratio*((1.70158 + 1)*#__ratio-1.70158)"/>
<AniFrame value="1" time="2000"/>
</VariableAnimation>
</Var>
<Button x="100" y="1140" w="120" h="120" alignChildren="true">
<Circle x="60" y="60" r="60" strokeColor="#ffffff"/>
<Text x="60" y="60" align="center" alignV="center" textExp="'bounce'" size="35" color="#ffffff"/>
<Triggers>
<Trigger action="up">
<Command target="easeType.animation" value="play(0,0)"/>
<Command target="easeExp.animation" value="play(0,0)"/>
<Command target="bounce.animation" value="play"/>
</Trigger>
</Triggers>
</Button>
<Button x="300" y="1140" w="120" h="120" alignChildren="true">
<Circle x="60" y="60" r="60" strokeColor="#ffffff"/>
<Text x="60" y="60" align="center" alignV="center" textExp="'easeType'" size="35" color="#ffffff"/>
<Triggers>
<Trigger action="up">
<Command target="bounce.animation" value="play(0,0)"/>
<Command target="easeExp.animation" value="play(0,0)"/>
<Command target="easeType.animation" value="play"/>
</Trigger>
</Triggers>
</Button>
<Button x="500" y="1140" w="120" h="120" alignChildren="true">
<Circle x="60" y="60" r="60" strokeColor="#ffffff"/>
<Text x="60" y="60" align="center" alignV="center" textExp="'easeExp'" size="35" color="#ffffff"/>
<Triggers>
<Trigger action="up">
<Command target="easeType.animation" value="play(0,0)"/>
<Command target="bounce.animation" value="play(0,0)"/>
<Command target="easeExp.animation" value="play"/>
</Trigger>
</Triggers>
</Button>
<Circle x="360" y="100+(#bounce+#easeType+#easeExp)*200" r="60" strokeColor="#ffffff" fillColor="#ffffff"/>
<Button name="unlocker" x="300" y="1000" w="120" h="120" alignChildren="true">
<Circle x="60" y="60" r="60" strokeColor="#ffffff"/>
<Text x="60" y="60" align="center" alignV="center" textExp="'unlock'" size="35" color="#ffffff"/>
<Triggers>
<Trigger action="up">
<ExternCommand command="unlock"/>
</Trigger>
</Triggers>
</Button>
</Lockscreen></font>
3. Animation新属性
initPause 动画初始时停止，直到调用播放命令才开始播放
loop 是否循环，默认为true， loop="false" 就不用写原来的最后一个time="1000000000000"的项目了
例如：
<Var name="rl_x">
<VariableAnimation initPause="true" loop="false">
<AniFrame value="#rl_x1" time="0" />
<AniFrame value="#rl_x2" time="300" />
</VariableAnimation>
</Var>
新的动画tag，原来的Animation tag比较难记，新的不管什么动画类型内部tag都可以用Item，属性只有一个值时可以用value属性(比如Rotation的angle)，属性多个值时用原来的属性名（比如Position 的x y） 兼容之前的tag语法
<RotationAnimation loop="false">
<Item value="0" time="0" easeType="ElasticEaseInOut" />
<Item value="360" time="1000" />
</RotationAnimation>
<VariableAnimation initPause="true" loop="false">
<Item value="#rl_x1" time="0" />
<Item value="#rl_x2" time="300" />
</VariableAnimation>
新增Scale动画
<ScaleAnimation loop="false">
<Item value="0" time="0" easeType="ElasticEaseOut" />
<Item value="1" time="1000" />
</ScaleAnimation>