前端开发 之动画浅谈

1.javascript 动画

基本的淡入淡出动画

在jquery中 我们使用hide() 和show() 实现让基本的元素块隐藏和显示的效果，当在.show() 或者.hide() 中指定时长，就会动画效果

$("p").show('duration')

注意：duration 可以有三个取值 fast (等于200ms) ,slow （等于600ms）以及具体的毫秒值

虽然使用.show() 和 .hide() 方法在某种程度上可以创建出漂亮的效果，但其效果有时候也可能会过于花哨，为此jquery提供了几个更为精细的动画方法

fadeIn() 只是逐渐增大其不透明度

......

$('p).fadeIn('slow);

.......

同理fadeOut（） 会逐渐减小其不透明度

slideDown() 和slideUp（）滑上和滑下效果 这两个效果仅改变元素的高度，要让段落以垂直滑入的效果出现

slideToggle（）根据上下文来 切换slideDowm()以及sildeUp()

除了预置的效果方法以外还可以创建控制更加精细的自定义动画  .animate()

 .animate({ property1:'value1,property2:'value2},

duration: value,

       easing：valueing

  function（）{

//

 }

)

或者

 .animate({ property1:'value1,property2:'value2},

{

    duration: value,

        easing：valueing

    }

  function（）{

//

 }

)

html 动画

2. animate transtion trsansform

　　transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
　　为了更好地理解 transform 属性，请查看这个演示。

　　默认值：none

　　继承性：no

　　版本：CSS3

　　JavaScript 语法：object.style.transform="rotate(7deg)"

　　语法
　　transform: none|transform-functions;

　　值                  描述

　　none    定义不进行转换。
　　matrix(n,n,n,n,n,n)    定义 2D 转换，使用六个值的矩阵。
　　matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)    定义 3D 转换，使用 16 个值的 4x4 矩阵。
　　translate(x,y)    定义 2D 转换。
　　translate3d(x,y,z)    定义 3D 转换。
　　translateX(x)    定义转换，只是用 X 轴的值。
　　translateY(y)    定义转换，只是用 Y 轴的值。
　　translateZ(z)    定义 3D 转换，只是用 Z 轴的值。
　　scale(x,y)    定义 2D 缩放转换。
　　scale3d(x,y,z)    定义 3D 缩放转换。
　　scaleX(x)    通过设置 X 轴的值来定义缩放转换。
　　scaleY(y)    通过设置 Y 轴的值来定义缩放转换。
　　scaleZ(z)    通过设置 Z 轴的值来定义 3D 缩放转换。
　　rotate(angle)    定义 2D 旋转，在参数中规定角度。
　　rotate3d(x,y,z,angle)    定义 3D 旋转。
　　rotateX(angle)    定义沿着 X 轴的 3D 旋转。
　　rotateY(angle)    定义沿着 Y 轴的 3D 旋转。
　　rotateZ(angle)    定义沿着 Z 轴的 3D 旋转。
　　skew(x-angle,y-angle)    定义沿着 X 和 Y 轴的 2D 倾斜转换。
　　skewX(angle)    定义沿着 X 轴的 2D 倾斜转换。
　　skewY(angle)    定义沿着 Y 轴的 2D 倾斜转换。
　　perspective(n)    为 3D 转换元素定义透视视图。