More
More

H5+CSS3 罗小黑动画

  • 概要

    css3-animation-steps()函数 + Sprite(雪碧图)让萌萌的小黑动起来;
    html5-canvas 画一个逗喵神器。

  • 难点

    实现纯canvas绘制以指定坐标为原点旋转指定角度的椭圆;
    椭圆与曲线活动轨迹磨合调整,多canvas整合;

  • 链接
    关于本人使用steps()灵感来源于京东618的这篇技术贴,里面大致阐述了steps原理,网上还有更透彻的讲解,感兴趣的童鞋可以查阅;
    演示地址:点我
    demo源码:github传送门

  • 主要源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
css片段:
.xiaohei {
width: 350px;
height: 200px;
background: url(xx.png) no-repeat 0 0;
animation: toleft 2s infinite steps(11, end);
-moz-animation: toleft 1.5s infinite steps(11);
-webkit-animation: toleft 2s infinite steps(11);
z-index: -1;
}
@keyframes toleft {
/*0% {background-position:0;}*/
100%{ background-position: -4180px 0px;}
}
@-webkit-keyframes toleft {
100%{ background-position: -4180px 0px;}
}
@-moz-keyframes toleft {
100% {background-position: -4180px 0;}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
☞ js片段:
var h = 30, // 高度(y轴坐标)
arr = [5,7,8,9,10,20,30,50,1,-50,-30,-20,-10,-8,-6,-5,-3], // 草头旋转角度数组
//arrDown = [-6,-7,-8,-9,-10,-20,-30,-50,1,50,30,20,10,8,6,5,4], // 草头下至上旋转角度数组
i = 0, // 数组下标
flag = true, // 切换标识
timer = null; // 定时器
// 绘制椭圆(草头)
function drawOval(ctx, h, neg) {
ctx.clearRect(0,0,200,200);//清除画布上的指定区域
ctx.beginPath();
ctx.save();
ctx.translate(16,(h-i/8)+8); // 垂直变化
ctx.rotate(Math.PI/arr[i]*neg); // 旋转角度
ctx.scale(1,1/2); // 绘制椭圆
ctx.arc(0,0,15,0,Math.PI*2);
ctx.fill(); // 填充
ctx.stroke();
ctx.restore();
i++; // 数组遍历
}
// 贝塞尔曲线(草杆)绘制
function drawLine(h) {
context.clearRect(0,0,200,200);//清除画布上的指定区域
context.beginPath();
context.moveTo(20,h+5); // 起点
context.bezierCurveTo(80,100,120,100,200,100); //
context.stroke();
return false;
}
// 绘制函数
function load(v) {
clearInterval(timer);
timer = setInterval(function(){
if(h===150) {flag = false; i = 0;} // 切换条件
if(h===30) {flag = true; i = 0;}
if(flag) {
h = ++h;
(h%8 == 0) && drawOval(context1, h, 1);
} else {
h = --h;
(h%8 == 0) && drawOval(context1, h, -1);
}
drawLine(h);
context.drawImage(canvas1,0,0); // 合并多画布
}, v);
}
打赏
手机扫一扫,支持CHE~