zoukankan html css js c++ java

动画效果(二)

自定义动画

jQuery提供了几种简单常用的固定动画方法我们使用，但有些时候，这些简单动画无法满足我们更加复杂的需求，这个时候，jQuery提供了一个.animate()方法来创建我们的自定义动画，满足更多复杂多变的要求。

html代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <input type="button" class="button" value="按钮" />
    <div id="box">
        box
    </div>
</body>
</html>

style.css代码：

#box {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
}

jQuery代码：

$(".button").click(function() {
    $("#box").animate({
        "300px",
        height:'200px',
        opacity:0.5,
        fontSize:"50px"
    });
});

注意：一个CSS变化就是一个动画效果，上面的例子中，已经有四个CSS变化，已经实现了多重动画同步运动的效果。

必传的参数只有一个，就是一个键值对CSS变化样式的对象。还有两个可选参数分别为速度和回调函数。

$(".button").click(function() {
    $("#box").animate({
        "300px",
        height:'200px',
        opacity:0.5,
        fontSize:"50px"
    }, 2000, function() {
        alert("动画执行完毕哟！");
    });
});

到目前位置，我们都是创建的固定位置不动的动画，如果想要实现运动状态的位移动画，那就必须使用自定义动画，并且结合CSS的绝对定位功能。

$(".button").click(function() {
    $("#box").animate({
        left:"300px", //先必须设置CSS绝对定位
        top:"200px"
    },"slow");
});

自定义动画中，每次开始运动都必须是初始位置或初始状态，而有时我们想通过当前位置或状态下再进行动画，jQuery提供了自定义动画的累加、累减功能。

$(".button").click(function() {
    $("#box").animate({
        left:"+=100px"
    },"slow");
});

自定义实现列队动画的方式，有两种：

在回调函数中再执行一个动画
通过连缀或顺序来实现列队动画。

回调函数+列队动画(一定要细心，很容易写错)：

    $(".button").click(function() {
        $("#box").animate({
            "300px"
        }, function() {
            $("#box").animate({
                height:"200px"
            }, function() {
                $("#box").animate({
                    opacity:0.5
                }, function() {
                    $("#box").animate({
                        fontSize:"50px"
                    });
                });
            });
        });
    });

在同一个元素的基础上，使用连缀调用，可以实现队列动画：

$(".button").click(function() {
    $("#box").animate({"300px"})
             .animate({height:'200px'})
             .animate({opacity:0.5})
             .animate({fontSize:"50px"});
});

在同一个元素的基础上，使用顺序排列调用，可以实现队列动画：

$(".button").click(function() {
    $("#box").animate({"300px"});
    $("#box").animate({height:'200px'});
    $("#box").animate({opacity:0.5});
    $("#box").animate({fontSize:"50px"});
});

注意：如果不是同一个元素，就会实现同步动画。如何证明之呢？

看以下html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <input type="button" class="button" value="按钮" />
    <div id="box">
        box
    </div>
    <div id="pox">
        pox
    </div>
</body>
</html>

style.css：

#box {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
}
#pox {
    width: 100px;
    height: 100px;
    background: green;
    position: absolute;
    top:150px;
}

jQuery代码如下：

$(".button").click(function() {
    $("#box").animate({"300px"});
    $("#pox").animate({height:'200px'});
    $("#box").animate({opacity:0.5});
    $("#pox").animate({fontSize:"50px"});
});

可以发现：box的第一条和第三条是列队动画，pox的第二条和第四条是列队动画，box的第一条和pox的第二条是同步动画，box的第三条和pox的第四条是同步动画。

如何才能实现同步动画呢？只能用回调函数来实现了，代码如下：

    $(".button").click(function() {
        $("#box").animate({
            "300px"
        }, function() {
            $("#pox").animate({
                height:"200px"
            }, function() {
                $("#box").animate({
                    opacity:0.5
                }, function() {
                    $("#pox").animate({
                        fontSize:"50px"
                    });
                });
            });
        });
    });

补充：在.animate()方法中，还有一个参数，easing运动方式，这个参数，大部分参数值需要通过插件来使用，在后面的课程中，会详细讲解，自带的参数有两个：swing(缓动)、linear(匀速)，默认为swing。

举例说明：

html代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <input type="button" class="button" value="按钮" />
    <input type="button" class="stop" value="停止" />
    <input type="button" class="ani" value="查找运动的动画" />
    <div id="box">
        box
    </div>
    <div id="pox">
        pox
    </div>
</body>
</html>

style.css：

#box {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
}
#pox {
    width: 100px;
    height: 100px;
    background: green;
    position: absolute;
    top:150px;
}

jQuery代码如下：

$(".button").click(function() {
    $("#box").animate({
        left:"800px"
    }, 3000, "swing", function() {});
    $("#pox").animate({
        left:"800px"
    }, 3000, "linear");
});

列队动画方法

之前我们已经可以实现列队动画了，如果是同一个元素，可以依次顺序或连缀调用；如果是不同元素，可以使用回调函数，但有时列队动画太多，回调函数的可读性大大降低。为此，jQuery提供了一组专门用于列队动画的方法。

html(部分)代码：

<input type="button" class="button" value="按钮" />
<div id="box">
    box
</div>

style.css：

#box {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
}

jQuery代码如下：

$(".button").click(function() {
    $("#box").slideUp("slow").slideDown("slow").css("background", "orange"); //css不是动画方法，会默认排列到和第一个动画方法同步
});

注意：如果动画方法，连缀可以实现依次列队，而.css()方法不是动画方法，会在一开始传入列队之前。那么，可以采用动画方法的回调函数来解决。

使用回调函数，强行将.css()方法排队到.slideDown()之后：

$(".button").click(function() {
    $("#box").slideUp("slow").slideDown("slow", function() {
        $(this).css("background", "orange");
    });
});

但如果这样的话，当列队动画繁多的时候，可读性不但下降，而原本的动画方法不够清晰。所以，我们的想法是每个操作都是自己独立的方法。那么jQuery提供了一个类似于回
调函数的方法：.queue()。

使用.queue()方法模拟动画方法跟随动画方法之后：

$(".button").click(function() {
    $("#box").slideUp("slow")
             .slideDown("slow")
             .queue(function() {
                   　　$(this).css("background", "orange");
                    });
});

现在，我们想继续在.queue()方法后面再增加一个隐藏动画，这时发现居然无法实现，这是.queue()特性导致的。有两种方法可以解决这个问题，jQuery的.queue()的回调函数可以传递一个参数，这个参数是next函数，在结尾处调用这个next()方法即可再连缀执行列队动画。

使用next参数来实现继续调用列队动画：

$(".button").click(function() {
    $("#box").slideUp("slow")
             .slideDown("slow")
             .queue(function(next) {
                    　　$(this).css("background", "orange");
                    　　next();
                    }).hide("slow");
});

因为next函数是jQuery1.4版本以后才出现的，而之前我们普遍使用的是.dequeue()方法，意思为执行下一个元素列队中的函数。

使用.dequeue()方法执行下一个函数动画：

$(".button").click(function() {
    $("#box").slideUp("slow")
             .slideDown("slow")
             .queue(function() {
                    　　$(this).css("background", "orange");
                    　　$(this).dequeue();
                    }).hide("slow");
});

如果采用顺序调用，那么使用列队动画方法，就非常清晰了，每一段代表一个列队，而回调函数的嵌套就会杂乱无章。

使用顺序调用的列队，逐个执行，非常清晰：

$(".button").click(function() {
    $("#box").slideUp("slow");
    $("#box").slideDown("slow");
    $("#box").queue(function() {
         $(this).css("background", "orange");
         $(this).dequeue();
    });
    $("#box").hide("slow");
});

.queue()方法还有一个功能，就是可以得到当前动画列队的长度。当然，这个用法在普通Web开发中用的比较少，我们这里不做详细探讨。

$(".button").click(function() {
    $("#box").slideUp("slow")
             .slideDown("slow",function() { alert(count()) }) //3，即还有3个列队动画未执行
             .queue(function() {
                    $(this).css("background", "orange");
                    $(this).dequeue();
             })
             .hide("slow");
});
function count() {
    return $("#box").queue("fx").length; //获取当前列队的长度，fx是默认列队的参数
}

jQuery还提供了一个清理列队的功能方法：.clearQueue()。把它放入一个列队的回调函数或.queue()方法里，就可以把剩下未执行的列队给移除。

$(".button").click(function() {
    $("#box").slideUp("slow")
             .slideDown("slow",function() { $(this).clearQueue(); })
             .queue(function() {
                    $(this).css("background", "orange");
                    $(this).dequeue();
             })
             .hide("slow");
});

查看全文

相关阅读:
多个类定义attr属性重复的问题:Attribute ＂xxx＂ has already been defined
好用的批量改名工具——文件批量改名工具V2.0 绿色版
 得到ImageView中drawable显示的区域的计算方法
 得到view坐标的各种方法
 实现类似于QQ空间相册的点击图片放大，再点后缩小回原来位置
 Material Designer的低版本兼容实现（五）—— ActivityOptionsCompat
Android 自带图标库 android.R.drawable
解决 Attempting to destroy the window while drawing!
解决Using 1.7 requires compiling with Android 4.4 (KitKat); currently using API 4
Material Designer的低版本兼容实现（四）—— ToolBar

原文地址：https://www.cnblogs.com/yerenyuan/p/5430438.html