夜光序言：
再好的东西，都有失去的一天。
再深的记忆，也有淡忘的一天。
再爱的人，也有远走的一天。
再美的梦，也有苏醒的一天。
该放弃的决不挽留。
正文：Canvas绘制动画
如何让小方块动起来，嘿嘿
动起来：如何设置
/**
* Created by Maibenben on 2018/4/9.
*/
function draw(id){
var canvas = document.getElementById(id);
context = canvas.getContext('2d');
setInterval(painting,100);
i=0;
}
function painting(){
context.fillStyle = "green";
context.fillRect(i,0,10,10);
i=i+20;
}
画布大小决定了以上代码动画效果，改进一下
setInterval(painting,100);
//100是毫秒
//变成进度条效果
I=i+10 【i++】
实现下面这个效果：
/**
* Created by Maibenben on 2018/4/9.
*/
function draw(id){
var canvas = document.getElementById(id);
context = canvas.getContext('2d');
setInterval(painting,100);
i=0;
}
function painting(){
context.fillStyle = "green";
context.fillRect(i,i,10,10);
i++;
}
context.fillRect(i,i,10,10); //这个是关键，控制动画效果
Css3中的动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
div{
width: 200px;
height: 200px;
background-color: aquamarine;
}
div:hover{
background-color: aqua;
}
</style>
</head>
<body>
<h1>transition属性</h1>
<div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
div{
width: 200px;
height: 200px;
background-color: aquamarine;
transition: all 1s linear ; //关键之处
}
div:hover{
background-color: aqua;
}
</style>
</head>
<body>
<h1>transition属性</h1>
<div>
</div>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
div{
width: 200px;
height: 200px;
background-color: aquamarine;
transition: all 1s linear ;
-moz-transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition:all 1s linear;
;
}
div:hover{
background-color: aqua;
}
</style>
</head>
//实现平滑的过渡效果
<style>
div{
width:200px;
height:200px;
background-color: aquamarine;
}
@-webkit-keyframes mycolor {
0%{
background-color: #ffed60;
}
10%{
background-color: bisque;
}
20%{
background-color: cornflowerblue;
}
80%{
background-color: darkseagreen;
}
100%{
background-color: aquamarine;
}
}
</style>
//没有指定调用方法，所以还需要制定调用方法
不断变换颜色的动画制作完毕：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animations属性</title>
<style>
div{
width:200px;
height:200px;
background-color: aquamarine;
}
@-webkit-keyframes mycolor { //animations属性必须用这种
0%{
background-color: #ffed60;
}
10%{
background-color: bisque;
}
20%{
background-color: cornflowerblue;
}
80%{
background-color: darkseagreen;
}
100%{
background-color: aquamarine;
}
}
div:hover{ //hover：鼠标移动上去的时候
-webkit-animation-name: mycolor;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
} //这里必须写：调用方法
</style>
</head>
<body>
<h1>animations</h1>
<div></div>
</body>
</html>
这是会移动的变换颜色：
【夜光】
<style>
div{
width:100px;
height:200px;
background-color: aquamarine;
}
@-webkit-keyframes mycolor {
0%{
background-color: #ffed60;
}
10%{
background-color: bisque;
width: 200px;
}
20%{
background-color: cornflowerblue;
width:400px;
}
80%{
background-color: darkseagreen;
width: 600px;;
}
100%{
background-color: aquamarine;
width:800px;
}
}
div:hover{
-webkit-animation-name: mycolor;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
</style>
再来一个更加复杂的动画style[animations]
<style>
div{
width:100px;
height:200px;
background-color: aquamarine;
}
@-webkit-keyframes mycolor {
0%{
background-color: #ffed60;
-webkit-transform: rotate(0deg);
}
10%{
background-color: bisque;
width: 200px;
-webkit-transform: rotate(10deg);
}
20%{
background-color: cornflowerblue;
width:400px;
-webkit-transform: rotate(40deg);
}
80%{
background-color: darkseagreen;
width: 600px;;
-webkit-transform: rotate(80deg);
}
100%{
background-color: aquamarine;
width:800px;
-webkit-transform: rotate(100deg);
}
}
div:hover{
-webkit-animation-name: mycolor;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
</style>
//动画效果一部分如下图所显示：