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——动画开始和结束缓慢，中间快速

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

　　　　　　　　　　另：animation-iteration-count 用于设置动画播放次数。animation-direction 用于是否轮流反响播放动画  不过用的不多，平时可以用默认值就好

　　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变化。

pc端对制作网页动画一些心得,古老的榕树,5-wow.com