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();
Item Index
Methods
clear
()
chainable
清除动画
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//执行动画
uiAnimate.clear().left(200).start();down
(
chainable
-
num
下移动画
Parameters:
-
numNumber正数
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//链式动画
uiAnimate.down(100).start();left
(
chainable
-
num
左移动画
Parameters:
-
numNumber正数
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//链式动画
uiAnimate.left(100).start();open3D
(
chainable
-
num
开启3D透视,景深,对旋转动画有效,同时会开启GPU硬件加速
Parameters:
-
numNumber度数
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//需要开启3d动画才会有效
uiAnimate.open3D().rotateY(45).start();option
(
chainable
-
[key] -
[value]
获取设置参数
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
(
chainable
-
num
在做动画前更改原点,几种写法 left,top || 25%,75% || right 对旋转放大扭曲有效
Parameters:
-
numString度数
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//执行动画
uiAnimate.origin("25%,75%").rotate(45).start();property
(
chainable
-
num
属性动画,无需start 相对transform会比较耗性能, 配合 transition使用
Parameters:
-
numNumber度数
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//清除动画的位置
uiAnimate.transition(500).property("width","500px");reverse
(
chainable
-
num
返回原来位置,只对transform有效, 暂时跟stop效果一样
Parameters:
-
numNumber度数
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//清除动画的位置
uiAnimate.reverse();right
(
chainable
-
num
右移动画
Parameters:
-
numNumber正数
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//链式动画
uiAnimate.right(100).start();rotate
(
chainable
-
num
旋转动画
Parameters:
-
numNumber度数
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//链式动画
uiAnimate.rotate(45).start();rotateX
(
chainable
-
num
水平旋转动画
Parameters:
-
numNumber度数
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//需要开启3d动画才会有效
uiAnimate.open3D().rotateX(45).start();rotateY
(
chainable
-
num
垂直伸展动画
Parameters:
-
numNumber度数
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//需要开启3d动画才会有效
uiAnimate.open3D().rotateY(45).start();scale
(
chainable
-
num
缩放动画
Parameters:
-
numString示例: "2" | "2,2"
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//链式动画
uiAnimate.scale("2,2").start();scaleX
(
chainable
-
num
水平缩放动画
Parameters:
-
numNumber示例: 2
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//链式动画
uiAnimate.scaleX(2).start();scaleY
(
chainable
-
num
垂直缩放动画
Parameters:
-
numNumber示例: 2
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//链式动画
uiAnimate.scaleY(2).start();skew
(
chainable
-
num
扭曲动画
Parameters:
-
numString度数
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//执行动画
uiAnimate.skew("10,10").start();skewX
(
chainable
-
num
横向扭曲
Parameters:
-
numNumber度数
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//执行动画
uiAnimate.skewX(20).start();skewY
(
chainable
-
num
纵向扭曲
Parameters:
-
numNumber度数
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//执行动画
uiAnimate.skewY(20).start();start
(
chainable
-
[callback]
动画链式的触发
Parameters:
-
[callback]Function optional动画执行完触发
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//执行动画
uiAnimate.left(200).down(200).start();stop
(
chainable
-
[callback]
清除动画并返回原来位置
Parameters:
-
[callback]Function optional动画执行完触发
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//执行动画
uiAnimate.stop();transform
(
chainable
-
action -
[callback]
transform独立动画,无需start,但要配合transition使用
Parameters:
-
actionString要执行的动画
-
[callback]Function optional动画执行完触发
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//执行动画
uiAnimate.transition(500).transform("translateX(-200px)";transition
(
chainable
-
time -
[easing]
动画的执行时间
Parameters:
-
timeNumber动画的执行时间 单位:ms
-
[easing]String optional动画的效果 ease-in | ease-out | ease
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//执行动画
uiAnimate.transition(500).left(200).start();up
(
chainable
-
num
上移动画
Parameters:
-
numNumber正数
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//链式动画
uiAnimate.up(100).start();widget
(
-
[name]
获取依赖的控件
Parameters:
-
[name]String optional依赖控件名
Example:
//获取依赖控件
var uiAnimateWidget = uiAnimate.widget();