澳门威利斯人_威利斯人娱乐「手机版」

来自 澳门威利斯人 2019-07-07 17:39 的文章
当前位置: 澳门威利斯人 > 澳门威利斯人 > 正文

通过javascript操作CSS3属性实现动画,45种缓动效果

CSS3提供三种方法来贯彻动画,transition与animation。animation涉及自定义一种为“@keyframes”的东西,那么些须要采取到insertRule太复杂了,由此本文跳过它。有人它为transform也算一种,但它是静态的,须要整合transition工夫成为动态,由此也跳过。

css3中变形与动画(二),css3变形动画

css3制作动画的几脾性子:变形(transform),过渡(transition)和卡通片(animation)。

transform介绍过了。接下来介绍过渡transition。

transition首要就是以下多少个属性,后边随着的是它们的早先值

一、例子

先经过一个事例感性认知一下transition的卡通片效果。

鼠标放上去,div宽度从100px增大到200px。

<style type="text/css">
    div{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    div:hover{
        width: 200px;
    }
</style>
<div></div>

那意义实在也算是动画,然则丰裕变化非常快,不平易。

万一想让鼠标放上去后div宽度在5s内平滑过渡到200px。只需求加一行代码;

div:hover{
    width: 200px;
    transition:width 5s ease-in;
}

此间运用的正是transition属性,它就是用来促成属性值平滑对接,视觉上发出动画效果。

上边用的transition是缩写,富含八个属性:transition-property,transition-duration,transition-timing-function,transition-delay,下边会相继介绍。 

参数 类型 说明
el element 必需,为页面元素
begin number 必需,开始的位置
change number 必需,要移动的距离
duration number 可选,缓动效果持续时间,默认是500ms。建议取300~1000ms。
field string 必需,要发生变化的样式属性。请在top,left,bottom,right,width与height中选择。
ftp number 可选,每秒进行多少帧动画,默认50帧,保证流畅播放。一些参考资料,日本动画1秒36帧,中国卡通24帧,赛车游戏60帧。
ease function 必需,缓动公式,参数为0~1之间的数。可参考我下面给出的45条公式。
onStart function 可选,在开始时执行。
onEnd function 可选,在结束时执行。
  • transition-property: all;
  • transition-duration: 0s;
  • transition-timing-function: ease;
  • transition-delay: 0s;

二、transition

css3新添transition属性,可以在事件触发成分的样式变化时,让效果更为细致平滑。

transition用来描述如何让css属性值在一段时间内平滑的从一个值过渡到另二个值。这种连接效果能够在鼠标点击获得大旨被点击对成分任何改造中触发。

语法:

transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* 

transition有七个属性值:

transition-property:实施过渡的属性。

transition-duration:钦赐达成过渡要求的时间。

transition-timing-function,在后续时间段,过渡转换的速率变化,轻松了然正是钦定过渡函数。

transition-delay:过渡延迟时间。

prototype流派的缓动公式,只需一个参数(增至45种)

transition-property的值可认为none,all,或钦赐上的属性名

1、transition-property

transition-property用来钦定哪个属性使用过渡动画效果。

语法:

transition-property : none | all | [ <IDENT> ] [ ',' <IDENT> ]*

none:全体属性都不利用接入效果。

all:默许值。当班值日为all时,成分产生别的属性值变化时都将推行transition效果。

ident:成分属性名。通过ident钦点具体怎么属性。假诺钦赐的多少个脾性中有有个别属性不可能运用接入效果,其余属性依然一蹴而就的。

连接性质只有全数贰个中式点心值的习性(供给发出动画的习性)才干享有过渡效果。在w3c中列出了具有可以达成transition效果的css属性值以及值的品类,点这里查看。

图片 1Property Name Type background-color as color background-position as repeatable list of simple list of length, percentage, or calc border-bottom-color as color border-bottom-width as length border-left-color as color border-left-width as length border-right-color as color border-right-width as length border-spacing as simple list of length border-top-color as color border-top-width as length bottom as length, percentage, or calc clip as rectangle color as color font-size as length font-weight as font weight height as length, percentage, or calc left as length, percentage, or calc letter-spacing as length line-height as either number or length margin-bottom as length margin-left as length margin-right as length margin-top as length max-height as length, percentage, or calc max-width as length, percentage, or calc min-height as length, percentage, or calc min-width as length, percentage, or calc opacity as number outline-color as color outline-width as length padding-bottom as length padding-left as length padding-right as length padding-top as length right as length, percentage, or calc text-indent as length, percentage, or calc text-shadow as shadow list top as length, percentage, or calc vertical-align as length visibility as visibility width as length, percentage, or calc word-spacing as length z-index as integer View Code

Note:并不是怎么样性质改换都会触发transiton动画效果,比如页面包车型客车自适应宽度,当浏览器更改宽度时,并不会触发transition的成效。但上述表格所示的本性类型改变都会接触叁个transition动效。

比喻:能够同期给多少个天性设置动画效果,譬喻给height和line-height同期设置动画效果,达成div变高文字依然垂直居中。

图片 2<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>变形与动画</title> <style type="text/css"> div { width: 300px; height: 200px; line-height: 200px; text-align: center; background-color: orange; margin: 20px auto; -webkit-transition-property: height line-height; transition-property: height line-height; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-delay: .2s; transition-delay: .2s; } div:hover { height: 100px; line-height: 100px; } </style> </head> <body> <div>文字垂直居中</div> </body> </html> View Code

图片 3

 

近些日子可进行补间的CSS属性(比MDC上的少,去掉大多个体属性与相比稀缺的质量)

2、transition-duration

transition-duration用来安装从旧属性过渡到新属性须求的时刻,即持续时间。

 <!doctype html>

属性名

3、transition-timing-function

语法:

<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

transition-timing-function属性指的是过渡的“缓动函数”。通过这么些函数会建设构造一条加快度曲线,因而在全体transition变化历程中,变化速度能够穿梭变动。重要包蕴以下两种函数。

  • ease:暗中认可值,成分样式从上马状态过渡到终止意况速度由快到慢,渐渐变慢。
  • linear:意思是线性过渡,即过渡进度恒速。
  • ease-in:速度更快,显示加速状态,平常可以称作“渐显成效”。
  • ease-out:速度越来越慢,展现减速状态,日常可以称作“渐隐效果”。
  • ease-in-out速度先加快后减速,称为“渐显渐隐效果”。

举例:鼠标经过问号,补助音信渐显渐隐。

图片 4<!doctype html> <html> <head> <meta charset="utf-8"> <title>transition-demo by starof</title> <style> #help{ width:20px; height:20px; border-radius:10px; color:#fff; background:#000; text-align:center; position:relative; margin:50px 20px; cursor:pointer; } #help .tips{ position:absolute; width:300px; height:100px; background:#000; top:-30px; left:35px; border-radius:10px; opacity:0; /*渐隐效果*/ transition: opacity .8s ease-in-out; -moz-transition: opacity .8s ease-in-out; -webkit-transition: opacity .8s ease-in-out; } .tips:before{ content:""; border-width:10px; border-style:solid; border-color:transparent #000 transparent transparent; position:absolute; left:-20px; top:30px; } #help:hover .tips{ opacity:0.5; /*渐显功用*/ transition: opacity .8s ease-in-out; -moz-transition: opacity .8s ease-in-out; -webkit-transition: opacity .8s ease-in-out; } </style> </head> <body> <div id="help"> ? <div class="tips">协理音讯</div> </div> </body> </html> View Code

图片 5

 

<html dir="ltr" lang="zh-CN">

类型

4、transition-delay

transition-delay设置退换属性值后多久开头实践动画。

    <head>

属性名

5、属性简写

在改变五个css属性的transition效果时,把多少个transition注解用逗号隔断,然后每种属性就都有分其余连结时间和遵循。

Note:第贰个时刻是时间长度,第一个是延时。

a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

        <meta charset="utf-8"/>

类型

三、贝塞尔曲线和transition 

transition的数学模型就是贝塞尔曲线,上边介绍。

曲线其实便是两点时期插值的法力,贝塞尔曲线是一种插值算法,比线性插值复杂一点。

贝塞尔曲线:开头点,终止点(也称锚点),调控点。通过调度调整点,贝塞尔曲线的形象发生变化。

k阶贝塞尔插值算法需求k 1个调整点。

一阶贝塞尔曲线(线段):意思就是从P0到P1的接连点,用来说述一段线段。三回贝塞尔插值就是线性插值。

图片 6

图片 7 

 二阶贝塞尔曲线(抛物线):P0-P1是曲线在P0处的切线。

图片 8

图片 9

 三阶贝塞尔曲线:

图片 10

图片 11

transition用到的便是三阶贝塞尔插值算法,如下图。

光阴在0,1间隔,待转变属性也以为是0,1区间。P0和P3的坐标平昔是(0,0)和(1,1)。transition-timing-function属性用来明确P1和P2的坐标。

图片 12

ease [0, 0] [0.25, 0.1] [0.25, 1.0] [1.0,1.0]

linear [0, 0] [0.0, 0.0] [1.0, 1.0] [1.0,1.0]

ease-in [0, 0] [0.42, 0] [1.0, 1.0] [1.0,1.0]

ease-out [0, 0] [0, 0] [0.58, 1.0] [1.0,1.0]

ease-in-out [0, 0] [0.42, 0] [0.58, 1.0] [1.0,1.0]

step-start steps(1,start)

step-end steps(1,end)

cubic-bezier(x1,y1,x2,y2) [0, 0] [x1, y1] [x2, y2] [1.0,1.0]

四、别的相关资料

canvas画贝塞尔曲线:查看来源

图片 13<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>bezier demo</title> </head> <body> <div style="width:800px;height:600px;background-color:#fac0c0;"> <canvas id="cvs" width="800" height="600">骚瑞,您的浏览器不补助canvas</canvas> </div> <script type="text/javascript"> var cvs=document.getElementById("cvs"), context=cvs.getContext("2d"), points=[]; function getXY(node){ var x=0, y=0; if (node.offsetParent) { while (node.offsetParent) { x = node.offsetLeft; y = node.offsetTop; node = node.offsetParent; } } else { node.x && (x = node.x); node.y && (y = node.y); } return [x,y]; } function drawPoint(x,y,c,b) { !b && (b=2); context.fillStyle=c || "red"; context.fillRect(x,y,b,b); } function bezier(points,t){ var i, n=points.length-1, x=0, y=0; function fn(p,n,i,t){ return arrangement(n,i)*p*Math.pow(1-t,n-i)*Math.pow(t,i); } for(i=0;i<n 1;i ){ x =fn(points[i][0],n,i,t); y =fn(points[i][1],n,i,t); } return [x,y]; } function factorial(n){ if(isNaN(n) || n<=0 || Math.floor(n)!==n){ return 1; } var s=1; while(n){ s*=n--; } return s; } function arrangement(n,r){ return factorial(n)/(factorial(r)*factorial(n-r)); } cvs.addEventListener("click",function(event){ var i, point=getXY(this), x=event.clientX-point[0] (document.documentElement.scrollLeft || document.body.scrollLeft), y=event.clientY-point[1] (document.documentElement.scrollTop || document.body.scrollTop); points.push([x,y]); context.clearRect(0,0,screen.width,screen.height); context.beginPath(); //points for(i=0;i<points.length;i ){ drawPoint(points[i][0],points[i][1],"blue",4); } //bezier for (i = 0; i < 1; i = 0.001) { drawPoint.apply(this, bezier(points,i)); } //line if(points.length==1){ context.moveTo(points[0][0],points[0][1]); }else if (points.length>1){ for(i=0;i<points.length;i ){ context.lineTo(points[i][0],points[i][1]); } context.lineWidth=0.2; context.stroke(); context.closePath(); } },true); </script> </body> </html> View Code

图片 14 

开拓中可选取下边工具:

缓动函数速查表

图形工具

参考:

cubic-bezier curve.

transition-timing-function

timing-function

上边那篇小说未有规律,但能够让大家从设计员的角度去领会贝塞尔曲线。 

干货!设计员必须精晓的贝塞尔曲线的私人民居房

 

正文小编starof,因知识本人在改变,小编也在持续学习成才,文章内容也不安时更新,为制止误导读者,方便追根溯源,请各位转发证明出处:

css3制作动画的多少个本性:变形(transform),过渡(transition)和卡通(animation)。 transform介绍过了。接下来介...

        <meta http-equiv="X-UA-Compatible" content="IE=8">

background-color

        <style type="text/css">

color

            .taxiway{

background-image

                width:800px;

gradients only; not implemented in Firefox

                height:100px;

background-position

                background:#E8E8FF;

percentage | length

            }

background-size

            .move{

percentage | length

                width:100px;

border-color (including sub-properties)

                height:100px;

color

                background:#a9ea00;

border-radius (including sub-properties)

            }

percentage | length

            #panel {

border-width (including sub-properties)

                float:left;

length

                width:810px

border-spacing

            }

length

            #panel div{

bottom

                float:left;

percentage | length

                width:88px;

box-shadow

                border:1px solid #333;

shadow

                height:20px;

color

                font-size:11px;

color

            }

clip

            div.transition {

rectangle

                margin-top: 30px;

font-size

                width: 200px;

percentage | length

                height: 200px;

font-weight

                position: relative;

number | keywords (excluding bolder, lighter)

                margin-bottom:10px;

height

            }

percentage | length

            div.transition div {

left

                position: absolute;

percentage |  length

                height: 1px;

letter-spacing

                width: 1px;

length

                background: #000;

line-height

            }

number |  percentage | length

            div.transition span {

margin (including sub-properties)

                display: block;

length

                position: absolute;

max-height

                border-bottom: 1px solid #dadada;

percentage |  length

                font-size: 10px;

max-width

                color: #888;

percentage | length

                width: 200px;

min-height

                left: 0px;

percentage | length

            }

min-width

            div.transition div#indicator {

percentage |  length

                position:absolute;

opacity

                background-color:#a9ea00;

number

                height: 200px;

padding (including sub-properties)

                top: 0px;

length

                left: 0px;

right

            }

percentage | length

            div.transition div#marker {

text-indent

                background-color: #f00;

percentage | length

                height: 6px;

text-shadow

                width: 6px;

shadow

                border-radius: 3px;

top

                -webkit-border-radius: 3px;

percentage |  length

                -moz-border-radius: 3px;

-moz-transform-origin

                left: 0px;

percentage |  length, keywords

                margin-bottom: -3px;

-moz-transform

                margin-left: -3px;

transform-function

            }

vertical-align

            div.transition div#label {

percentage | length, keywords

                background: transparent;

width

                color: #ABD474;

percentage | length

                font-size: 20px;

word-spacing

                height: 20px;

percentage |  length

                width: 200px;

z-index

                text-align: center;

integer

                top: 80px;

transition-duration,动画的持续时间,其值为三个带单位的数值,单位可认为s与ms

                left: 0px;

transition-delay:动画延迟多短期开首.

                z-index: -1;

transition-timing-function:缓动公式,值为ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )

            }

ease
This keyword sets the easing function to cubic-bezier(0.25, 0.1, 0.25, 1.0).

        </style>

linear
This keyword sets the easing function to cubic-bezier(0.0, 0.0, 1.0, 1.0).

        <script type="text/javascript">

ease-in
This keyword sets the easing function to cubic-bezier(0.42, 0.0, 1.0, 1.0).

            var getCoords = function(el){

ease-out
This keyword sets the easing function to cubic-bezier(0.0, 0.0, 0.58, 1.0).

                var box = el.getBoundingClientRect(),

ease-in-out
This keyword sets the easing function to cubic-bezier(0.42, 0.0, 0.58, 1.0).

                doc = el.ownerDocument,

cubic-bezier
Specifies a cubic bezier curve to use as the easing function. The four number values specify the P1 and P2 points of the curve as (x1, y1, x2, y2). All values must be in the range [0.0, 1.0] inclusive.

                body = doc.body,

那是多少个暗许timing-function的自己要作为轨范遵守规则:

                html = doc.documentElement,

default »

                clientTop = html.clientTop || body.clientTop || 0,

linear »

                clientLeft = html.clientLeft || body.clientLeft || 0,

ease-in »

                top  = box.top   (self.pageYOffset || html.scrollTop  ||  body.scrollTop ) - clientTop,

ease-out »

                left = box.left (self.pageXOffset || html.scrollLeft ||  body.scrollLeft) - clientLeft

ease-in-out »

                return { 'top': top, 'left': left };

cubic-bezier »

            };

但在JS操作它们时大家中间只要求transition就行了,由于那是浏览器商首先搞出来,因而都带着它们的前缀,如-ms-,-moz-等等,大家须要把它们改成驼峰风格工夫调用,见下边包车型地铁例证。

            var getStyle = function(el, style){

亲自去做1,通过JS来操作这么些CSS3属性落成动画效果:

                if(! "v1"){

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>dom Framework</title> <script> var dom = function(s){ return document.getElementById(s) } dom.cssName = function (name){ var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'], rcap = /-([a-z])/g,capfn = function($0,$1){ return $1.toUpperCase(); }; dom.cssName = function(name, target, test){ target = target || document.documentElement.style; for (var i=0, l=prefixes.length; i < l; i ) { test = (prefixes[i] name).replace(rcap,capfn); if(test in target){ return test; } } return null; } return dom.cssName(name); } window.onload = function(){ var el = dom("test"), css3transition = dom.cssName("transition"); el.style[css3transition] = "all 5s ease-in" dom("start").onclick = function(){ el.style.width = "400px"; } } </script> <style> #test{ background: red; width:10px; height:30px; } </style> </head> <body> <h3>CSS3 动画 by 司徒正美</h3> <div id="test"> TEXT </div> <button id="start" type="button">开首测量检验</button> </body> </html>

                    style = style.replace(/-(w)/g, function(all, letter){

运作代码

                        return letter.toUpperCase();

示例2,同一时间操作三天性格的渐变,大家需求用“,”隔绝。

                    });

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>dom Framework</title> <script> var dom = function(s){ return document.getElementById(s) } dom.cssName = function (name){ var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'], rcap = /-([a-z])/g,capfn = function($0,$1){ return $1.toUpperCase(); }; dom.cssName = function(name, target, test){ target = target || document.documentElement.style; for (var i=0, l=prefixes.length; i < l; i ) { test = (prefixes[i] name).replace(rcap,capfn); if(test in target){ return test; } } return null; } return dom.cssName(name); } window.onload = function(){ var el = dom("test"), css3transition = dom.cssName("transition"); el.style[css3transition] = "width 5s ease-in,height 4s linear" dom("start").onclick = function(){ el.style.width = "400px"; el.style.height = "200px" } } </script> <style> #test{ top:1px; background: red; width:10px; height:30px; } </style> </head> <body> <h1>处理几天性情的渐变 by 司徒正美</h1> <div id="test"> TEXT </div> <button id="start" type="button">开端测量试验</button> </body> </html>

                    var value = el.currentStyle[style];

运维代码

                    (value == "auto")&&(value = "0px" );

新锐浏览器也为此加多了三个平地风波,当渐变动画停止时,让我们清除渐变属性。但是,这些事件名,特别难堪,webkit系是webkitTransitionEnd,opera是oTransition,FF竟然是transitionend!它们与CSS属性那多少个大写开始的驼峰风格是区别等的(如WebkitTransition,OTransition,MozTransition)

                    return value;

              var transitionEnd = (navigator.vendor && "webkitTransitionEnd") || ( window.opera && "oTransitionEnd") || "transitionend";               el.addEventListener(transitionEnd,function(){//IE10 pp3将会支持transition与transform                          //http://blogs.msdn.com/b/ie/archive/2011/04/12/native-html5-first-ie10-platform-preview-available-for-download.aspx                   this.style.removeProperty(css3transition.replace( rupper, "-$1" ).toLowerCase());//css3transition即WebkitTransition等              },true)  

                }else{

支撑情形:

                    return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)

  • firefox 4.0
  • chrome 4.0
  • safari 3.1
  • opera 10.5

                }

连带链接

            }

            var tween = {

                easeInQuad: function(pos){

                    return Math.pow(pos, 2);


                },

                easeOutQuad: function(pos){

                    return -(Math.pow((pos-1), 2) -1);

                },

                easeInOutQuad: function(pos){

                    if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,2);

                    return -0.5 * ((pos-=2)*pos - 2);

                },

                easeInCubic: function(pos){

                    return Math.pow(pos, 3);

                },

                easeOutCubic: function(pos){

                    return (Math.pow((pos-1), 3) 1);

                },

                easeInOutCubic: function(pos){

                    if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);

                    return 0.5 * (Math.pow((pos-2),3) 2);

                },

                easeInQuart: function(pos){

                    return Math.pow(pos, 4);

                },

                easeOutQuart: function(pos){

                    return -(Math.pow((pos-1), 4) -1)

                },

                easeInOutQuart: function(pos){

                    if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4);

                    return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2);

                },

                easeInQuint: function(pos){

                    return Math.pow(pos, 5);

                },

本文由澳门威利斯人发布于澳门威利斯人,转载请注明出处:通过javascript操作CSS3属性实现动画,45种缓动效果

关键词: 澳门威利斯人 JavaScript 缓动效果