帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:FUNC  缓动函数  动画  Easing  函数  functions  SMO  
Easing functions for smooth animation.

  • 源代碼名稱:d3-ease
  • 源代碼網址:http://www.github.com/d3/d3-ease
  • d3-ease源代碼文檔
  • d3-ease源代碼下載
  • Git URL:
    git://www.github.com/d3/d3-ease.git
  • Git Clone代碼到本地:
    git clone http://www.github.com/d3/d3-ease
  • Subversion代碼到本地:
    $ svn co --depth empty http://www.github.com/d3/d3-ease
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • d3-ease

    鬆弛是一種扭曲時間以控制動畫中的視運動的方法。 它最常用於慢,慢出。 通過緩和時間,動畫的過渡速度更平滑,並且顯示出更合理的動作。

    標準時間和緩解時間通常在 [0,1] 範圍內,其中 0代表動畫的開始,1代表動畫的開始,一些緩動類型,如彈性,在這個範圍之外可能會返回。 如果 t t t = easing easing easing easing easing easing easing easing easing easing 。 查看輕鬆瀏覽器以獲得可視化演示。

    這些簡化類型主要基於 Robert的工作。

    安裝

    如果你使用 NPM,npm install d3-ease 。 否則,下載最新版本的。 你也可以直接從 d3js.org 載入,或者作為一個獨立庫,或者作為D3 4.0的一部分。 支持 AMD,CommonJS和香草環境。 在vanilla中,導出了一個 d3 全局:

    <scriptsrc="https://d3js.org/d3-ease.v1.min.js"></script>
    <script>var ease =d3.easeCubic;</script>

    在瀏覽器中嘗試 d3-ease 。

    API參考

    # 輕鬆( t )

    0表示動畫的開始,1表示結束。 如果 t t t = 0 and 1 implementation implementation implementation implementation implementation implementation 。 查看輕鬆瀏覽器以獲得可視化演示。 例如要應用三次鬆弛:

    var te =d3.easeCubic(t);

    同樣地,要應用定製的彈性鬆弛:

    // Before the animation starts, create your easing function.var customElastic =d3.easeElastic.period(0.4);// During the animation, apply the easing function.var te =customElastic(t);

    # d3.easeLinear(t) <>

    線性緩動;標識函數;線性 ( ) 返回t 。

    linear

    # d3.easePolyIn(t) <>

    多項式緩動;將 t raises raises指定的指數 。 如果未指定指數,則默認為 3,相當於 cubicIn

    polyIn

    # d3.easePolyOut(t) <>

    反向多項式緩動;相當於 1 - polyIn ( 1 - ) 。 如果未指定指數,則默認為 3,相當於 cubicOut 。

    polyOut

    # d3.easePoly(t) <>
    # d3.easePolyInOut(t) <>

    對稱多項式緩動;縮放 polyIn t [0, 0.5 ]/polyOut中的 t t t [0.5, 1 ] 。 如果未指定指數,則默認為 3,相當於立方。

    polyInOut

    # poly.exponent(e) <>

    返回一個帶有指定指數 e的新多項式緩動。 例如要創建等效的線性四元和立方,請執行下列操作:

    var linear =d3.easePoly.exponent(1),
     quad =d3.easePoly.exponent(2),
     cubic =d3.easePoly.exponent(3);

    # d3.easeQuadIn(t) <>

    二次緩動;相當於 polyIn指數 ( 2 ) 。

    quadIn

    # d3.easeQuadOut(t) <>

    反向二次緩動;相當於 1 - quadIn ( 1 - ) 。 也相當於 polyOut指數 ( 2 ) 。

    quadOut

    # d3.easeQuad(t) <>
    # d3.easeQuadInOut(t) <>

    對稱二次緩動;縮放 quadIn[0, 0.5 ] 和 quadOut中的t t t [0.5, 1 ] 。 也相當於 poly指數 ( 2 ) 。

    quadInOut

    # d3.easeCubicIn(t) <>

    三次緩動;相當於 polyIn指數 ( 3 ) 。

    cubicIn

    # d3.easeCubicOut(t) <>

    反向三次緩動;相當於 1 - cubicIn ( 1 - ) 。 也相當於 polyOut指數 ( 3 ) 。

    cubicOut

    # d3.easeCubic(t) <>
    # d3.easeCubicInOut(t) <>

    對稱立方緩動;縮放 cubicIn,在 [0, 0.5 ] 和 cubicOut中為 t,在 [0.5, 1 ] 中為t 也相當於 poly指數 ( 3 ) 。

    cubicInOut

    # d3.easeSinIn(t) <>

    正弦緩動;返回 sin ( ) 。

    sinIn

    # d3.easeSinOut(t) <>

    反向正弦緩動;相當於 1 - sinIn ( 1 - ) 。

    sinOut

    # d3.easeSin(t) <>
    # d3.easeSinInOut(t) <>

    對稱正弦緩動;縮放 sinIn,在 [0, 0.5 ] 和 sinOut中為 ,在 [0.5, 1 ] 中為

    sinInOut

    # d3.easeExpIn(t) <>

    指數緩動;將 2升高到指數 10 * ( - 1 ) 。

    expIn

    # d3.easeExpOut(t) <>

    反向指數緩動;相當於 1 - expIn ( 1 - ) 。

    expOut

    # d3.easeExp(t) <>
    # d3.easeExpInOut(t) <>

    對稱指數緩動;在 [0, 0.5 ] 和 expOut中,為 t scales scales scales scales scales scales scales 。

    expInOut

    # d3.easeCircleIn(t) <>

    圓形緩動。

    circleIn

    # d3.easeCircleOut(t) <>

    反向循環緩動;相當於 1 - circleIn ( 1 - ) 。

    circleOut

    # d3.easeCircle(t) <>
    # d3.easeCircleInOut(t) <>

    對稱循環緩動。縮放 circleIn scales t [0, 0.5 ] 和circleOut 中的scales t t t [0.5, 1 ] 。

    circleInOut

    # d3.easeElasticIn(t) <>

    彈性鬆弛,如橡皮筋。 振蕩振幅和周期可以配置;如果未指定,則默認為 1和 0.3 。

    elasticIn

    # d3.easeElastic(t) <>
    # d3.easeElasticOut(t) <>

    反向彈性緩動;相當於 1 - elasticIn ( 1 - ) 。

    elasticOut

    # d3.easeElasticInOut(t) <>

    對稱彈性緩動;縮放 elasticIn,在 [0, 0.5 ] 和 elasticOut為 t t [0.5, 1 ] 。

    elasticInOut

    # elastic.amplitude(a) <>

    返回一個具有指定振幅的新的彈性鬆弛。

    # elastic.period(p) <>

    使用指定周期 p 返回新彈性輕鬆。

    # d3.easeBackIn(t) <>

    ,像一個舞者在跳下落地前屈膝。 overshoot的級別可以配置;沒有指定,默認值為 1.701 58.

    backIn

    # d3.easeBackOut(t) <>

    反向預測緩動;相當於 1 - 返回

    backOut

    # d3.easeBack(t) <>
    # d3.easeBackInOut(t) <>

    在 [0.5, 1 ] Symmetric Symmetric Symmetric Symmetric scales scales scales scales scales scales scales Symmetric Symmetric Symmetric Symmetric 。

    backInOut

    # back.overshoot(s) <>

    返回一個新的back easing指定的overshoot 。

    # d3.easeBounceIn(t) <>

    Bounce,像橡皮球。

    bounceIn

    # d3.easeBounce(t) <>
    # d3.easeBounceOut(t) <>

    反向反彈緩動;相當於 1 - bounceIn ( 1 - ) 。

    bounceOut

    # d3.easeBounceInOut(t) <>

    對稱反彈緩動;縮放 bounceIn,在 [0, 0.5 ] 和 bounceOut為 ,在 [0.5, 1 ] in 。

    bounceInOut



    文章标签:FUNC  函数  动画  functions  SMO  Easing  缓动函数  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语