您的位置：首页 > Web前端

前端开发——Animation动画

2016-04-06 20:24 253 查看
1.Animation动画是不用触发，就可以动起来的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation动画的练习</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background:red;
border-radius: 50%;
position: absolute;
top:200px;
left: 200px;
text-align: center;
line-height: 100px;
color:white;
font-size: 24px;
opacity: 0.8;     /*透明度*/

/*dong为动画名称，0s为动画起始时间，5表示为运行次数,alternate表示往下以后往上*/
-webkit-animation: dong 1s ease 0s 5 alternate;     /*调用动画，infinite 表示无限运动*/
}
/*定义animation动画*/
@-webkit-keyframes dong {
from{
top:200px;
left:200px;
}
to{
top:350px;
left: 350px;
}
}
</style>
</head>
<body>
<div>点我</div>
</body>
</html>

运行代码查看效果：



小球来回运动5次

2.Animation不能做曲线运动，所以要引入另一个js插件：JQuery.path.js

gitHub下载方式：去  https://github.com/——》输入Jquery.path——》下载——》拷贝gitHub上面的贝塞尔曲线代码——》将animate曲线调用中的内容修
4000
改成当前的标签名称

曲线运动

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>曲线运动（引用JQuery.path.js插件）</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: pink;
position: absolute;
top: 50px;
left: 100px;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.path.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//            定义了贝塞尔曲线
var bezier_params = {
start: {
x: 185,
y: 185,
angle: 10
},
end: {
x:540,        /*通过修改x、y的值来改变运动的结束点坐标*/
y:110,
angle: -10,
length: 0.25
}
};
//           在animate中使用贝塞尔曲线
$("div").animate({path : new $.path.bezier(bezier_params)});  /*修改为"$("div")*/
});
</script>
</head>
<body>
<div></div>
</body>
</html>

结果：请运行上述代码查看

3.圆周运动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆周运动</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: pink;
position: absolute;
top: 50px;
left: 100px;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.path.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var arc_params = {
center: [285,185],       /*定义圆心*/
radius: 100,      /*半径*/
start: 30,      /*起始角度*/
end: 200,       /*结束角度*/
dir: -1     /*-1表示顺时针，1表示逆时针*/
};

$("div").animate({path : new $.path.arc(arc_params)},2000);   /*2000ms表示运动的时间*/
});
</script>
</head>
<body>
<div></div>
</body>
</html>

此时上面的代码执行的结果是：只做一次运动。



若要周而复始的运动，则需要：

<script type="text/javascript">
$(document).ready(function(){
var arc_params = {
center: [285,185],       /*定义圆心*/
radius: 100,      /*半径*/
start: 30,      /*起始角度*/
end: 200,       /*结束角度*/
dir: -1     /*-1表示顺时针，1表示逆时针*/
};
run();
function  run(){
/*2000ms表示运动的时间*/
$("div").animate({path : new $.path.arc(arc_params)},2000,function(){
//                    回调函数，动画执行了之后继续调用run()方法
run();
});
}
});
</script>

注意事项：





修改起始点以及结束点，让它做匀速的运动

<script type="text/javascript">
$(document).ready(function(){
var arc_params = {
center: [285,185],       /*定义圆心*/
radius: 200,      /*半径*/
start: 0,      /*起始角度*/
end: 1,
/*结束角度，结束角度只要比起始角度多1度，就要绕一圈*/
dir: -1 /*-1表示顺时针，1表示逆时针*/ }; run(); function run(){ /*2000ms表示运动的时间,linear表示匀速运动*/ $("div").animate({path : new $.path.arc(arc_params)},2000,"linear",function(){// 回调函数，动画执行了之后继续调用run()方法 run(); }); } }); </script>
修改内容高亮显示：



4.绝对定位的盒子是没法通过margin:0 auto来实现居中的，可以通过translateX(-50%) translateY(-50%)这种方式来实现。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  animate animation动画 贝塞尔曲线 匀速圆周运动
相关文章推荐
新的分享
章节导航