动画整理（jquery+css3+canvas+angularjs+js ）

Web动画整理总结

jQuery:

Animate:

用法一：

jQueryObject.animate( cssProperties [, duration ] [, easing ] [, complete ] )

用法二：

jQueryObject.animate( cssProperties, options )

<script>

    $(document).ready(function(){

        var i=0;

        setTimeout(function(){

            i++;

            if(i<4){

                $("#move").animate({

                    top:'100px'

                },300).animate({

                    top:0

                },200,function(){

                    console.log("完成"+i);

                });

            }

            setInterval(arguments.callee,300);

        },1000);

    });

</script>

 

 

通过queue队列方法：

<script>

    $(document).ready(function(){

        function queue(){

            var ele=$("#move");

            ele.fadeOut(400);

            ele.slideDown(1000);

            ele.css('top','200px');

        };

        queue();

 

        var n=$("#move").queue();

        alert(n.length);

    });

</script>

 

CSS3:

变换：transform

 

matrix(<number>,<number>,<number>,<number>,<number>,<number>)： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵 

translate(<length>[, <length>])： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 

translateX(<length>)： 指定对象X轴（水平方向）的平移 

translateY(<length>)： 指定对象Y轴（垂直方向）的平移 

rotate(<angle>)： 指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义 

scale(<number>[, <number>])： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值 

scaleX(<number>)： 指定对象X轴的（水平方向）缩放 

scaleY(<number>)： 指定对象Y轴的（垂直方向）缩放 

skew(<angle> [, <angle>])： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 

skewX(<angle>)： 指定对象X轴的（水平方向）扭曲 

skewY(<angle>)： 指定对象Y轴的（垂直方向）扭曲 

 

#move:active{

            transform:rotate(180deg) scale(-1,2) skew(30deg) translate(400px);

            -webkit-transform:rotate(180deg) scale(-1,2) skew(30deg) translate(400px);

            -moz-transform:rotate(180deg) scale(-1,2) skew(30deg) translate(400px);

            -o-transform:rotate(180deg) scale(-1,2) skew(30deg) translate(400px);

            -ms-transform:rotate(180deg) scale(-1,2) skew(30deg) translate(400px);

            cursor: pointer;

        }

过渡：transition

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

取值：

[ transition-property ]： 检索或设置对象中的参与过渡的属性 

[ transition-duration ]： 检索或设置对象过渡的持续时间 

[ transition-timing-function ]： 检索或设置对象中过渡的动画类型 

[ transition-delay ]： 检索或设置对象延迟过渡的时间 

 

transition:all 0.3s ease-out;

-webkit-transition:all 0.3s ease-out;

-o-transition:all 0.3s ease-out;

-moz-transition:all 0.3s ease-out;

-ms-transition:all 0.3s ease-out;

@keyframes:

 

        @keyframes myfirst

        {

            0%   {background: red; left:0px; top:0px;}

            25%  {background: yellow; left:200px; top:0px;}

            50%  {background: blue; left:200px; top:200px;}

            75%  {background: green; left:0px; top:200px;}

            100% {background: red; left:0px; top:0px;}

        }

 

        @-moz-keyframes myfirst /* Firefox */

        {

            0%   {background: red; left:0px; top:0px;}

            25%  {background: yellow; left:200px; top:0px;}

            50%  {background: blue; left:200px; top:200px;}

            75%  {background: green; left:0px; top:200px;}

            100% {background: red; left:0px; top:0px;}

        }

 

        @-webkit-keyframes myfirst /* Safari 和 Chrome */

        {

            0%   {background: red; left:0px; top:0px;}

            25%  {background: yellow; left:200px; top:0px;}

            50%  {background: blue; left:200px; top:200px;}

            75%  {background: green; left:0px; top:200px;}

            100% {background: red; left:0px; top:0px;}

        }

 

        @-o-keyframes myfirst /* Opera */

        {

            0%   {background: red; left:0px; top:0px;}

            25%  {background: yellow; left:200px; top:0px;}

            50%  {background: blue; left:200px; top:200px;}

            75%  {background: green; left:0px; top:200px;}

            100% {background: red; left:0px; top:0px;}

        }

 

 

 

 

Js:

 

 

 

HTML5 Canvas：

 

 

 

Angularjs:

 

（未完。。。。。。）