指尖上行--移动前端开发进阶之路（读书笔记）----2.1动画形式

chapter 2 技术创意形式

动画形式

移动设备 Web API 详解

WebVR

创意点

2.1 动画形式

[b]2.1.1 CSS3[/b]

CSS3 Cascading Style Sheets 层叠样式表。 CSS3是CSS技术的一个升级版本，是由Adobe、Apple、Google、HP、IBM、Microsoft、Mozilla及Opera等诸多WEB巨头联合组织的一个名为“W3C”的组织共同协商策划的。

优势：

易于编写，不懂JavaScript、canvas及SVG一样能写动画。

在性能上会稍微好一点，浏览器一般都对CSS3动画做了一些优化。

能够非常容易的实现一些三维效果。

劣势：

兼容性有一些切确，在低版本浏览器上无法播放。

动画控制方面不够灵活，如精确播放和曲线运动等。

相对于SVG和WebGL，在矢量和3D方面比较欠缺。

CSS3有三个动画属性：Transform、Transition、Animation。

Transform（变形）：Transform主要包括了Rotate（旋转）、Scale（缩放）、Translate（移动）、Skew（扭曲）及Matrix（矩阵变形）。

Matrix —-> http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

Transition（转换）：

.demo{
transition-property:all;//指定当元素其中一个属性改变时间执行transition效果
transition-duration:5s;//指定元素转换过程的持续时间
transition-timing-function:ease;//允许你根据时间的推进去改变属性值的变换速率
transition-delay：0.5s;//指定一个动画开始执行的时间
}
//可以合并为一下一段代码：
transition:all 5s ease 0.5s;
transition:transition-property transition-duration transition-timing-function transition-delay;

Animation（动画）：

//Keyframe
@keyframs Name{
from{属性名:属性值;}
to{属性名:属性值;}
}
//百分比写法
@keyframs Name{
0%{属性名:属性值;}
100%{属性名:属性值;}
}
//Animation写法
.demo{
animation-name:"name";//动画属性名称
animation-duration:10s;//动画持续时间
animation-timing-function:ease;//动画频率
animation-delay:2s;//动画延迟时间
animation-iteration-count:10;//定义循环次数，infinite无限次
animation-direction:alternate;//定义动画方式
}
//合并为一段代码
animation: 'name' 10s ease 2s 10 alternate;

[b]2.1.2 帧动画[/b]

帧动画的原理是将动作分解为很多张具有不同内容的图片，按顺序快速播放这些图片，使其连续播放形成动画。

小时候会在一本书的每一页都画上形状，然后快速地翻动书页，就会出现连续的动画。

因为帧动画的帧序列内容一样，最终输出的图片文件体积可能非常大，这样很大程度上影响打开页面的速度，进而影响用户体验。

帧动画的优势：具有非常大的灵活性，可以指定帧动画的播放次数，可以自由控制播放的次数，可以兼容大部分浏览器，所能表现的动画可比CSS3的Animation细腻得多。

目前位于移动端页面的帧动画形式主要有3种控制方式：

CSS3动画来控制；

通过JavaScript控制canvas；

通过JavaScript控制CSS。

》通过CSS3控制：

将动画过程分5个阶段完成，使静态图片首尾相接，则分别在0%，25%，50%，75%及100%执行bacground-position改变即可，实现代码如下：

.box{
width:225px;
height:95px;
background:url(images/garen_skill.png) 0 0 no-repeat;
bacground-size:900px 95px;
-webkit-animation: run 250ms step(1) infinite 0s;
}
@-webkit-keyframes run{
0%{
bacground-position:0 0;
}
25%{
bacground-position:-225px 0;
}
50%{
bacground-position:-450px 0;
}
75%{
bacground-position:-675px 0;
}
100%{
bacground-position:-900px 0;
}
}

》通过JavaScript来控制canvas

//实现思路：封装一个drawImage方法，设置一个定时器，在定时器中执行这个方法，每个多少秒重复执行。方法中设置一个半两，自增同时通过变量来改变图片坐标，使得每一个执行图片都会变化。设置一个极限值，变量达到极限值时，赋值0，重新初始化。

var ctx = document.getElmentById("wake").getContext(
debb
"2d")
ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

//img:规定要使用的图像、画布、及视频
//sx:可选。开始剪切的x坐标
//sy:可选。开始剪切的y坐标
//swidth:可选。被剪切图像的宽度。
//sheight:可选。被剪切图像的高度。
//x:在画布上放置图像的x标位置
//y:在画布上放置图像的y标位置
//width:可选。要使用的图像的宽度
//height:可选。要使用的图像的高度

》通过JavaScript来控制CSS（比较常见）：

通过JavaScript不断改变图片的background-position来实现帧动画的播放。

实现思路同canvas类似，封装方法，设置定时器，设置边界变量。不同的是是去通过style属性去改变background-position。

[b]2.1.3 Canvas[/b]

动画原理：

动画的本质就是一连串的图像，每个图像之间的 差别非常微小，并且他们以极快的速度连续显示。

对于canvas，就是在屏幕上绘制一些对象，然后清除屏幕上的对象，接着快速在欧慕尚绘制其他对象—-更新图像。

使用Flash动画编辑器

在Flash CS6版本里面支持通过“安装插件”来导出HTML5类型的canvas文件，在动画编辑上 Flash IDE的HTML5 canvas文件类型很好地解决了我们前面提到的问题。它将动画制作完全可视化，沿用了Flash动画编辑器，制作canvas动画跟原先制作Flash动画几乎没有差别，动画表现直接交由动画设计师来完成，前端无须关心动画表现细节。

动画制作的注意事项：

》图片、元件命名不能使用中文

》少用大范围alpha渐变动画和大范围alpha渐变

》慎用补间动画自定义缓入缓出

》帧从0开始数起

》分布加载

》合成雪碧图

<canvas width="400" height="400" id="cas"></canvas>
<script>
var cas = document.querySelector('#cas');
var ctx = cas.getContext("2d");
ctx.moveTo(100, 200);
ctx.lineTo(200, 300);
ctx.lineTo(300, 100);
ctx.lineTo(-100, 100);
ctx.fill();
</script>

//弧度角度转换
<script>
function toAngle(radian) {
return radian * 180 / Math.PI;
}

function toRadian(angle) {
return angle * Math.PI / 180;
}
</script>

//绘制图片
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src="img_flwr.png";
</script>

[b]2.1.4 SVG[/b]

常用元素及属性

SVG 是一个XML文件，具备独立了的文档流，整个代码包含在一个

<svg>

标签中。

SVG 元素一般分为图形元素、动画元素、容器元素、描述性元素、滤镜元素、渐变元素及文本内容元素；

SVG 属性一般分为图形属性、动画属性、条件处理属性、核心属性、文档事件属性、过滤器原始属性、外观属性、变换函数属性及 Xlink 属性等。

<svg width="1000" height="1000" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M 100 100 L 300 100 L 200 300 z" fill="skyblue" stroke="blue" stroke-width="1" />
<!-- 路径 -->
<circle cx="100" cy="300" r="50" fill="pink" stroke="deeppink" stroke-width="1" />
<!-- 圆形 -->
<ellipse cx="100" cy="300" rx="50" ry="20" fill="skyblue" stroke="blue" stroke-width="1" />
<!-- 椭圆形 -->
<ellipse cx="100" cy="300" rx="20" ry="50" fill="transparent" stroke="blue" stroke-width="1" />
<!-- 椭圆形 -->
<rect x="400" y="400" width="200" height="100" fill="green" />
<!-- 矩形 -->
<polygon points="60,20 100,40 100,80 60,100 20,80 20,40" fill="orange" stroke="yellow" stroke-width="1" />
<!-- 多边形 -->
<polyline points="40,20 200,20 350,300 460,100 520,180 620,40" fill="none" stroke="red" stroke-width="1" />
<!-- 折线 -->
<line x1="10" y1="200" x2="400" y2="50" stroke="black" stroke-width="2" />
<!-- 直线 -->
<text x="50" y="500">I'm a line of text</text>
<!-- 文本 -->
</svg>

[b]2.1.5 Three.js[/b]

未完待续。。。