title: animation type: references order: 3.1 version: 2.1

animation 动画

流畅且有意义的动画是一个十分有效的提升移动应用用户体验的手段，animation 模块被用于在组件上执行动画。动画可以对组件执行一系列简单的变换 (位置、大小、旋转角度、背景颜色和不透明度)。举个例子，如果有一个 <image> 组件，通过动画你可以对其进行移动、旋转、拉伸或收缩等动作。

API

transition(el, options, callback)

参数

  • el {Element}：将要执行动画的元素，例如指定动画的元素 ref 属性为 test , 可以通过调用 this.refs.test 来获取元素的引用。
  • options {Object}：描述动画过程的对象。
    • options.duration {number}：指定动画的持续时间 (单位是毫秒)，默认值是 0，表示没有动画效果。
    • options.delay {number}：指定请求动画操作到执行动画之间的时间间隔 (单位是毫秒)，默认值是 0，表示没有延迟，在请求后立即执行动画。
    • options.needLayout {boolean}：节点动画执行时是否产生布局动画即LayoutAnimation，默认值是false。
    • options.timingFunction {string}：描述动画执行的速度曲线，用于使动画变化更为平滑。默认值是 linear，表示动画从开始到结束都拥有同样的速度。下表列出了所有合法的属性：
属性名描述
linear动画从头到尾的速度是相同的
ease-in动画速度由慢到快
ease-out动画速度由快到慢
ease-in-out动画先加速到达中间点后减速到达终点
cubic-bezier(x1, y1, x2, y2)在三次贝塞尔函数中定义变化过程，函数的参数值必须处于 0 到 1 之间。更多关于三次贝塞尔的信息请参阅 cubic-bezier 和 Bézier curve.
  • options.styles {Object}：设置不同样式过渡效果的键值对，下表列出了所有合法的参数：
参数名描述值类型默认值
width动画执行后应用到组件上的宽度值length无
height动画执行后应用到组件上的高度值length无
backgroundColor动画执行后应用到组件上的背景颜色stringnone
opacity动画执行后应用到组件上的不透明度值介于 0 到 1 间的数值1
transformOrigin定义变化过程的中心点. 参数 x-aris 可能的值为 left、center、right、长度值或百分比值, 参数 y-axis 可能的值为 top、center、bottom、长度值或百分比值x-axis y-axiscenter center
transform定义应用在元素上的变换类型，支持下表列出的属性object无

transform属性的合法值:

名称描述值类型默认值
translate/translateX/translateY指定元素要移动到的位置像素值或百分比无
rotate指定元素将被旋转的角度，单位是度number无
scale/scaleX/scaleY按比例放大或缩小元素number无
rotate/rotateX v0.14+ /rotateY v0.14+指定元素将被旋转的角度，单位是度number无
perspective v0.16+观察者距离z=0平面的距离，在Android 4.1及以上有效number正无穷
  • callback {Function}：动画执行完毕之后的回调函数。注意，在0.16.0+版本后，iOS上可以获取animation是否执行成功的信息，callback中的result参数会有两种，分别是是Success与Fail，Android暂不支持。

Example

<template>
  <div class="wrapper">
    <div ref="test" @click="move" class="box"></div>
  </div>
</template>

<script>
  const animation = weex.requireModule('animation')
  const modal = weex.requireModule('modal')

  export default {
    methods: {
      move () {
        var testEl = this.$refs.test;
        animation.transition(testEl, {
          styles: {
            color: '#FF0000',
            transform: 'translate(250px, 100px)',
            transformOrigin: 'center center'
          },
          duration: 800, //ms
          timingFunction: 'ease',
          needLayout:false,
          delay: 0 //ms
        }, function () {
          modal.toast({ message: 'animation finished.' })
        })
      }
    }
  }
</script>

<style scoped>
  .box {
    width: 250px;
    height: 250px;
    background-color: #DDD;
  }
</style>

try it