bui.animate Class
常用的动画,有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
Parameters:
-
optionObject-
idString | 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();
Item Index
Methods
clear
()
chainable
清除动画
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//执行动画
uiAnimate.clear().left(200).start();delay
(
Object
-
[time]
延迟动画
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
(
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();loop
(
Object
-
[opt]
循环动画
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
(
Object
-
num
开启3D透视,景深,对旋转动画有效,同时会开启GPU硬件加速
Parameters:
-
numNumber度数
Returns:
Object:
Promise
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
(
Object
-
num
属性动画,无需start 相对transform会比较耗性能, 配合 transition使用
Parameters:
-
numNumber度数
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
(
Object
-
num
返回原来位置,只对transform有效
Parameters:
-
numNumber度数
Returns:
Object:
Promise
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//清除动画的位置
uiAnimate.reverse();reversestart
(
Object
-
num
反向动画
Parameters:
-
numNumber度数
Returns:
Object:
Promise
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
uiAnimate.reversestart();revert
(
Object
-
[callback]
返回原来位置，无动画
Parameters:
-
[callback]Function optional动画执行完触发
Returns:
Object:
Promise
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//返回原来的样子
uiAnimate.revert();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
(
Object
-
[beforeAnimate] -
[onAnimate] -
[callback]
动画链式的触发
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
(
Object
-
[callback]
清除动画并返回原来位置
Parameters:
-
[callback]Function optional动画执行完触发
Returns:
Object:
Promise
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//执行动画
uiAnimate.stop();transform
(
Object
-
action -
[callback]
transform独立动画,无需start,但要配合transition使用
Parameters:
-
actionString要执行的动画
-
[callback]Function optional动画执行完触发
Returns:
Object:
Promise
Example:
//初始化page对象
var uiAnimate = bui.animate("#page");
//执行动画
uiAnimate.transition(500).transform("translateX(-200px)";transition
(
Object
-
time -
[easing]
动画的执行时间
Parameters:
-
timeNumber动画的执行时间 单位: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
(
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();