HTML动画（三）画卷展开

最新推荐文章于 2024-02-20 08:30:00 发布

$Win_D

最新推荐文章于 2024-02-20 08:30:00 发布

阅读量533

点赞数

文章标签： html 前端 javascript css html5

本文链接：https://blog.csdn.net/qq_38380311/article/details/131511304

版权

该文章介绍了一个利用HTML5的新特性requestAnimationFrame创建画卷展开动画的方法。通过控制左右DIV的left和right属性，实现平滑的动画效果。requestAnimationFrame比setTimeout和setInterval更适合处理高帧率的动画，如2Dcanvas和WebGL动画。代码示例展示了如何在HTML和JavaScript中实现这一动画效果。

摘要由CSDN通过智能技术生成

HTML动画（三）画卷展开

动图展示：
源码资源
画卷展开
HTML画卷展开动画原理
通过HTML5新特性requestAnimationFrame控制左右DIV的left,right值实现动画；核心功能requestAnimationFrame会自动随着屏幕的刷新频率自动执行，相比于setTimeout()、setInterval()，它可以更好的服务于2Dcanvas动画、WebGL动画等方面；
代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    #maskBox {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }
    /* 父盒子 */
    #maskMoveLeft,#maskMoveRight {
        position: absolute;
        z-index: 99;
        height: 100%;
        overflow: hidden;
        width: 50%;
    }
    #maskMoveLeft {
        left: 0;
    }
    #maskMoveRight {
        right: 0;
    }

    /* 子盒子 */
    #mask_left,#mask_right{
        width: 100%;
        height: 100%;
        position:absolute;
        top: 0;
    }
    #mask_left {
        left: 0;
        background: url(images/left.png) no-repeat center;
        background-size: 100%;
    }
    #mask_right {
        right: 0;
        background: url(images/right.png) no-repeat center;
        background-size: 100%;
    }
    /* 图片 */
    #maskImg_right {
        position: absolute;
        z-index: 99;
        height: 100%;
        left: 0;
    }
    #maskImg_left {
        position: absolute;
        z-index: 99;
        height: 100%;
        right: 0;
    }

    #contantMain{
        width: 100%;
        height: 100%;
        background: #ccc;
        position: absolute;
        z-index: 9;
    }
    </style>
</head>
<body>
    <div id="contantMain">内容</div>
    <div id="maskBox">
        <div id="maskMoveLeft">
            <img id="maskImg_left" src="./images/mask.png" />
            <div id="mask_left"></div>
        </div>
        <div id="maskMoveRight">
            <img id="maskImg_right" src="./images/mask.png" />
            <div id="mask_right"></div>
        </div>
    </div>

    <script  type="text/javascript">
         // 画面展开
        var bodyW = 1920;
        var maskMove = null,progress = 0;
        var leftParent = document.getElementById('maskMoveLeft'),
            leftChild = document.getElementById('mask_left'),

            rightParent = document.getElementById('maskMoveRight'),
            rightChild = document.getElementById('mask_right');
        function render() {
            progress += 15; //修改图像的位置
            //  左侧
            // 父框右移动
            leftParent.style.left = -(progress)+'px';
            // 子框左移动
            leftChild.style.left = progress+'px';

            // 右侧
            // 父框右移动
            rightParent.style.right = -(progress)+'px';
            // 子框左移动
            rightChild.style.right = progress+'px';

            // 结束运动
            if (progress >= bodyW/2) {
                //结束 清除dem
                leftParent.remove();
                rightParent.remove();
                window.cancelAnimationFrame(maskMove);
                maskMove = null;
                return;
            }
            maskMove = window.requestAnimationFrame(render);
        }
       
       // 进入页面后延时开启动画展示
       setTimeout(function(){
            render();
       },1000)
    </script>
</body>
</html>

$Win_D

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML动画（三）画卷展开

通过HTML5新特性requestAnimationFrame控制左右DIV的left,right值实现动画；核心功能requestAnimationFrame会自动随着屏幕的刷新频率自动执行，相比于setTimeout()、setInterval()，它可以更好的服务于2Dcanvas动画、WebGL动画等方面；HTML画卷展开动画原理。
复制链接

扫一扫