animation

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	动画执行后应用到组件上的背景颜色	string	none	example
opacity	动画执行后应用到组件上的不透明度值	介于 0 到 1 间的数值	1	example
transformOrigin	定义变化过程的中心点. 参数 x-aris 可能的值为 left、center、right、长度值或百分比值, 参数 y-axis 可能的值为 top、center、bottom、长度值或百分比值	x-axis y-axis	center center	example
transform	定义应用在元素上的变换类型，支持下表列出的属性	object	无	example

transform属性的合法值:

名称	描述	值类型	默认值	示例
translate/translateX/translateY	指定元素将已被移动到的新位置	像素值或百分比	无	example
rotate	指定元素将被旋转的角度，单位是度	number	无	example
scale/scaleX/scaleY	按比例放大或缩小元素	number	无	example

• callback {Function}：动画执行完毕之后的回调