ANIMATION › TWEEN PARAMETERS
SINCE 1.0.0

Tween parameters

这组参数决定动画怎么播放:多久开始、跑多快、怎么缓动、循环几次、结束时停在哪…
xjs(target).animate({...}) 里,它们跟“要动的属性”写在同一个对象里。

核心参数一览

支持的常用项:durationdelayendDelayeasingdirectionloopautoplayfill。 其中 easing 还支持 spring(对象形式)。

Quick overview
xjs('.dot').animate({ x: '18rem', duration: 900, delay: 120, easing: 'ease-out', direction: 'alternate', loop: 2, endDelay: 200, fill: 'forwards' });
<div class="lane"> <div class="meta">...</div> <div class="dot"></div> </div>
.dot { width: 16px; height: 16px; border-radius: 4px; background: var(--highlight-color); }
.dot.orange { background: var(--accent-color); }
.dot.gray { background: #666; }
这组最想让你记住的点:
1) 参数和属性写在同一个对象里(上面代码里 x 是属性,其余是播放参数)。
2) 不会写也没关系:先只写 duration + easing,就已经很好玩了。
3) 想要“弹簧手感”?把 easing 写成对象即可(后面有 spring 专门页面)。
默认
duration: 900 ease-out
更慢
duration: 1600 ease-in-out
更“复读机”
loop: 3 alternate
Previous
Next