JavaScript

完美运动框架(新浪微博小案例)

Nick · 1月27日 · 2020年本文2696字 · 阅读7分钟780

什么是完美运动框架

animate大家都很熟悉,完美运动框架就是能将自己封装好的animate能实现想要的运动效果,可以同时改变一个对象的各种属性,并且改变之后还能够实现接着需要改变的属性,即是运动,比如一个div盒子向有运动了一段距离,还能自己运动回来回来,就像是一种链式运动,这种运动框架能解决90%网页中的运动效果。

# 完美运动框架的实现
封装animate的时候,传入三个参数:
1.el:获取的对象
2.properties:json({属性:属性值,属性:属性值,,})
3.fun:函数

json是实现同时改变el对象中多个属性的值,来实现同时运动
fun函数适用于在一次完整的运动过后,需要调用的函数,由此来实现链式运动

animate原生代码

//完美运动框架

//返回el对象css样式中的property属性值
function getStyle(el, property) {
    if (getComputedStyle) {
        return getComputedStyle(el)[property];
    } else {
        return el.currentStyle[property];
    }
}
/* 对el对象css样式中的属性值进行更改,更改的内容在properties里面,properties是一个
属性对象json,对每一个properties里的每一个对象值进行修改,并且产生由快到慢的动画
效果变化 */
function animate(el, properties,fun) {

    var property
    //产生动态效果的方法
    el.timeId = setInterval(function() {
        for ( property in properties) {
            var current;
            var target = properties[property];
            //分为两种参数,一种是透明度,范围是0到1的变化
            if (property == "opacity") {
                current = Math.round(getStyle(el, "opacity") * 100);
            }
            //另一种是像素的变化,如width , height 等
            else {
                current = parseInt(getStyle(el, property));
            }
            //属性的变化速度(由快到慢)
            var speed = (target - current) / 6;
            //ceil向上取整  floor向下取整
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            //重新设置el对象 css中的样式
            if (property == "opacity") {
                el.style.opacity = (current + speed) / 100;
            } else {
                el.style[property] = current + speed + "px";
            }           
        }

        //当运动完成之后,执行函数fun()
        if (property == "opacity") {
            if((current/100)+""===getStyle(el,property)){
                clearInterval(el.timeId);
                if(fun){
                    fun();
                }
            }

        } else {
            if((current+"px")===getStyle(el,property)){
                clearInterval(el.timeId);
                if(fun){
                    fun();
                }
            }
        }

        // console.log(getStyle(el,property));//字符串
        // console.log(current+""); //数字

    }, 20);


}

小案例 —— 新浪微博发布消息

这个小案例是要实现点击“发布”按钮,会将一个文本框的内容发送到信息框里,并且显示动态效果,先将信息下拉,后显示文字。

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{  
                margin: 0;
                padding: 0;
            }
            .ull{               
                width: 300px;
                height: 400px;
                background-color: lightblue;
                /* 超出部分显示滚动条 */
                margin: 20px auto;
                border: 5px solid #8A2BE2;
                overflow-y:auto;
                /* 让字符换行显示 */
                word-wrap:break-word;


            }
            .ull li{
                border-bottom: 1px dashed #999;
                list-style: none;
                padding: 4px;
                padding-left: 20px;
                /* overflow: hidden; */
                opacity: 0;

            }
            .txt{
                margin: 20px 10px;
            }
        </style>
        <script src="封装animate.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <textarea rows="4" cols="40" class="txt"></textarea>
        <button type="button" class="btn">发布</button>
        <ul class="ull">

        </ul>

        <script type="text/javascript">
            //获取各个元素的节点
            var Otext=document.querySelector(".txt");
            var Obtn=document.querySelector(".btn");
            var Oul=document.querySelector(".ull");

            // 点击发布按钮,就将文本框的内容插入到容器中
            Obtn.onclick=function(){
                var Oli=document.createElement("li");
                Oli.innerHTML=Otext.value;
                Otext.value="";
                if(Oul.children.length>0){
                    Oul.insertBefore(Oli,Oul.children[0]);
                }
                else{
                    Oul.appendChild(Oli);
                }
                //运动
                var iHeight=Oli.offsetHeight;
                Oli.style.height="0";
                animate(Oli,{height:iHeight},function(){
                    animate(Oli,{opacity:100})
                })
            }

        </script>

    </body>
</html>

(ps:需要先将animate封装成.js文件,然后引入)

实现效果

完美运动框架(新浪微博小案例)-左眼会陪右眼哭の博客
(ps:喜欢的话点赞关注啦 ^ _ ^)

0 条回应
在线人数:1人 来访统计
说谎
林宥嘉
隐藏