《BUI：动画交互篇》——精彩动图自己做

前端

2023-12-20 14:35:00

解锁H5动画制作的秘密武器：BUI.animate

准备踏入令人惊叹的H5营销动画世界了吗？BUI.animate将成为你的动画小助手，助你轻松掌握H5动画制作技巧。让我们深入探索这个强大的动画引擎，让你释放创造力，制作出动感的交互式内容。

顺序动画：让元素一个接一个动起来

想象一下，你希望一个元素从左向右滑动，然后另一个元素从上向下移动。BUI.animate的顺序动画功能可以轻松实现这一点。只需定义每个元素的初始位置和最终位置，动画就会流畅地依次播放。

循环动画：让元素永不停歇

想要让元素不停地动起来？循环动画就是你的理想选择。无论是旋转的图形还是上下摆动的文本，BUI.animate都可以让你在循环中播放动画，让你的页面充满活力和动感。

延迟动画：让元素恰到好处地出现

有时，你希望元素在特定时间点后出现。延迟动画功能可以帮你实现这一点。只需设置延迟时间，BUI.animate就会在指定时间后播放动画，让元素以恰到好处的时机出现在屏幕上。

分步动画：让元素一步一步动起来

复杂动画也可以轻松实现！分步动画功能允许你将动画分解成多个步骤，让元素一步一步地进行变化。从简单的移动到复杂的旋转缩放，分步动画都能轻松应对。

分屏动画：让元素跨越不同屏幕

在响应式H5页面中，你可能希望元素在不同的屏幕尺寸上以不同的方式移动。分屏动画功能可以实现这一点，让你轻松定义元素在不同屏幕上的动画行为。

Transform：让元素变换自如

除了移动，BUI.animate还支持transform功能，让你对元素进行旋转、缩放和平移等变换。释放你的想象力，创造出令人惊艳的视觉效果，让你的H5动画更加引人注目。

实战演示

让我们通过一些代码示例，亲身体验BUI.animate的强大功能：

//顺序动画
BUI.use(['bui.animate'], function(Animate){
    var ani = new Animate({
        items : [{"from":{x:0},"to":{x:100}},{"from":{y:0},"to":{y:200}}]
    });
    ani.play();
});

//循环动画
BUI.use(['bui.animate'], function(Animate){
    var ani = new Animate({
        item : {"from":{x:0},"to":{x:100}},
        loop : true,
        duration : 500
    });
    ani.play();
});