首页 > 代码库 > 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变化。