可控动画

最新推荐文章于 2024-03-08 10:16:31 发布
weixin_30865427
最新推荐文章于 2024-03-08 10:16:31 发布
阅读量106
点赞数
原文链接：http://www.cnblogs.com/benxiaohai-microcosm/p/6964123.html
版权
<!DOCTYPE html>
<html>
    <!--
    简述：做一个可控动画，能够根据用户输入判断是逐帧播放还是完全播放，同时也能够根据输入前进或者后退。
    要点分析：
        监听交互：单击，触摸，滚动等等
        识别临界值：位移等。临界值内逐帧并且放弃交互时回退到交互前的状态；临界值外则动画完全播放。
        动画：可在前进和后退之间切换（可通过传参）;可逐帧播放（帧可以是小动画）
        优化效率
    相关交互：
        下拉时：逐帧退和整节退
        上拉时：逐帧前进和整节前进
        放弃操作：超过临界值（动画完成）和未超过临界值（动画回退）。
    动画关键点：帧和节都可进退，同时进退皆可控。
-->

    <head>
        <meta charset="UTF-8">
        <title>可控动画</title>
    </head>
    <style>
        ul,
        li {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        ul {
            font-size: 0;
        }
        .btn-wrap{
            text-align: center;
            margin-top: 20px;
        }
        .window {
            width: 300px;
            height: 200px;
            overflow: hidden;
            margin: 60px auto;
            border: 1px solid red;
        }
        
        .canvas {
            width: 1200px;
            height: 200px;
        }
        
        .canvas img {
            height: 200px;
            width: 300px;
        }
        
        ul li {
            display: inline-block;
            width: 300px;
            text-align: center;
            background-color: greenyellow;
        }
    </style>
    <body>
        <div>
            <div class="btn-wrap">
                <button id="move">逐帧前进</button>
                <button id="single-reverse">逐帧后退</button>
                <button id="play">整节前进</button>
                <button id="reverse">整节后退</button>
            </div>
            <div class="window">
                <div class="canvas" id="main">
                    <ul>
                        <li class="item"><img draggable="false" src="img/img1.jpg"></li>
                        <li class="item"><img draggable="false" src="img/img2.jpg"></li>
                        <li class="item"><img draggable="false" src="img/img3.jpg"></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    <script>
//变量定义
        var canvas = document.getElementsByClassName('canvas')[0],
            main=document.getElementById("main"),//画布元素，也就是移动主体。
            items=document.getElementsByClassName('item'),
            item_len=items.length,
            value = false,//是否在临界值之外，true为在临界值之外，false为临界值之内。
            key=false,//鼠标是否按下
            index=0,//当前是第几节动画
            reverse = false,//节动画是否反方向播放
            single_reverse=false,//帧动画是否反方向播放
            frameTime = 13,//帧与帧之间播放间隔
            stepDistance = (300 / (3000 / 30)), //每次移动的小距离,也就是每帧位移，单位为像素。
            stepDistanceSum = 0; //移动的总距离
//交互
        //顺序播放
        document.getElementById('play').onclick = function() {
            index++;//每单击一次播放一节
            if(index>item_len){
                index=0;//如果节动画完全播放完毕，从头开始播放
            };
            reverse = false;
            value = true;
            littleMove(index);
        };
        //倒叙播放
        document.getElementById('reverse').onclick = function() {
            index--;//每单击一次后退一节
            if(index<0){
                index=0;
            };
            value = true;
            reverse = true;
            littleMove(index);
        };
        //正向移动帧，没有实际意义，用于临界值之内的帧移动
        document.getElementById('move').onclick = function() {
            value = false;
            reverse = false;
            single_reverse=false;
            littleMove(index);
        };
        //反向移动帧，没有实际意义，用于临界值之内的帧后退
        document.getElementById('single-reverse').onclick = function() {
            value = false;
            reverse = false;
            single_reverse=true;
            littleMove(index);
        };
        main.onmousedown=function(e){
            var e = e || event;
            key=true;
        };
        main.onmouseup=function(){
            key=false;
        };
        main.addEventListener('mousemove',function(e){
            var e = e || event;
            if(key){
                //鼠标被按下
                if(stepDistanceSum<50){
                    //并且小于临界值，一帧一帧播放动画
                    value = false;
                    reverse = false;
                    single_reverse=false;
                    littleMove(index);
                }else{
                    //临界值之外，播放完整节动画
                    reverse = false;
                    value = true;
                    littleMove(index);
                }
            }
        });
//动画函数
        function littleMove(index) {
//            console.log('进入littleMove函数');
            if(!value) {
                if(stepDistanceSum<=300*(item_len-1)){
                    //临界值之内，每次交互移动一次
                    if((stepDistanceSum-(300*index))<300) {//如果小于300则一直可以帧移动
                        if(single_reverse){
                            stepDistanceSum -= stepDistance;
                            canvas.style.marginLeft = -stepDistanceSum + 'px';
                        }else{
                            stepDistanceSum += stepDistance;
                            canvas.style.marginLeft = -stepDistanceSum + 'px';
                        }
                    } else {
                    }
                }else{
                    clearInterval(interval);
                }
                
            } else {
                //临界值外,小节动画一次性播放完毕
                var interval = setInterval(function() {
                    if(stepDistanceSum<=300*(item_len-1)){//未超过边界
//                        console.log('边界之内');
                        if(stepDistanceSum%300==0){
                            clearInterval(interval);
                        };
                        if(reverse) {
                            if(stepDistanceSum<0){
                                clearInterval(interval);
                            }else{
                                canvas.style.marginLeft =  +stepDistanceSum + 'px';
                                console.log(stepDistanceSum);
                                stepDistanceSum -= stepDistance;
                                console.log(stepDistanceSum);
                            }
                            
                        } else {
                            canvas.style.marginLeft = -stepDistanceSum + 'px';
                            stepDistanceSum += stepDistance;
                        }
                    }else{//超过边界，从头开始
                        clearInterval(interval);
                        stepDistanceSum=0;
                    }
                }, frameTime)
            }
        };
    </script>
</html>