h5小游戏

最近在写h5小游戏，对h5互动游戏用到的技术有些心得，分享给大家。代码地址：https://github.com/mengYu007/game

一：2d动画

1.transforms功能的基础知识

        transform:rotate(45deg)；旋转45度

        transform:scale(0.5)；缩小0.5,一个参数：水平与垂直都缩小0.5，

                                                      两个参数：X轴扩大或缩小，Y轴扩大或缩小；

        transform:skew(30deg,30deg)；倾斜，一个参数：X轴倾斜30deg，

                                                                   两个参数：X轴，Y轴；

        transform:translate(100px,100px)；移动，一个参数：X轴移动；

                                                                        两个参数：先移动X轴，后Y轴；

2.对一个元素使用多种变形

        1）.transform:translate(150px,200px)  rotate(45deg) scale(1.5);

            先向右移动150px，向下移动200px,然后旋转45deg,最后放大1.5倍；

        2）.基准点：在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准进行变形的；

             transform-origin:可以改变变形的基准点

            基准点在水平方向的位置可以指定的值lef,center,right;

            基准点在垂直方向上的位置可以指定的值为top,center,bottom;

二：3d动画

1.transition功能

    tansition:参1：对哪个属性进行平滑过渡    

                  参2：在多久时间内完成属性值的平滑度过，

                  参3：通过什么方法进行平滑过度

                  参4：指定变换动画特效延迟多久后开始执行；

    例：div{

                    position:absolute;

                    top:70px;

                    left:70px;

                    width：300px;

                    height:300px;

                    background:red;

                    transform:rotate(0deg);

                    transition:right 1s linear, transorm:1s linear

            }

           div:hover{

                     right:300px;

                    transform:rotate(720deg);

            }

2：animation功能

语法:

@keyframes  关键帧集合名{

       0%{}    

        50%{}

        100%{}

}

animation:关键帧集合名    动画的执行时长    动画的实现方法  延迟多少秒后执行    动画的执行次数    动画的执行方向  

除这三个属性外：可以是使用如下属性。

animation-delay:2s；延迟多少秒后执行    

animation-iteration-count:用于指定动画的执行次数，可指定为infinite（无限次）

animation-diretion:用于指定动画的执行方向。可指定属性值包括

normal：初始值(动画执行完毕后返回初始状态)

alternate:交替更改动画的执行方向

reverse:反方向执行动画

alternate-reverse:从反方向开始交替更改动画的执行方向。

理解steps

steps 函数指定了一个阶跃函数

第一个参数指定了时间函数中的间隔数量（必须是正整数）

第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；

step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。 

第一个参数：                         

steps的设置都是针对两个关键帧之间的，而非是整个keyframes，所以第一个参数对 - 次数对应了每次steps的变化

换句话说也是 0-25 之间变化5次，  25-50之间 变化5次 ，50-75 之间变化5次，以此类推                       

  第二个参数：

可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end

通过案例看下   step-start ， step-end   的区别

@-webkit- keyframes circle {

0% {background: red}

50% {background: yellow}

100% {background: blue}

}

step-start   ： 黄色与蓝色相互切换

step-end   ： 红色与黄色相互切换

2个参数都会选择性的跳过前后部分，start跳过0%，end跳过100%

step-start在变化过程中，都是以下一帧的显示效果来填充间隔动画，所以0% 到 50%  直接就显示了黄色yellow;

step-end与上面相反，都是以上一帧的显示效果来填充间隔动画，所以0% 到 50% 直接就显示了红色red;                 

方法	属性的变化速度
linear	均速变化
ease-in	又慢到快
ease-out	由快到慢
ease	由慢到快再到慢
ease-in-out	由慢到快再到慢

语法

animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

animation-fill-mode : none | forwards | backwards | both;

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

区别：transition只能通过指定属性的开始值与结束值，然后在这两个属性之间进行平滑过渡的方式来实现动画。

         animation通过定义多个关键帧以及定义每个关键帧元素中的属性值来实现更为复杂的动画效果。