Play BUI series one - animation control interaction: bui.animate

introduce

As early as the BUI 1.0 version, this animation controller has been added, and the transform is used to perform operations such as up, down, left, right, zoom in and zoom out, and simple control elements are animated according to steps. It was originally intended to be used in the BUI control, but later used bui.toggle to handle interactive animations, and animate was used less often, so it has been put on hold. It was not until the recent version 1.7.3 that this animation controller was transformed. After the transformation, it now supports attribute animation, synchronous animation, sequential animation, loop animation, etc., which is much more convenient.

Animation example before transformation

single animation principle

 <style>
    #animate {width:.6rem;height:.6rem;background:red;}
</style>
<div id="#animate"></div>

 /* 单个动画 */
var uiAnimate = bui.animate('#animate');
    uiAnimate.left(100).start();

Rendering preview

equivalent to

 $("#animate").css({
    transiton: "all 300ms ease 0s";
    transform:"translateX(-100px)";
})

Then use $ to control, it seems to be simpler?

BUI is proportionally scaled by default, and the width of the canvas is limited. For example, the displacement value is 750px, and the size of 640px on a small screen will exceed the screen by 110px. The value of bui.animate will be converted into a proportional rem value. In addition, The left, right and other methods operate on positive numbers, which is easy to understand the position of the animation. In addition, the value can be accumulated, the previous position will be recorded, and the bui.animate will $ . The difference in handling.

continuous animation

 // 连续动画
uiAnimate.clear().left(100).start(function () {
    this.skewX(10).start(function () {
        this.left(200).start()
    });
})

Retrofitted continuous animation

 async function init() {
    /* 动画示例,支持链式动画,最后需要执行start(); */
    var uiAnimate = bui.animate({
        id: ".box"
    });

    await uiAnimate.clear().left(100).start();
    await uiAnimate.skewX(10).start();
    await uiAnimate.left(200).start();
}
// 执行初始化
init();

Click to preview

Property animation

An animate needs to be initialized through an element. It is relatively simple to do animation, but when there are more elements, the logic is easy to be messed up. Therefore, the direction of the transformation is to allow it to support styles and attribute animations. Attribute animations can set different animation times for each element, and combine more forms of interaction through time differences.

1. Support multiple animations

 <style>
    .box {width:2rem;height:2rem;}
</style>
<div class="box success" anim-right="300"></div>
<div class="box warning" anim-right="300" anim-transition="500ms"></div>

 /* 一组动画 */
var uiAnimate = bui.animate({
    id: ".box",
    clear: true,
});
// clear 参数会清除默认的动画记录，每次都重新开始
// 开始动画
uiAnimate.start();

2. Delayed sequential animation

 <style>
    .box {width:2rem;height:2rem;}
</style>
<div class="box success" anim-right="300"></div>
<div class="box warning" anim-right="300" anim-delay="200ms"></div>

 /* 一组动画 */
var uiAnimate = bui.animate({
    id: ".box",
    clear: true,
});
// 开始动画
uiAnimate.start();

3. Reverse animation

 <style>
    .box {width:2rem;height:2rem;}
</style>
<div class="box success" anim-right="300"></div>
<div class="box warning" anim-right="300" anim-delay="200ms"></div>

 /* 一组动画 */
var uiAnimate = bui.animate({
    id: ".box",
    clear: true,
});
// 开始动画
uiAnimate.reversestart();

4. Step-by-step V-shaped animation - script control

 <style>
    .box,.box1 {width:2rem;height:2rem;}
</style>
<div class="box success"></div>

 async function init() {
    /* 动画示例,支持链式动画,最后需要执行start(); */
    var uiAnimate = bui.animate({
        id: ".box"
    });

    await uiAnimate.right(200).down(200).start();
    await uiAnimate.right(200).up(200).start();
}
// 执行初始化
init();

5. Loop animation

 <style>
    .box {width:2rem;height:2rem;}
</style>
<div class="box success" anim-right="300"></div>

 // 初始化
var uiAnimate = bui.animate({
    id: ".box"
});

// 循环5次
uiAnimate.loop(5);

These are just basic transform animations. It can also do property animation, 3d animation (requires browser support), change coordinates, etc. For more methods, please refer to the API to explore by yourself.

Comprehensive Case - Split Screen Animation

The common promotions in the circle of friends are very suitable for using this to make animations. Combined with bui.slide make a multi-page example, copy the code and save it as html to run.

 <!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>BUI</title>
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buijs@latest/lib/latest/bui.css" />

    <style>
        
        .bui-slide-fullscreen {
            background: #ddd;
        }
        .box1,
        .box {
            width: .6rem;
            height: .6rem;
            margin: .2rem;
        }
    </style>
</head>
<body>

    <div id="uiSlide" class="bui-slide">
        <div class="bui-slide-main">
            <ul>
                <li>
                    <div class="title">第一屏动画：每次进入播放一次</div>
                    <!-- 第1屏 -->
                    <div class="box success" anim-right="300"></div>
                    <div class="box success" anim-transition="500ms" anim-right="400" anim-delay="100ms"></div>
                    <div class="box warning" anim-transition="all 500ms ease-out" anim-right="500"
                        anim-delay="300ms">
                    </div>
                    <div class="box warning bui-right" anim-transition="all 500ms ease-out" anim-left="300">
                    </div>
                </li>
                <li style="display:none;">
                    <div class="title">第2屏动画:只播放一次</div>
                    <!--第2屏-->
                    <div class="box1 success" anim-right="300"></div>
                    <div class="box1 success" anim-transition="500ms" anim-right="400" anim-delay="100ms"></div>
                    <div class="box1 warning" anim-transition="all 500ms ease-out" anim-right="500"
                        anim-delay="300ms">
                    </div>
                    <div class="box1 warning bui-right" anim-transition="all 500ms ease-out" anim-left="300">
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/buijs@latest/lib/zepto.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/buijs@latest/lib/latest/bui.js"></script>
    <script>
    bui.ready(function () {
        // 业务及控件初始化
        var uiAnimate = bui.animate({
            id: ".box",
            clear: true,
        });
        var uiAnimate1 = bui.animate({
            id: ".box1",
            clear: true,
        });

        // 焦点图 js 初始化全屏:
        var uiSlide = bui.slide({
            id: "#uiSlide",
            alignClassName: "bui-align-left",   // 默认是上下左右垂直居中，这里修改为默认左对齐
            direction: "y", // 往上滑动
            fullscreen: true, // 全屏动画
            zoom: false,    // 全屏不需要等比缩放

        })
        // 每次切换的时候,根据索引改变不同动画
        uiSlide.on("to", async function (index) {
            switch (index) {
                case 0:
                    await uiAnimate.restart();
                    break;
                case 1:
                    await uiAnimate1.start();
                    break;
            }
        }).to(0);
    })
    </script>
</body>
</html>

Effect preview: https://www.easybui.com/demo/#pages/animate/slide
All sample previews: https://www.easybui.com/demo/#pages/animate/index

Comprehensive Case - Mid-Autumn Festival

Mid-Autumn Festival blessing based on BUI

The picture material comes from the network

Open link preview