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

chapter 2 技术创意形式

• 动画形式
• 移动设备 Web API 详解
• WebVR
• 创意点

2.1 动画形式

2.1.1 CSS3

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;

2.1.2 帧动画

帧动画的原理是将动作分解为很多张具有不同内容的图片，按顺序快速播放这些图片，使其连续播放形成动画。
小时候会在一本书的每一页都画上形状，然后快速地翻动书页，就会出现连续的动画。
因为帧动画的帧序列内容一样，最终输出的图片文件体积可能非常大，这样很大程度上影响打开页面的速度，进而影响用户体验。
帧动画的优势：具有非常大的灵活性，可以指定帧动画的播放次数，可以自由控制播放的次数，可以兼容大部分浏览器，所能表现的动画可比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("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。

2.1.3 Canvas

动画原理：
动画的本质就是一连串的图像，每个图像之间的 差别非常微小，并且他们以极快的速度连续显示。
对于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>

2.1.4 SVG

• 常用元素及属性
  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>

2.1.5 Three.js

未完待续。。。