Show:

bui.animate Class

Module: Animate

Available since 1.7.4

常用的动画,有transform动画,链式动画,属性动画, 1.7.3 开始支持属性动画,支持同步操控动画

预览地址: 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

(
  • option
)

Defined in src/scripts/animate/bui.animate.js:12

Available since 1.7.4

Parameters:

  • option Object
    • id String | Object

      动画的id或者样式

    • [transition] String optional

      默认 "all 300ms ease-out"

    • [times] Number optional

      默认 循环次数 99999

    • [clear] Boolean optional

      默认 false (不清除为累积动画) | true

    • [zoom] Boolean optional

      是否等比缩放,默认 true (rem为单位) | false (px)

Example:

   1.7.3 以上
                                       html:
                                       <div class="moving" anim-left="200">
                                           移动的元素A
                                       </div>
                                       <div class="moving" anim-transition="1500ms" anim-right="200">
                                           移动的元素B
                                       </div>
                                    
                                       // 支持循环动画属性,anim-left,anim-right,anim-up,anim-down,anim-scale,anim-scale-x,anim-scale-y,anim-skew,anim-skew-x,anim-skew-y
                                       anim-rotate,anim-width,anim-height,anim-border
                                       
                                       // 不支持循环动画属性,anim-padding,anim-margin,anim-color,anim-background,anim-box-shadow
                                    
                                    
                                       js: 
                                       var uiAnimate = bui.animate({
                                               id: ".moving",
                                               clear: true,
                                           });
                                       
                                       // 开始属性动画 promise 
                                       uiAnimate.start();
                                    
                                    
                                    
                                       1.7.3 以下
                                        //初始化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();

delay

(
  • [time]
)
Object

延迟动画

Parameters:

  • [time] Number optional

    默认 500 。 500ms=1秒*

Returns:

Object:

Promise

Example:

      //初始化page对象
                                                       var uiAnimate = bui.animate("#page");
                                                
                                                       async function anim(){
                                                          await uiAnimate.delay(500);
                                                          await uiAnimate.start();
                                                       }
                                                
                                                       // 执行
                                                       anim()

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();

loop

(
  • [opt]
)
Object

Defined in src/scripts/animate/bui.animate.js:865

Available since 1.7.4

循环动画

Parameters:

  • [opt] Object optional

    在第几次动画的时候执行回调

    • [times] Number optional

      循环的次数,默认99999

    • [type] String optional

      动画的类型 默认 normal (轮转动画) | restart (每次0到1的动画) | reverse (反向轮转) | reversestart (每次1到0的动画)

    • [delay] String optional

      每次动画后等待多少秒 默认 0

    • [frames] Array optional

      在第几次动画的时候执行回调 格式看示例

Returns:

Object:

Promise

Example:

      //初始化page对象
                                                       var uiAnimate = bui.animate("#page");
                                                   
                                                       //执行循环2次动画
                                                       uiAnimate.loop(2);
                                                       uiAnimate.loop({
                                                          times: 5,
                                                          type: "restart",
                                                          frames: [{ loop: 1, after: null, before:null, delay:0 }]
                                                       });

none

() Object

不要动画

Returns:

Object:

Promise

Example:

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

open3D

(
  • num
)
Object

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

Parameters:

  • num Number

    度数

Returns:

Object:

Promise

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
)
Object

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

Parameters:

  • num Number

    度数

Returns:

Object:

Promise

Example:

      //初始化page对象
                                                       var uiAnimate = bui.animate("#page");
                                                   
                                                       //清除动画的位置
                                                       uiAnimate.transition(500).property("width","500px");

restart

() Object

重新开始动画

Returns:

Object:

Promise

Example:

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

reverse

(
  • num
)
Object

返回原来位置,只对transform有效

Parameters:

  • num Number

    度数

Returns:

Object:

Promise

Example:

      //初始化page对象
                                                       var uiAnimate = bui.animate("#page");
                                                   
                                                       //清除动画的位置
                                                       uiAnimate.reverse();

reversestart

(
  • num
)
Object

反向动画

Parameters:

  • num Number

    度数

Returns:

Object:

Promise

Example:

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

revert

(
  • [callback]
)
Object

Defined in src/scripts/animate/bui.animate.js:825

Available since 1.7.4

返回原来位置,无动画

Parameters:

  • [callback] Function optional

    动画执行完触发

Returns:

Object:

Promise

Example:

      //初始化page对象
                                                       var uiAnimate = bui.animate("#page");
                                                   
                                                       //返回原来的样子
                                                       uiAnimate.revert();

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

(
  • [beforeAnimate]
  • [onAnimate]
  • [callback]
)
Object

动画链式的触发

Parameters:

  • [beforeAnimate] Function optional

    动画执行前触发 1.8.0

  • [onAnimate] Function optional

    动画执行后触发 1.8.0

  • [callback] Function optional

    动画执行完触发

Returns:

Object:

Promise

Example:

      //初始化page对象
                                                       var uiAnimate = bui.animate("#page");
                                                   
                                                       //执行动画
                                                       uiAnimate.left(200).down(200).start();

stop

(
  • [callback]
)
Object

清除动画并返回原来位置

Parameters:

  • [callback] Function optional

    动画执行完触发

Returns:

Object:

Promise

Example:

      //初始化page对象
                                                       var uiAnimate = bui.animate("#page");
                                                   
                                                       //执行动画
                                                       uiAnimate.stop();

transform

(
  • action
  • [callback]
)
Object

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

Parameters:

  • action String

    要执行的动画

  • [callback] Function optional

    动画执行完触发

Returns:

Object:

Promise

Example:

      //初始化page对象
                                                       var uiAnimate = bui.animate("#page");
                                                   
                                                       //执行动画
                                                       uiAnimate.transition(500).transform("translateX(-200px)";

transition

(
  • time
  • [easing]
)
Object

动画的执行时间

Parameters:

  • time Number

    动画的执行时间 单位:ms

  • [easing] String optional

    默认 ease 动画的效果 ease-in | ease-out | ease | linear | ease-in-out

Returns:

Object:

Promise

Example:

      //初始化page对象
                                                       var uiAnimate = bui.animate("#page");
                                                   
                                                       //执行动画
                                                       uiAnimate.transition(500)
                                                       uiAnimate.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();