首页 > 代码库 > pc端对制作网页动画一些心得
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变化。