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

原创 2015年07月10日 11:39:09

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:

 



(未完。。。。。。)

 

相关文章推荐

angular 使用html5 canvas绘制圆组建

1、定义数据接口 export interface KtCircleCanvas{ x?: number; y?: number; radius?: number; ...

AngularJS遇到的第一个坑

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。无需进行手工DOM操作,兼容主流浏览器,与 jQuery 配合良好。 并不是所有的应用...
  • zxc123e
  • zxc123e
  • 2016年01月15日 17:15
  • 6713

HTML5 Canvans(3) 调整Canvas画布大小和擦除

//得到2D渲染上下文 var cancans = document.getElementById("myCanvas"); var width = cancans.getAttribute("wi...
  • my98800
  • my98800
  • 2017年03月29日 08:02
  • 490

CSS3和Canvas动画

demo演示github源码地址CSS3动画基本知识准备animation属性结合自定义动画@keyframes的使用,改变元素的相应属性制作动画效果。animation属性: animation-n...
  • mzzzzq
  • mzzzzq
  • 2016年09月17日 16:19
  • 1973

HTML5 实现小车动画效果(Canvas/CSS3/JQuery)

HTML5正在变得越来越流行。在这个移动设备日益增长的时代,对来自Adobe的Flash插件的改造需求也正在快速增长。因为就在最近,Adobe宣布Flash将不再支持移动设备。这意味着,Adobe自身...

HTML5+CSS3-第六节(动画、视频、音频、canvas)

1、 动画  语法:第一步 @-webkit-keyframes 命名{          From{-------初始位置   } To{--------------结束位置   }...

HTML5----kinetic,CSS3(Canvas)--小丑动画

显示效果图: hover后效果图:
  • damys
  • damys
  • 2014年05月23日 11:32
  • 3556

贝塞尔曲线与CSS3动画、SVG和canvas的基情

贝塞尔曲线与CSS3动画、SVG和canvas的基情 这篇文章发布于 2013年08月30日,星期五,23:23,归类于 canvas相关, css相关, SVG相关。 阅读 95700...

CSS3: 画围棋【No Canvas & SVG,No JS】

渐变的灵活运结合其他一些CSS3的特性的运用画出的简易版围棋
  • bomess
  • bomess
  • 2016年09月26日 23:57
  • 1522

CSS3和JS炫酷3D拖拽卡片动画特效

  • 2017年07月09日 11:07
  • 486KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:动画整理(jquery+css3+canvas+angularjs+js )
举报原因:
原因补充:

(最多只允许输入30个字)