BUI

其它版本:

API for BUI 1.5.1

Show:

bui.animate Class

常用的动画,有transform动画,链式动画,属性动画

预览地址: demo

动画配置修改
option: 设置修改参数
widget: 获取依赖的控件
origin: 修改动画原点
transition: 修改动画时间
open3D: 开启3D加速对rotate有效果

综合动画
transform: 综合动画,需要熟悉transform属性

位移动画
left: 左移动画
right: 右移动画
up: 上移动画
down: 下移动画

缩放动画
scale: 缩放动画
scaleX: 水平缩放动画
scaleY: 垂直缩放动画

旋转动画
rotate: 左移动画
rotateX: 右移动画
rotateY: 左移动画

扭曲动画
skew: 扭曲动画
skewX: 水平扭曲动画
skewY: 垂直扭曲动画

属性动画
property: 属性动画 性能差,尽量少用

Constructor

bui.animate

()

Example:

  //初始化page对象
  var uiAnimate = bui.animate("#page");

  //链式动画
  uiAnimate.left(100).down(100).start();

  //累计动画,左移动画以后下移各自100px,
  uiAnimate.left(100).start(function({

    this.down(100).start();
  }));

  //综合动画, 只执行一次,下次执行会从头开始
  uiAnimate.transform("translateX(-100px)") ==  uiAnimate.left(100).stop();

Methods

clear

() chainable

清除动画

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //执行动画
       uiAnimate.clear().left(200).start();

down

(
  • num
)
chainable

下移动画

Parameters:

  • num Number

    正数

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //链式动画
       uiAnimate.down(100).start();

left

(
  • num
)
chainable

左移动画

Parameters:

  • num Number

    正数

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //链式动画
       uiAnimate.left(100).start();

open3D

(
  • num
)
chainable

开启3D透视,景深,对旋转动画有效,同时会开启GPU硬件加速

Parameters:

  • num Number

    度数

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //需要开启3d动画才会有效
       uiAnimate.open3D().rotateY(45).start();

option

(
  • [key]
  • [value]
)
chainable

获取设置参数

Parameters:

  • [key] String | object optional

    [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数 ]

  • [value] String | number | boolean | function optional

    [ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传 ]

Example:

       //获取所有参数
        //获取所有参数
       var option = uiAnimate.option();

       //获取某个参数
       var id = uiAnimate.option( "id" );

       //修改一个参数
       uiAnimate.option( "open3D",false );

       //修改多个参数
       uiAnimate.option( {"open3D":false} );

origin

(
  • num
)
chainable

在做动画前更改原点,几种写法 left,top || 25%,75% || right 对旋转放大扭曲有效

Parameters:

  • num String

    度数

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //执行动画
       uiAnimate.origin("25%,75%").rotate(45).start();

property

(
  • num
)
chainable

属性动画,无需start 相对transform会比较耗性能, 配合 transition使用

Parameters:

  • num Number

    度数

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //清除动画的位置
       uiAnimate.transition(500).property("width","500px");

reverse

(
  • num
)
chainable

返回原来位置,只对transform有效, 暂时跟stop效果一样

Parameters:

  • num Number

    度数

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //清除动画的位置
       uiAnimate.reverse();

right

(
  • num
)
chainable

右移动画

Parameters:

  • num Number

    正数

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //链式动画
       uiAnimate.right(100).start();

rotate

(
  • num
)
chainable

旋转动画

Parameters:

  • num Number

    度数

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //链式动画
       uiAnimate.rotate(45).start();

rotateX

(
  • num
)
chainable

水平旋转动画

Parameters:

  • num Number

    度数

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //需要开启3d动画才会有效
       uiAnimate.open3D().rotateX(45).start();

rotateY

(
  • num
)
chainable

垂直伸展动画

Parameters:

  • num Number

    度数

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //需要开启3d动画才会有效
       uiAnimate.open3D().rotateY(45).start();

scale

(
  • num
)
chainable

缩放动画

Parameters:

  • num String

    示例: "2" | "2,2"

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //链式动画
       uiAnimate.scale("2,2").start();

scaleX

(
  • num
)
chainable

水平缩放动画

Parameters:

  • num Number

    示例: 2

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //链式动画
       uiAnimate.scaleX(2).start();

scaleY

(
  • num
)
chainable

垂直缩放动画

Parameters:

  • num Number

    示例: 2

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //链式动画
       uiAnimate.scaleY(2).start();

skew

(
  • num
)
chainable

扭曲动画

Parameters:

  • num String

    度数

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //执行动画
       uiAnimate.skew("10,10").start();

skewX

(
  • num
)
chainable

横向扭曲

Parameters:

  • num Number

    度数

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //执行动画
       uiAnimate.skewX(20).start();

skewY

(
  • num
)
chainable

纵向扭曲

Parameters:

  • num Number

    度数

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //执行动画
       uiAnimate.skewY(20).start();

start

(
  • [callback]
)
chainable

动画链式的触发

Parameters:

  • [callback] Function optional

    动画执行完触发

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //执行动画
       uiAnimate.left(200).down(200).start();

stop

(
  • [callback]
)
chainable

清除动画并返回原来位置

Parameters:

  • [callback] Function optional

    动画执行完触发

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //执行动画
       uiAnimate.stop();

transform

(
  • action
  • [callback]
)
chainable

transform独立动画,无需start,但要配合transition使用

Parameters:

  • action String

    要执行的动画

  • [callback] Function optional

    动画执行完触发

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //执行动画
       uiAnimate.transition(500).transform("translateX(-200px)";

transition

(
  • time
  • [easing]
)
chainable

动画的执行时间

Parameters:

  • time Number

    动画的执行时间 单位:ms

  • [easing] String optional

    动画的效果 ease-in | ease-out | ease

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //执行动画
       uiAnimate.transition(500).left(200).start();

up

(
  • num
)
chainable

上移动画

Parameters:

  • num Number

    正数

Example:

      //初始化page对象
       var uiAnimate = bui.animate("#page");

       //链式动画
       uiAnimate.up(100).start();

widget

(
  • [name]
)

获取依赖的控件

Parameters:

  • [name] String optional

    [ 依赖控件名 ]

Example:

       //获取依赖控件 
       var uiAnimateWidget = uiAnimate.widget();