jquery的animate({})动画整理

时间:2021-09-19 09:43:07

在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋。

什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动画的基础是时间效果,在规定的时间内完成什么效果。动画最关键的一点还是根据人类的视觉习惯而来,动的东西往往是心灵捕捉的对象。抓住用户的眼光,以动画为基础宣传自己迫切想表达的并且美化丰富界面内容,也算是动画的内涵了。

下面提到的是使用jQuery如何实现动画效果,动画的要素是动,move当然有需要对css的position属性进行一定的了解。然后就是时间参数,时间是确定动画效果的基础,然后就是运动轨迹,运动轨迹的确定就来源于今天我们学到的animate({}),不得不提的是jQ之所以盛行到今天还是有很多可取的功能,不单单是对于选择器的使用,其他工具函数和动画方法也很强大,基本上你能看到的网页动画效果它都可以帮助你实现。

下面先附上一个例子,写的很简单,新手制作有高手请斧正,谢谢!

html:

<p>点击动画</p>
<div class="ha">enheng</div>

css:

<style type="text/css">
p {
    background-color:rgba(240,210,210,1.00);
    width:70px;
    height:20px;
}
.ha {
    width:100px;
    height:100px;
    background-color:rgba(53,178,231,1.00);
    position:relative;
}
.cur {
    background-color:rgba(83,148,236,1.00);
}
.cur1  {
    background-color:rgba(37,213,23,1.00);
}
.cur2 {
    background-color:rgba(47,44,53,1.00);
}
</style>

jQ代码:

<script type="text/javascript" src="jq/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
    var ppap = $("p");
    var ddad = $(".ha");
    var i = 0;
    var m =100;
    var n =10;
    function My(i){
        ddad.animate({
            "left":m*i,
            "border-radius":n*i,
            });
        if(i>2,i<3){$(".ha").removeClass("cur2").addClass("cur");}
        else if(i>3,i<4){$(".ha").removeClass("cur").addClass("cur1");}
        else{$(".ha").removeClass("cur1").addClass("cur2");};
            };
    $("p").on("click",function (){
        i+=1;
        if(i>5){i=0};
        My(i);
        });
    timer = setInterval(function(){
        $("p").trigger("click").css("background","red");
        },1000);
    $(".ha").stop(true,true).mouseover(function (){
        clearInterval(timer);
        });
    $(".ha").stop().mouseout(function(){
        timer = setInterval(function(){
        $("p").trigger("click").css("background","red");
        },500);
        })
})
</script>

ps:首先我们想设计怎样的动画,这里简单举例,那就是点击p标签,然后下面的Div标签会向右移动,具体的是每次移动100像素移动5次,然后在加载完成后设置了setInterval()让其可以自动开始,并且设置了条件,让他能够循环开始,下面我们拆解一下代码。

首先:定义了我们需要的参数ppap和ddad,别想多了我很时尚的,嗯哼,ppap,好的继续,然后我们定义了全局常量和变量,常量n/m变量i;

其次:我们新定义了一个函数My(),让他帮我们做一件事,什么事情呢,那就是ddad即Div标签的运动轨迹,animate({})。里面完成两件事left和border-radius两个属性值发生变化。里面有疑问请百度一下,谢谢。定义好之后,在adimate中可以设置动画的完成事件,这里我们并没有使用这个时间而是后面我们对其新建的定时器。

然后:我给P标签绑定一个点击事件,在里面我设置了变量的自动增加。和if(){}条件函数,让变量i值不超过5,然后这样就会让我们的变量循环的动起来。

最后:给自定义的定时器绑定一个函数,帮我们做的事情呢,就是在我们不手动去点击p标签能够自动开始,然后调用trigger()帮助我们去重复的激活给P元素绑定的点击事件。然后变量的值就会增加,返回给我们的My(i),然后有偏移的举例就会增加,整个过程就循环的动起来了,继而我们给div绑定两个mouse鼠标事件,你们看到我换着花样对选择器的使用,我也是测试一下,这样会不会让代码出现问题,但是并没有,由此可见对选择器来说jQ的确很强大,他们完成的是悬停效果,划过停止,滑出继续开始动画。

到这里就结束了对整个动画的操作,动画很简单,也很复杂,具体看实际生活中我们怎么去运用它,我们用的很多的东西,导航,下拉,折叠,手风琴,百叶窗,拖放,焦点图等等很多的效果,都是一个对于这方面爱好的人员必定去了解和学习的东西,其实一门语言的运用会有很多相同之处,并且同一门语言解决一件动画也有很多种不同的方法,我们只是站在了别人的肩上,运作别人曾经设定好的东西,真的有一天我们自己有了新的发现那才叫创作,现在的最多叫做扩展延伸,甚至更低。

animate与css中的transition和transform也有很多的共同点,canvas属于Html5的东西,他的功能也足够强大,当然了js是其中的核心基础,原生的js现在看的比什么都重要,作为2017年的热门语言它还有很大的扩展性,还有很多的运用途径,这里也没有办法全部阐述,就先提到一点关于animate,引入后发现delay(),stop(),队列动画(),回调等等。太多的东西需要自己去一步步尝试和夯实,在接下来还要继续走向服务器,走向app,ui.......