加载中...

1.6.4 动画

提要

weex版本 >= 0.4

一系列的动画接口

API

transition(node, options, callback)

参数

  • node(Node): 动画将要作用的元素.
  • options(object): 过渡效果的属性项.
    • styles(object): 给不同样式的过渡效果指定键值对.
      • color(string): 动画效果完成时指定元素的颜色.
      • transform(object): transform方法应用在指定元素上，支持传参.
      • translate/translateX/translateY(string): 转换元素到新的坐标，数值的单位可以是px或百分比.
      • rotate(string): 角度单元.
      • scale(string): 按比例放大或缩小元素.
    • duration(number): 定义一个动画完成所需多少毫秒，默认值为0 即不会有动画效果.
    • timingFuncion(string): 通常用来描述过渡期间设置的样式值被执行的效果，默认值是linear也可以是ease-in、ease-out、ease-in-out、linear 、cubic-bezier(x1, y1, x2, y2)其中之一.
    • delay(number): 在动画开始前等待的毫秒数，默认值是0.
    • transform-origin(string): 缩放和旋转的中心，取值可以是xpx，ypx 或者关键字left、right、bottom、top、center.
  • callback: 动画效果完成后的回调函数.

示例 


 <template>
      <div class="ct">
        <div id="test"></div>
      </div>
    </template>

    <script>
      module.exports = {
        ready: function () {
          var animation = require('@weex-module/animation');
          var testEl = this.$el('test');
          animation.transition(testEl, {
            styles: {
              color: '#FF0000',
              transform: 'translate(1, 1)'
            },
            duration: 0, //ms
            timingFunction: 'ease',
            'transform-origin': 'center center', //中间有连字符，最好加上影号
            delay: 0 //ms
          }, function () {
            nativeLog('animation finished.')
          })
        }
      }
    </script>
还没有评论.