关闭

动画整理(jquery+css3+canvas+angularjs+js )

标签: javascriptcss3angularjs动画
804人阅读 评论(0) 收藏 举报
分类:

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

transitiontransition-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:

 



(未完。。。。。。)

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:78889次
    • 积分:1685
    • 等级:
    • 排名:千里之外
    • 原创:86篇
    • 转载:46篇
    • 译文:0篇
    • 评论:7条