pc端对制做网页动画一些心得

　　最近作了一些pc端的页面，用了一些动画效果，总的来讲感受还不错，大概记录下一些体会

　　首先，咱们把pc端的动画类型分三类：

• 　　javascript和jQuery直接控制dom属性
• 　　css3的属性transition
• 　　css3的animation

　　这三类是我目前主要使用的动画效果制做来源

　　javascript和jQuery直接控制dom属性

　　　　这种模式就是咱们传统的js模式，或者在jquery上进行一些包装。主要是直接变化dom节点的普通属性，left，top，width，height之类的；

　　　　　　优势：

　　　　　　　　兼容性高，使用jQuery能够很方便兼容大多数浏览器。

　　　　　　缺点：

　　　　　　　　javascript的原生写法比较复杂，复杂屡次变化的动画效果实现不方便

　　　　　　tips:

　　　　　　　　jquery下能够引用easing文件用来加强各类动画效果的表现形式，丰富animate，fadeIn，fadeOut，slideDown，slideUp等动画效果的表现形式

 

　　css3的属性transition

　　　　这种模式也是基于css3模式，最好在chrome表现，适用于各类小型动画，简单的过渡切换

　　　　　　优势：

　　　　　　　　使用方便，书写简单，代码量很小能够实现不俗的简单动画效果，适合作hover，active等简单的体验优化

　　　　　　缺点：

　　　　　　　　缺乏控制方式，变化形式比较单一，不能精细控制，不适合作复杂动画　　

　　　　　　tips：

　　　　　　　　transition变化的必要几个属性（例子）：

　　　　　　　　　　普通变化：transition：all 2s ease-in-out 1s;

　　　　　　　　　　参数效果：all——全部属性参与过渡切换　　

　　　　　　　　　　　　　　　2s——动画效果持续两秒

　　　　　　　　　　　　　　　ease-in-out——慢速开始慢速结束的过渡效果

　　　　　　　　　　　　　　　1s——从触发动画到实际开始动画的延时

　　　　　　　　3d变化：添加3d属性，后面提到；

　　

　　css3的animation

　　　　这种模式一样基于css3，表现最好在chrome内，适用于各种新型较复杂的动画效果

　　　　　　优势：

　　　　　　　　使用方便，动画实现逻辑比较好理解，适合作各种动画效果

　　　　　　缺点：

　　　　　　　　关键帧要求比较高，若是动画效果要求高，可能须要屡次调整关键帧设计

　　　　　　tips：

　　　　　　　　animation变化几个必要和属性（例子）：

　　　　　　　　　　普通变化：-webkit-transform: rotateX(0deg);

　　　　　　　　　　　　　　  -webkit-animation:doll_123 2s ease-in-out 1s;　　　　　　　　　　　　　　　　

@-webkit-keyframes doll_123 {
0% {
-webkit-transform: rotateX(90deg);
}
20% {
-webkit-transform: rotateX(-40deg);
}
40% {
-webkit-transform: rotateX(30deg);
}
60%{
-webkit-transform: rotateX(-20deg);
}
80%{
-webkit-transform: rotateX(+10deg);
}
90%{
-webkit-transform: rotateX(5deg);
}
100%{
-webkit-transform: rotateX(0deg);
}
}

　　　　　　　　　　参数效果：-webkit-transform: rotateX(0deg)——完成动画以后的样式（这个样式必需要有，否则完成动画以后样式会回到初始状态）

　　　　　　　　　　　　　　　doll_123——设置的变化函数设定

　　　　　　　　　　　　　　　2s——动画效果持续时间（从0%——100%所用的时间）

　　　　　　　　　　　　　　　ease-in-out——动画开始和结束缓慢，中间快速（还有一类变化是瞬时的，step-end，step(2)直接分解成对应的状态，没有过渡态，这样的效果适合用于背景图片的切换）

　　　　　　　　　　　　　　　1s——从触发动画到实际开始动画的延迟时间

　　　　　　　　　　另：animation-iteration-count 用于设置动画播放次数。animation-direction 用因而否轮流反响播放动画 。animation-fill-mode用于设定播放完动画最后一帧状态（forwards 是最后一帧，backwards是第一帧）

　　　　　　　　　　

 

 

　　3d变化（注意要配合上述三种动画实现才会有动画效果，否则只是变化不是动画）

　　　　　ps：　css不能实现把二维图片转化成三维图形，因此css3实现的3d效果只能是实现相似卡牌翻转或者变化，真实3d结构显示须要使用webGL，Three.js。

　　　　　　3d变化须要的必须属性：

　　　　　　-webkit-transform：perspective(600px) rotateY(180deg)；

　　　　　　　　属性说明：

　　　　　　perspective(600px)——用于设置视角位置，能够大概理解为对于3d变化元素的变形影响，值越小影响越大（值越小，视角越靠近屏幕，近大远小的效果越明显，相似现实生活的看书，眼镜靠书很近的时候，靠近眼镜的字看起来比远的大，若是看书距离较远，看起来的话字大小就差很少）

　　　　　  rotateY(180deg)——用于设置3d旋转的角度，这个是按照Y轴转动180度。

　　　　　　　　　　　

　　　　　　3d变化的额外属性：

　　　　　   -webkit-transform-origin：100% 100% 0——用于设置3的旋转的基点，变化坐标系基点在dom节点的x方向100%位置，变化坐标系基点在dom节点的y方向100%位置，z轴在0位置，（须要注意的是，改变的是坐标系的位置，不是图片位置，比较抽象，大概理解为改变基点位置的x值会改变y轴变化效果，改变基点位置的y值会改变x轴变化效果）

　　　　　   -webkit-transform-style：preserve-3d——用于设置3d变化，可是实际上只要在transform设置了视点位置以后都是3d变化，2d变化是没有视点的；不过加上这个属性能够明确显示是3d变化。