网页上展示动画,不只是html5的动画,还有css和js的
通常有三种变化
移动
渐变
旋转
html5的动画
这里就是 canvas 了,主要分几种
初始: var cxt=document.getElementById(“myCanvas”).getContext(“2d”);
画线:
ctx.moveTo(x,y) 定义开始点
ctx.lineTo(x,y) 定义结束位置
ctx.stroke()
画圆
- xtc.arc(…)
渐变
放置图像
- xtc.drawImage(img,x,y)
css/css3的动画
根据hover来写不同的样式
2d和3d旋转处理
过度 transition
动画 animation ,以及 @keyframes
js的动画,一般用来处理数字变化,进度条,一些简单的东西
setTimeOut
1 | <div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div> |
setInterval
1 | <div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div> |
requestAnimationFrame
1 | <div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div> |
js 控制css的动画,与触发事件
鼠标移动 mouseOver/mouseOut 的切换图片
移动端的手势插件 hammer.JS
直接控制css的js jquery.transit.js,官网?,注意,先引入jq
svg的动画
主要元素
<set>
<animate>
<animateColor>
<animateTransform>
<animateMotion>
能实现的效果
动画元素的数值属性(X, Y, …)
动画属性变换(平移或旋转)
动画颜色属性
沿着运动路径运动
svg 嵌入html