任务目的
- 练习JavaScript在DOM、字符串处理相关知识
- 练习对于复杂UI，如何进行数据机构建模
任务描述
- 对于正方形的移动增加相应动画，包括移动和旋转
- 每个指令的执行时间是1s（可以自己调整）
- 增加新的指令如下：
- TRA LEF：向屏幕的左侧移动一格，方向不变
- TRA TOP：向屏幕的上面移动一格，方向不变
- TRA RIG：向屏幕的右侧移动一格，方向不变
- TRA BOT：向屏幕的下面移动一格，方向不变
- MOV LEF：方向转向屏幕左侧，并向屏幕的左侧移动一格
- MOV TOP：方向转向屏幕上面，向屏幕的上面移动一格
- MOV RIG：方向转向屏幕右侧，向屏幕的右侧移动一格
- MOV BOT：方向转向屏幕下面，向屏幕的下面移动一格
任务注意事项
- 实现功能的同时，请仔细学习JavaScript相关的知识
- 请注意代码风格的整齐、优雅
- 代码中含有必要的注释
- 建议不使用任何第三方库、框架
在线学习参考资料
听指令的小方块（二）总结
1、CSS3 Animations
CSS3动画可以在不使用JavaScript和Flash的情况下，为绝大多数HTML元素增加动画。
（1）什么是CSS3动画
动画指让一个元素的样式从一种变为另一种。
可以改变任意多CSS属性，也可以改变任意多次。
要使用CSS3动画，需要先指定一些关键帧（keyframes），关键帧说明在一个特定时间元素的样式。
（2）@keyframes规则
当在@keyframes中设置CSS样式时，动画将在指定时间由一种样式变为另一种样式。
（3）CSS3动画属性
@keyframes：指定动画代码
animation:一个集合属性，用于设置所有的animation属性值。
animation-delay：指定动画开始之前延迟的时间。
animation-direction：指定动画是否以相反方向展示，或循环连续播放。
animation-duration：指定动画的一个循环需要多少秒或毫秒。如果未指定此属性，动画不会执行，因为默认值为0.
animation-fill-mode：指定当动画结束或存在延迟时，元素的样式。
animation-iteration-count：指定动画执行次数。infinite表示无限次。
animation-name：指定@keyframes动画的名称。
animation-play-state:指定动画是暂停还是播放。
animation-timing-function：指定动画的速度曲线。
可有以下值：
ease：默认值，动画慢速开始，加速，减速结束。
linear：动画从始至终速度相同。
ease-in：动画慢速开始。
ease-out：动画慢速结束。
ease-in-out：动画开始和结束是慢速。
cubic-bezier(n,n,n,n):自定义cubic-bezier函数的属性。
2、Style animation Property
动画属性是六个属性的属性集合：animationName,animationDuration,animationTimingFunction,animationDelay,animationIterationCount,animationDirection.
一定要设置animationDuration属性，否则持续时间为0，动画不会执行。
语法：
返回animation属性
object.style.animation
设置animation属性
object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"
3、CSS3 Transitions
CSS3 transitions允许在一个指定时间内，将属性值从一个平滑的过渡到另一个。
（1）如何使用CSS3 transitions
为了使用transitions效果，需要制定两个值：
想添加或影响的CSS属性。
效果持续时间。
注意：如果没有指定duration，过渡将没有效果，因为duration默认值为0。
（2）CSS3 transition属性
transition：集合属性，用一个属性设置四个transition属性的值。
transition-delay：指定transition效果的延迟时间，以秒为单位。
transition-duration：指定transition效果完成需要多少秒或毫秒。
transition-property：指定transition效果涉及到的css属性值。
transition-timing-function：指定transition效果的速度曲线。该属性可有以下值：
ease：默认值，先慢后快再慢。
linear：从开始到结束速度相同。
ease-in：缓慢开始。
ease-out：缓慢结束。
ease-in-out：缓慢开始和缓慢结束。
cubic-bezier(n,n,n,n)：自定义cubic-bezier函数。
（3）Transition + Transformation
transformation可以作为CSS的一个样式，和width、height等一样。例如：
div:hover{
300px;
height:300px;
transform:rotate(180deg);
}
transform可以如同width、height等一样使用transition，例如：
div{
100px;
height:100px;
transition:width 2s,height 2s,transform 2s;
}
4、Style transition Property
transition属性是以下四个属性的集合属性：transitionProperty，transitionDuration，transitionTimingFunction，transitionDelay。
注意：一定要设置transitionDuration属性，否则持续时间为0，transition无效。
语法：
返回transition属性：
object.style.transition
设置transition属性：
object.style.transition = "property duration timing-function delay|initial|inherit"
transitionProperty：指定transition效果涉及的CSS属性。
transitionDuration：指定transition效果完成需要的毫秒数或秒数。
transitionTimingFunction：指定transition效果的速度曲线。
transitionDelay：定义transition效果何时开始。
initial：将属性设为默认值。
inherit:继承父元素属性。
5、animationend Event
当CSS animation完成时执行animationend事件。当一个CSS animation运行时，可使用以下事件：
animationstart：css animation开始时触发。
animationiteration：当css animation重复时触发。
animationend：当css动画完成时触发。
同时对于transition事件有：
transitionend：当一个css transition结束时触发该事件。
语法：
object.addEventListener("webkitAnimationEnd", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationend", myScript); // Standard syntax
6、在网页上创建动画的方法
在网页上创建动画主要有两种方法：使用CSS和使用JavaScript
CSS可使用transform和animation
JavaScript可使用window.setTimeout()、window.setInterval()和Web Animation API
例如：
var target = document.querySelector('.box');
var player = target.animate([
{transform: 'translate(0)'},
{transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
target.style.transform = 'translate(100px, 100px)';
});
7、已提交作业
代码地址：https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task3-5