Web开发-动画入门

1.动画原理

将一个变化细分成若干个小步骤，逐步进行

2.执行基础-定时器（单位：毫秒）

（1）一次性定时器 setTimeout ：页面加载后只执行一次

        setTimeout(function(){

                动作

        },执行时长(完成一次动作);

举例：页面加载一秒后弹出提示框“12345”

setTimeout(function(){

            alert(12345)

        },1000);

（2）重复定时器setInterval：根据设置条件重复执行

        setInterval(function(){

            动作

        },单次执行时长)

（3）清除定时器效果 clearInterval（定时器名）

        目的：停止当前定时器效果或清除上一步定时器效果

！小练习：设置一个定时器，要求页面输出一个从0到10的一个倒计时动画效果

代码：<h1>0</h1>

<script>

var h1 =document.querySelector("h1")

        var text=h1.innerText

            var time=setInterval(function(){

                h1.innerText=++text

                if(text==10){

                    clearInterval(time)

                }

            },1000)

</script>

3.封装的动画--JS

基于动画原理，封装成一个动画函数，即取即用是一个好办法，下面列举JQ中封装的几种动画：

参数:

     1.speed(速度):slow normal fast 确定值

     2.easing(效果):swing摆动 linear直线

     3.fn(回调函数):动画执行完执行函数

    <script>

        // 渐小渐大(基础默认)

        $(".hide").click(function(){

            $("div").hide(1000)

        })

        $(".show").click(function(){

            $("div").show(1000)

        })

        $(".toggle").click(function(){

            $("div").toggle(1000)

        })

        //卷帘效果

        $(".hide").click(function(){

            $("div").slideUp(1000)

        })

        $(".show").click(function(){

            $("div").slideDown(1000)

        })

        $(".toggle").click(function(){

            $("div").slideToggle(1000)

        })

        //淡入淡出

        $(".hide").click(function(){

            $("div").fadeOut(1000)

        })

        $(".show").click(function(){

            $("div").fadeIn(1000)

        })

        $(".toggle").click(function(){

            $("div").fadeToggle(1000)

        })

        透明度

        $(".toggle").click(function(){

            $("div").fadeTo(1000,0.3)

        })

    </script>

4.过渡效果transition--CSS

另外也可以忽略过程，让计算机完成过渡效果，通过设置执行时长来达到动画效果

transition: all linear 1s 0.5s

             /*

            变化的属性：指定目标        all（全部变化）

            速度：liner ease-in

            执行时长

            延时

            */

举例:鼠标悬停时，让盒子变宽，颜色变化

div{

            width: 200px;

            height: 200px;

            margin: 100px auto;

            background-color: rebeccapurple;

            transition: all linear 1s 0.5s;

            /* transition: background-color linear 1s 0.5s; */

            /* transition: width linear 1s 0.5s; */

        }

        div:hover{

            width: 600px;

            background-color: red;

        }