title: animation type: references order: 4.1 version: 0.10

animation 动画

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

示例

<template>
  <div>
    <div id="test" class="test" onclick="run"></div>
  </div>
</template>
<style>
  .test { background-color: #6666ff; width: 200; height: 200; }
</style>
<script>
  var animation = require('@weex-module/animation')
  module.exports = {
    methods: {
      run: function () {
        var testEl = this.$el('test')
        animation.transition(testEl, {
          styles: {
            backgroundColor: '#FF0000',
            transform: 'translate(100px, 100px)'
          },
          duration: 0, //ms
          timingFunction: 'ease',
          'transform-origin': 'center center',
          delay: 0 //ms
        }, function () {
          console.log('animation finished.')
        })
      }
    }
  }
</script>

体验一下

API

transition(el, options, callback)

example

参数

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

transform属性的合法值:

名称描述值类型默认值示例
translate/translateX/translateY指定元素将已被移动到的新位置像素值或百分比无example
rotate指定元素将被旋转的角度，单位是度number无example
scale/scaleX/scaleY按比例放大或缩小元素number无example
  • callback {Function}：动画执行完毕之后的回调