动画整理(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:

 



(未完。。。。。。)

 

AngularJS遇到的第一个坑

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

angular 使用html5 canvas绘制圆组建

1、定义数据接口 export interface KtCircleCanvas{ x?: number; y?: number; radius?: number; ...
  • yaomengzhi
  • yaomengzhi
  • 2017年09月21日 11:43
  • 441

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

Web动画整理总结 jQuery: Animate: 用法一: jQueryObject.animate( cssProperties [, duration ] [, easing ] [,...
  • theowl
  • theowl
  • 2015年07月10日 11:39
  • 1030

在angularjs客户端压缩图片文件然后上传

主要是利用html5的canvas来进行图片的压缩,然后转化为dataURL,再有dataURL转化为Blob文件,Blob对象可以直接赋值给Formdata. app.servic...
  • alexwang1983
  • alexwang1983
  • 2015年07月03日 17:47
  • 7053

关于cocos2dx中动画的整理

1.瞬时动作:CCActionInstant CCPlace CCHide
  • Hapiman11
  • Hapiman11
  • 2014年11月02日 22:51
  • 1202

cocos2dx 基本动作、动画详解

便于大家做动画嘞,直接上代码了 bool HelloWorld::init() { ////////////////////////////// // 1. super init f...
  • hytfly
  • hytfly
  • 2014年04月25日 10:32
  • 7482

AngularJS实现数据可视化

我们来研究下利用AngularJS实现条形图、折线图等数据可视化效果。
  • whqet
  • whqet
  • 2015年03月05日 11:36
  • 17537

angularjs2 简单使用起始篇(一)

本篇文章基于angularjs 2.3.0 angularjs2 是不同于anjularjs ,前者是基于组件的,而后者着是基于demo的。angularjs2 比较像RN。组件化是前端的一个趋势,这...
  • u012915455
  • u012915455
  • 2016年12月14日 16:30
  • 3596

动画整理——常用的动画

常用动画,可以为View添加想使用的动画,使用到第三方资源库nineoldandroids-library-2.4.0.jar,使用UseAnimationToolString去获取动画状态,其中pl...
  • LuckChouDog
  • LuckChouDog
  • 2015年11月30日 17:45
  • 326

as 整理代码快捷键

马丹,挺好用的,就是记不住,好气Ctrl + alt + L
  • u011033906
  • u011033906
  • 2017年02月10日 22:20
  • 713
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:动画整理(jquery+css3+canvas+angularjs+js )
举报原因:
原因补充:

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