JS动画框架及案例

最新推荐文章于 2024-08-07 17:25:50 发布
最新推荐文章于 2024-08-07 17:25:50 发布
阅读量2k 收藏 11
点赞数
分类专栏： Web前端 文章标签： Javascript 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15096707/article/details/50571021
版权 

JS动画效果：
综合——运动框架 move.js
1、简单动画
    1-1、速度动画  D01_share.html
    1-2、透明度动画  D02_opacity.html
2、缓冲动画
    2-1、缓冲动画  D03_speed.html
3、多物体动画
    3-1、多物体动画  D04_morespart01.html D04_morespart02.html
    3-2、获取样式  D05_getStyle01.html D05_getStyle02.html
    3-3、任意属性值（一）  D06_anyValue.html
    3-4、任意属性值（二）
4、链式动画
    4-1、链式动画  D07_chainAnimation.html
5、同时运动
    5-1、同时运动 D08_json.html（json的介绍） D08_sametimeMove.html
    5-2、完美运动框架 move.js
6、动画案例

速度动画 D01_share.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>速度动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 200px;
            height: 250px;
            background-color: #807a62;
            position: relative;
            left: -200px;
            top: 0;
        }
        #div1 span {
            width: 20px; /* 行内元素脱离文本流后可以设置宽高*/
            height: 50px;
            background-color: aquamarine;
            position: absolute;
            left: 200px;
            top: 75px;
            text-align: center;
        }
    </style>

    <script>
        var oDiv;
        window.onload = function() {
            oDiv = document.getElementById('div1');
            /*oDiv.onmouseover = startMoveIn;
            oDiv.onmouseout = startMoveOut;*/

            oDiv.onmouseover = function() {
                //startMove(10, 0);
                startMove02(0);
            };
            oDiv.onmouseout = function() {
                //startMove(-10, -200);
                startMove02(-200);
            };
        };

        var timer=null;
        /*startMoveIn() 和 startMoveOut()方法相似，可以进行提取合成 --> startMove()*/
        /*function startMoveIn() {
            clearInterval(timer);

            timer = setInterval(function() {
                if(oDiv.offsetLeft == 0) {
                    clearInterval(timer);
                } else {
                    oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
                }
            },30);
        }

        function startMoveOut() {
            clearInterval(timer);

            timer = setInterval(function() {
                if(oDiv.offsetLeft == -200) {
                    clearInterval(timer);
                } else {
                    oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
                }
            },30)
        }*/

        function startMove(speed, iTarget) {
            clearInterval(timer);

            timer = setInterval(function() {
                if(oDiv.offsetLeft == iTarget) {
                    clearInterval(timer);
                } else {
                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                }
            },30);
        }

        //除去speed参数
        function startMove02(iTarget) {
            clearInterval(timer);

            var speed;
            if(oDiv.offsetLeft > iTarget) {
                speed = -10;
            } else {
                speed = 10;
            }

            timer = setInterval(function() {
                if(oDiv.offsetLeft == iTarget) {
                    clearInterval(timer);
                } else {
                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                }
            },30);
        }
    </script>
</head>
<body>
    <div id="div1"><span id="share">分享</span></div>
</body>
</html>
 

 

 

透明度动画  D02_opacity.html
 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透明度动画</title>
    <style>
        body,div{
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 200px;
            height: 200px;
            background: red;
            filter: alpha(opacity=30); /*基于IE*/
            opacity: 0.3; /*基于火狐、Chrome*/
        }
    </style>

    <script>
        window.onload = function() {
            var oDiv = document.getElementById('div1');
            oDiv.onmouseover = function() {
                startMove(100);
            };
            oDiv.onmouseout = function() {
                startMove(30);
            };
        };

        var timer = null;
        var alpha = 30;
        function startMove(iTarget) {
            var oDiv = document.getElementById('div1');

            //解决定时器叠加的问题
            clearInterval(timer);
            timer = setInterval(function() {
                var speed = 0;
                if(alpha > iTarget) {
                    speed = -10;
                } else {
                    speed = 10;
                }

                if(alpha == iTarget) {
                    clearInterval(timer);
                } else {
                    alpha += speed;
                    oDiv.style.filter = 'alpha(opacity='+alpha+')';
                    oDiv.style.opacity = alpha / 100;
                }
            },30);
        }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>
 

 
缓冲动画  D03_speed.html 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓冲动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 200px;
            height: 250px;
            background-color: #807a62;
            position: relative;
            left: -200px;
            top: 0;
        }
        #div1 span {
            width: 20px; /* 行内元素脱离文本流后可以设置宽高*/
            height: 50px;
            background-color: aquamarine;
            position: absolute;
            left: 200px;
            top: 75px;
            text-align: center;
        }
    </style>

    <script>
        var oDiv;
        window.onload = function() {
            oDiv = document.getElementById('div1');
            /*oDiv.onmouseover = startMoveIn;
             oDiv.onmouseout = startMoveOut;*/

            oDiv.onmouseover = function() {
                //startMove(10, 0);
                startMove02(0);
            };
            oDiv.onmouseout = function() {
                //startMove(-10, -200);
                startMove02(-200);
            };
        };

        var timer=null;

        //除去speed参数
        function startMove02(iTarget) {
            clearInterval(timer);

            timer = setInterval(function() {
                var speed = (iTarget - oDiv.offsetLeft) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(oDiv.offsetLeft == iTarget) {
                    clearInterval(timer);
                } else {
                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                }
            },30);
        }
    </script>
</head>
<body>
<div id="div1"><span id="share">分享</span></div>
</body>
</html>
 

 
多物体动画  D04_morespart01.html 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多物体动画</title>

    <style>
        ul {
            list-style: none;
        }
        ul li {
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
        }
    </style>

    <script>
        window.onload = function() {
            var aLi = document.getElementsByTagName('li');
            for(var i = 0; i<aLi.length; i++) {
                aLi[i].timer = null; //为每一个li加一个定时器
                aLi[i].onmouseover = function() {
                    startMove(this,400);
                };
                aLi[i].onmouseout = function() {
                    startMove(this,200);
                };
            }
        };

        //var timer = null;
        function startMove(obj, iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var speed = (iTarget - obj.offsetWidth) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(obj.offsetWidth == iTarget) {
                    clearInterval(obj.timer);
                } else {
                    obj.style.width = obj.offsetWidth + speed + 'px';
                }
            },30);
        }


    </script>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>
 

 
D04_morespart02.html 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多物体动画</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background: red;
            float: left;
            margin: 10px;

            filter: alpha(opacity=30);
            opacity: 0.3;
        }
    </style>

    <script>
        var ds;
        window.onload = function() {
            ds = document.getElementsByTagName('div');

            for(var i = 0; i < ds.length; i++) {
                ds[i].timer = null;
                ds[i].alpha = 30;

                ds[i].onmouseover = function() {
                    startChange(this, 100);
                };
                ds[i].onmouseout = function() {
                    startChange(this, 30);
                };
            }
        }

        function startChange(obj, iTarget) {
            clearInterval(obj.timer);

            obj.timer = setInterval(function() {
                var speed = (iTarget - obj.alpha) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(obj.alpha == iTarget) {
                    clearInterval(obj.timer);
                } else {
                    obj.alpha += speed;
                    obj.style.filter = 'alpha(opacity=' + obj.alpha + ')';
                    obj.style.opacity = obj.alpha / 100;
                }
            }, 30);
        }

    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>
 

 
获取样式  D05_getStyle01.html 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取样式</title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background: red;
            border: 2px solid #000;
            font-size: 12px;
            color: #fff;
        }
    </style>

    <script>
        var oDiv;
        window.onload = function() {
            oDiv = document.getElementById('div1');
            setInterval(function() {
                //oDiv.style.width = parseInt(getStyle(oDiv, 'width')) - 1 + 'px';
                oDiv.style.fontSize = parseInt(getStyle(oDiv, 'fontSize')) + 1 + 'px';
            }, 30);
        };

        //获取样式
        function getStyle(obj, attr) {
            if(obj.currentStyle) { //currentStyle 针对IE浏览器
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj,false)[attr]; //getComputedStyle 针对火狐浏览器
            }
        }
    </script>
</head>
<body>
    <div id="div1">font-size</div>
</body>
</html>
 

 
D05_getStyle02.html 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取样式</title>
    <style>
        ul {
            list-style: none;
        }
        ul li {
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
            border: 1px solid yellowgreen;
        }

        ul li:hover {
            box-shadow: 0 0 7px 2px #0CC;
        }
    </style>
    <script>
        var aLi;
        window.onload = function() {
            aLi = document.getElementsByTagName('li');

            for(var i = 0; i < aLi.length; i++) {
                aLi[i].timer = null;
                aLi[i].onmouseover = function() {
                    startChange(this, 400);
                };
                aLi[i].onmouseout = function() {
                    startChange(this, 200);
                };
            }
        };

        function startChange(obj, iTarget) {
            clearInterval(obj.timer);

            obj.timer = setInterval(function() {
                var icur = parseInt(getStyle(obj, 'width'));
                var speed = (iTarget - icur) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(icur == iTarget) {
                    clearInterval(obj.timer);
                } else {
                    obj.style.width = icur + speed + 'px';
                }
            }, 30);
        }

        function getStyle(obj, attr) {
            if(obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
    </script>
</head>
<body>

</body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</html>
 

 
任意属性值  D06_anyValue.html 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任意属性值</title>
    <style>
        ul {
            list-style: none;
        }
        ul li {
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
            border: 1px solid yellowgreen;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }

        ul li:hover {
            box-shadow: 0 0 7px 2px #0CC;
        }
    </style>
    <script>
        var li1, li2, li3;
        window.onload = function() {
            li1 = document.getElementById('li1');
            li2 = document.getElementById('li2');
            li3 = document.getElementById('li3');

            li1.onmouseover = function() {
                startChange(this, 'height', 400);
            };
            li1.onmouseout = function() {
                startChange(this, 'height', 100);
            };
            li2.onmouseover = function() {
                startChange(this, 'width', 400);
            };
            li2.onmouseout = function() {
                startChange(this, 'width', 200);
            };
            li3.onmouseover = function() {
                startChange(this, 'opacity', 100);
            };
            li3.onmouseout = function() {
                startChange(this, 'opacity', 50);
            };
        };

        function startChange(obj, attr, iTarget) {
            clearInterval(obj.timer);

            obj.timer = setInterval(function() {
                var icur = 0;
                if(attr == 'opacity') {
                    icur = Math.round(parseFloat(getStyle(obj, attr))*100);
                } else {
                    icur = parseInt(getStyle(obj, attr));
                }

                var speed = (iTarget - icur) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(icur == iTarget) {
                    clearInterval(obj.timer);
                } else {
                    if(attr == 'opacity') {
                        obj.style.filter = 'alpha(opacity=' + (icur + speed) + ')';
                        obj.style.opacity = (icur + speed) / 100;
                    } else {
                        obj.style[attr] = icur + speed + 'px';
                    }
                }
            }, 30);
        }

        function getStyle(obj, attr) {
            if(obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
    </script>
</head>
<body>

</body>
<ul>
    <li id="li1"><p>我是高度改变~</p></li>
    <li id="li2"><p>我是宽度改变~</p></li>
    <li id="li3"><p>我是透明度改变~</p></li>
</ul>
</html>
 

 


 
 

JS动画框架  move.js
 

 

/**
 * Created by DreamBoy on 2016/1/22.
 */
//获取对象样式，如 getStyle(obj, 'width')
function getStyle(obj, attr) {
    if(obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

//动画效果，如 startMove(obj, 'width', 200)
// fn是回调函数，如果fn有传入的话，动画结束后会执行给函数——》可以形成 链式动画
/*function startMove(obj, attr, iTarget, fn) {
    clearInterval(obj.timer);

    obj.timer = setInterval(function() {
        //1.取当前的值
        var icur = 0;
        if(attr == 'opacity') {
            icur = Math.round(parseFloat(getStyle(obj, attr))*100);
        } else {
            icur = parseInt(getStyle(obj, attr));
        }

        //2.计算速度
        var speed = (iTarget - icur) / 10;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

        //3.检测停止
        if(icur == iTarget) {
            clearInterval(obj.timer);
            if(fn) {
                fn();
            }
        } else {
            if(attr == 'opacity') {
                obj.style.filter = 'alpha(opacity=' + (icur + speed) + ')';
                obj.style.opacity = (icur + speed) / 100;
            } else {
                obj.style[attr] = icur + speed + 'px';
            }
        }
    }, 30);
}*/

//修改——> 不同属性变化的同时运行（使用json  属性值:目标值）
// startMove(ojb,{attr1:itarget1, attr2:itarget2},fn)
function startMove(obj, json, fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var flag = true;
        for(var attr in json) {
            //1.取当前的值
            var icur = 0;
            if(attr == 'opacity') {
                icur = Math.round(parseFloat(getStyle(obj, attr))*100);
            } else {
                icur = parseInt(getStyle(obj, attr));
            }

            //2.计算速度
            var speed = (json[attr] - icur) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            //3.检测停止
            if(icur != json[attr]) {
                flag = false;

                if(attr == 'opacity') {
                    obj.style.filter = 'alpha(opacity=' + (icur + speed) + ')';
                    obj.style.opacity = (icur + speed) / 100;
                } else {
                    obj.style[attr] = icur + speed + 'px';
                }
            }
        }

        if(flag) {
            clearInterval(obj.timer);
            //obj.timer = null;
            if(fn) {
                fn();
            }
        }
    }, 30);
}

 

 

 
链式动画  D07_chainAnimation.html 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链式动画</title>

    <style>
        body, ul, li{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        ul li {
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
            border: 4px solid #000;
            filter: alpha(opacity=30);
            opacity: 0.3;
        }
    </style>

    <script src="move.js"></script>
    <script>
        window.onload = function() {
            var li1 = document.getElementById('li1');
            li1.onmouseover = function() {
                startMove(li1, 'width', 400, function() {
                    startMove(li1, 'height', 200, function() {
                        startMove(li1, 'opacity', 100);
                    });
                });
            };
            li1.onmouseout = function() {
                startMove(li1, 'opacity', 30, function() {
                    startMove(li1, 'height', 100, function() {
                        startMove(li1, 'width', 200);
                    });
                });
            }
        };
    </script>
</head>
<body>
    <ul>
        <li id="li1"></li>
    </ul>
</body>
</html>
 

 
json介绍  D08_json.html 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json介绍</title>
    <script>
        //定义一个json
        var json = {
            a:12,
            b:13
        };

        //遍历json
        for(var i in json) {
            document.write(i + ":" + json[i] + "<br/>");
        }
    </script>
</head>
<body>

</body>
</html>
 

 
同时运动  D08_sametimeMove.html 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同时运动</title>
    <style>
        ul {
            list-style: none;
        }
        ul li {
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
            border: 4px solid #000;
            filter: alpha(opacity=30);
            opacity: 0.3;
        }
        ul li:hover {
            box-shadow: 0 0 7px 4px #ccc;
        }
    </style>
    <script src="move.js"></script>
    <script>
        window.onload = function() {
            var oLi = document.getElementById("li1");
            oLi.onmouseover = function() {
                startMove(oLi, {'width':400, 'height':200, 'opacity': 100}, function() {
                    startMove(oLi, {'width': 600});
                });
            };
            oLi.onmouseout = function() {
                startMove(oLi, {'width':200, 'height':100, 'opacity': 30});
            };
        }
    </script>
</head>
<body>
    <ul>
        <li id="li1"></li>
    </ul>
</body>
</html>
 

 
JS动画案例  D09_JSAnimationDemo.html 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS动画案例</title>

    <style>
        #move {
            width: 300px;
            border: 1px solid #ccc;
            margin: 0 auto;
            padding: 10px;
            overflow: hidden;
        }

        #move a {
            float: left;
            color: red;
            font-size: 10px;
            /*border: 1px solid #00CCCC;*/
            padding: 35px 30px 0 30px;
            margin: 20px 0 20px 10px;

            position: relative;
            text-decoration: none;
            line-height: 25px;
            overflow: hidden;
        }

        #move a i{
            position: absolute;
            top: 20px;
            left: 0;
            display: inline-block;
            width: 100%;
            text-align: center;
            filter: alpha(opacity=100);
            opacity: 1;
        }

        #move a:hover {
            box-shadow: 0 0 7px 4px #ccc;
        }
    </style>

    <script src="move.js"></script>
    <script>
        window.onload = function() {
            var oMove = document.getElementById('move');
            var aLi = oMove.getElementsByTagName('a');

            var k=0;
            for(var i = 0; i < aLi.length; i++) {
                aLi[i].onmouseover = function() {
                    var _this = this.getElementsByTagName('i')[0];
                    startMove(_this, {'top':-25, 'opacity': 0}, function() {
                        _this.style.top = 35 + 'px';
                        startMove(_this, {'top':20, 'opacity': 100});
                    });
                };
            }
        };
    </script>
</head>
<body>
    <div id="move">
        <a href="#"><i><img src="img/caipiao.png"></i><p>彩票</p></a>
        <a href="#"><i><img src="img/movie.png"></i><p>电影</p></a>
        <a href="#"><i><img src="img/music.png"></i><p>音乐</p></a>
        <a href="#"><i><img src="img/jiaofei.png"></i><p>缴费</p></a>
        <a href="#"><i><img src="img/licai.png"></i><p>理财</p></a>
        <a href="#"><i><img src="img/food.png"></i><p>外卖</p></a>
    </div>
</body>
</html>
 

 

 

结果演示：
 


 
 

鼠标移动到图标处，发生动画效果：
 


 
 

原素材如下：
 

  caipiao.png     movie.png     music.png     jiaofei.png     licai.png     food.png
 
 


 

                

        

        

    

  


    

      

        

            

              
                
                  葡萄干是个程序员
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
JS动画案例

				
			

			

				

					08-04
				

			

		

		

			
				
完美动画框架，能实现日常常用动画效果。

			
		

	



                

              
                



	

		

			

				
					
Animation动画实例

				
			

			

				

					01-29
				

			

		

		

			
				
Animation 动画实例，很有价值，值得参考。

			
		

	



                


  
              

                


	

		

			

				
					
使用 Vue 3、TypeScript 和 Three.js 封装3D动画框架

					
最新发布

				
			

			

				

					qq_42072014的博客
				

				

					08-07
					
					460
					
				

			

		

		

			
				
Vue 3 是Vue框架的最新版本，它引入了许多改进，包括更好的性能、更简洁的API以及新的响应性系统。通过上述步骤，我们创建了一个基于Vue 3、TypeScript和Three.js的3D动画框架。这个框架可以方便地添加、移除3D对象，并且支持自定义配置。你可以在此基础上继续扩展更多的功能，如用户交互、碰撞检测等。

			
		

	





	

		

			

				
					
animation案例

				
			

			

				

					lbs311709000127的博客
				

				

					01-29
					
					299
					
				

			

		

		

			
				
效果：



这是一个动画

代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}"/>
		<title></title>
		<style type="text/css">
			div:nth-child(1){
				width: ...

			
		

	



		

			
		



	

		

			

				
					
animation动画案例

				
			

			

				

					weixin_30745553的博客
				

				

					02-28
					
					501
					
				

			

		

		

			
				
最近一直苦恼做一个banner的进度条，原先用js改变width值，但明显卡顿。后来用了animation，超级好用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wi...

			
		

	





	

		

			

				
					
animation动画实例

				
			

			

				

					CSDN_qiange的博客
				

				

					07-08
					
					2345
					
				

			

		

		

			
				
<template>
	<view>
		<page-head :title="title"></page-head>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="animation-element-wrapper">
				<vie...

			
		

	





	

		

			

				
					
React框架教程及案例

				
			

			

				

					06-12
				

			

		

		

			
				
4. 动画效果：利用React Transition Group或React Spring实现过渡和动画效果，提升用户体验。 5. 部署应用：学习如何将React应用部署到服务器，如Netlify、Vercel或自建服务器。  通过学习这个React框架教程，你将...

			
		

	





	

		

			

				
					
react框架教程、案例及相关项目

				
			

			

				

					06-24
				

			

		

		

			
				
### React框架教程、案例及相关项目  #### 一、React框架教程  **React**是一个由Facebook开发和维护的开源JavaScript库，主要用于构建用户界面。自2013年5月正式开源以来，React因其高效的性能、易于使用的特性以及...

			
		

	





	

		

			

				
					
50款原生js案例（绝美整合）

				
			

			

				

					10-26
				

			

		

		

			
				
这个“50款原生js案例（绝美整合）”集合了作者半年的辛勤整理，包含了各种JavaScript插件和效果，旨在帮助开发者们提升技能，找到灵感。下面我们将深入探讨这些标签所代表的知识点，并对每个部分进行详细的阐述。  ...

			
		

	





	

		

			

				
					
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip

				
			

			

				

					06-04
				

			

		

		

			
				
本文将深入探讨这些技术，并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个压缩包中的webdemo-master项目，分析它们在实际应用中的作用。  首先，HTML（HyperText Markup Language）...

			
		

	





	

		

			

				
					
animation动画小实例讲解

				
			

			

				

					正在山路上的博客
				

				

					09-25
					
					304
					
				

			

		

		

			
				
使用css的animation将静态图实现动画效果


			
		

	





	

		

			

				
					
Animation 案例解释

				
			

			

				

					weixin_34034261的博客
				

				

					11-10
					
					111
					
				

			

		

		

			
				
Animation 案例解释: ------------摘自W3c  
  
过度动画类型：
　　　　　linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)        ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)        ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)    ...

			
		

	





	

		

			

				
					
animate动画案例_Flutter实现动画

				
			

			

				

					weixin_39716105的博客
				

				

					11-25
					
					447
					
				

			

		

		

			
				
对于一个前端的App来说，添加适当的动画，可以给用户更好的体验和视觉效果。所以无论是原生的iOS或Android，还是前端开发中都会提供完成某些动画的API。 Flutter有自己的渲染闭环，我们当然可以给它提供一定的数据模型，来让它帮助我们实现对应的动画效果。一. 动画API认识 动画其实是我们通过某些方式（比如对象，Animation对象）给Flutter引擎提供不同的值，而Flutter可...

			
		

	





	

		

			

				
					
CSS3之动画(animation)和四个小案例

				
			

			

				

					al654123的博客
				

				

					03-08
					
					2463
					
				

			

		

		

			
				
一、动画(animation)
1.动画概述
可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。
2.语法
1.0%是动画的开始可以用from替代，100%是动画的完成可用to替代。
2.在CSS中用@keyframes中定义动画的样式，在用选择器调用animation调用动画
3.动画是是元素从一种样式逐渐变化成另一种样式的效果。可以任意改变动画节点。
@keyframes...

			
		

	





	

		

			

				
					
JavaScript 动画案例分析

				
			

			

				

					qq937654393的博客
				

				

					03-19
					
					786
					
				

			

		

		

			
				
一、onScroll事件1.用处：是页面滚动条滚动事件，当页面滚动条滚动时候，自动触发2.从属于window对象，事件应绑定到window对象上二、scrollTop和scrollLeft1.含义： scrollTop指的是向上滚动头部高度        scrollLeft指的是向左滚动的宽度2.注意：兼容性不好，不同浏览器的scrollTop/scrollLeft属性从属对象不一chrom浏览...

			
		

	





	

		

			

				
					
CSS3animation动画-案例人物走路动画:(三)

				
			

			

				

					SenZendao的博客
				

				

					09-08
					
					3011
					
				

			

		

		

			
				
CSS3 animation动画

1、@keyframes 定义关键帧动画 
2、animation-name 动画名称 
3、animation-duration 动画时间 
4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数) 
5、animation-delay 动画延迟 
6、animation-iteration-...

			
		

	





	

		

			

				
					
Js实现动画框架

				
			

			

				

					ahuotai8429的博客
				

				

					06-19
					
					98
					
				

			

		

		

			
				
效果：
1. 同时动画
2. 链式动画

参数一： obj 是控件对象
参数二：是同时动画最终的条件，比如说{width:400,height:400} 表示同时 宽度和高度变成400px
参数三： 是链式动画的后续动画， 当动画完成json变化后，将继续进行，完成fn函数动画function startMove(obj,json,fn){clearInterval(...

			
		

	





	

		

			

				
					
css3：animation 动画详解（属性 + 案例）

				
			

			

				

					知之为知之，不知为不知
				

				

					05-05
					
					2008
					
				

			

		

		

			
				
部分css3的动画效果是在合成线程上实现的，不需要主线程介入，所以省去了重排和重绘的过程，这就大大提升了渲染效率。

			
		

	





	

		

			

				
					
JS动画框架一

				
			

			

				

					Xu_Angel的专栏
				

				

					01-22
					
					423
					
				

			

		

		

			
				
动画原理

什么是动画？让一个东西动起来呗，先从最简单的水平移动开始

 




水平匀速移动

如下所示：

让图中DIV水平移动到一个地方，就是给它一双脚，这双脚每次走1.5px。目的地是走800px 
 于是有了如下JS代码：



input type="button" value="运动到800米">
div>div>




    var inp = document.getEle

			
		

	





	

		

			

				
					
Vue.js过渡动画深度解析：案例与实战

				
			

			

				

					
				

			

		

		

			
				
Vue.js是一个流行的前端JavaScript框架，它提供了丰富的功能，包括优雅的过渡动画效果。本篇文章将深入探讨Vue.js中的过渡动画，特别是如何在实际案例中应用它们。  过渡动画是用户界面设计中一个重要的元素，它可以...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值