1. 属性过渡动画 .animation( options )
通过设置组件的animation属性给组件添加动画过渡, 当组件的:width/height/opacity/backgroundColor/scale/ratate/translate等属性值被修改时,可以实现过渡动画效果, opations如下:
使用实例:控制器控制变量fishX和fishY的数值增加减小
不知道为什么必须设置图片的width 和 height属性才生效, 之前只设置了width 没有指定height, 动画怎么都不生效
2. 显式动画 animateTo()
通过全局函数: animateTo(options, fn) 来修改组件属性绑定的变量, 实现属性变化时的过渡效果
animateTo()函数接收两个参数, 参数1为动画参数options(与属性动画一致), 参数2为一个函数, 在函数内部去修改要做动画的组件属性关联的状态变量
3. 组件转场动画 (组件创建销毁动画)
转场动画是在组件插入和移除时的过渡动画, 通过组件的transition属性来配置
简单来说options每一项指定的都是组件 进入时起点 和 离开时终点 的状态
但是点击开始后, 元素并没有添加上转场动画 而是直接显示出来了!!
原来必须要配合第二步的显式动画 animateTo 函数使用才生效