数值
通过传入一个Number
类型的值或一个包含至少一个Number
的String
类型的值,来指定动画属性的数值。
如果对于需要单位的属性(例如width
)没有指定单位,则生成的动画将使用浏览器默认单位。
animate(target, { width: 100 }); // Defaults to px
接受
数字
字符串
如果已经指定了特定单位,则JS animate()
方法可以继承之前定义的单位,并且在同一目标属性上未指定单位的下一个值也会继承之前定义的单位。
animate(target, { width: '50%' }); // Uses '%'
animate(target, { width: 75 }); // Inherits '%' -> '75%'
WAAPI animate()
方法仅在以下属性中自动回退到'px'
:
- x / translateX
- y / translateY
- z / translateZ
- perspective
- top
- right
- bottom
- left
- width
- height
- margin
- padding
- borderWidth
- borderRadius
- fontSize
数值代码示例
import { waapi } from 'animejs';
waapi.animate('.square', {
x: 240, // -> 240px
width: 75, // -> 75px
rotate: '.75turn',
});
<div class="large row">
<div class="square"></div>
</div>