夜光带你走进前端工程师（二十）

最新推荐文章于 2022-11-24 00:19:41 发布

GeniusTeam-夜光

最新推荐文章于 2022-11-24 00:19:41 发布

阅读量176

点赞数

分类专栏： My thoughts 前端工程师

本文链接：https://blog.csdn.net/weixin_41987706/article/details/90676474

版权

My thoughts 同时被 2 个专栏收录

911 篇文章 25 订阅

订阅专栏

前端工程师

48 篇文章 0 订阅

订阅专栏

夜光序言：

再好的东西，都有失去的一天。

再深的记忆，也有淡忘的一天。

再爱的人，也有远走的一天。

再美的梦，也有苏醒的一天。

该放弃的决不挽留。

正文：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++】

实现下面这个效果：

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>

//动画效果一部分如下图所显示：

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进前端工程师（二十）

夜光序言：再好的东西，都有失去的一天。再深的记忆，也有淡忘的一天。再爱的人，也有远走的一天。再美的梦，也有苏醒的一天。该放弃的决不挽留。正文：Canvas绘制动画如何让小方块动起来，嘿嘿动起来：如何设置/*** Created by Maibenben on 2018/4/9...
复制链接

扫一扫