网络科技

    今日:432| 主题:245438
收藏本版
互联网、科技极客的综合动态。

[其他] Choreographer-js

[复制链接]
心疼你伤很深 发表于 2016-10-1 09:40:11
44 0

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Choreographer-js

    A simple library to take care of complex CSS animations.
          (You can also add custom functions that do non-CSS animations!)   
        See the fancy demo here -->  
      Other examples:   
          Basic Example (animating based on scroll location)   
          Basic Example (animating based on mouse X location)   
    Basic Example (multiple animations based on mouse X location)    Table of Contents + Useful Links

  
       
  • Quickstart   
  • Use Cases + Snippets   
  •       Example Code   
  • Full API Reference   
  • Contributing   
  • License  
  Quickstart

  Install and save to your    package.json:  
  1. $ npm install --save choreographer-js
复制代码
Include it in your Javascript:
  1. const Choreographer = require('choreographer-js')
复制代码
Use Cases + Snippets

  Brew up some instant scroll animations.This one would scale a box's    opacityfrom    0to    1mirroring your scroll location from the top to    1000.    Full Example >>  
  1. let choreographer = new Choreographer({
  2.   animations: [
  3.     {
  4.       range: [-1, 1000],
  5.       selector: '#box',
  6.       type: 'scale',
  7.       style: 'opacity',
  8.       from: 0,
  9.       to: 1
  10.     }
  11.   ]
  12. })
  13. window.addEventListener('scroll', () => {
  14.   choreographer.runAnimationsAt(window.pageYOffset)
  15. })
复制代码
What about animations based on mouse movement?This would make    #boxmove    300pxdown if your mouse was in the left-half of the browser window.  
  1. let choreographer = new Choreographer({
  2.   animations: [   
  3.     {
  4.       range: [-1, window.innerWidth / 2],
  5.       selector: '#box',
  6.       type: 'change',
  7.       style: 'transform:translateY',
  8.       to: 300,
  9.       unit: 'px'
  10.     }
  11.   ]
  12. })
  13. document.body.addEventListener('mousemove', (e) => {
  14.   choreographer.runAnimationsAt(e.clientX)
  15. })
复制代码
Get Started

  You can simply install the package via npm:
  1. $ npm install --save choreographer-js
复制代码
Or if you're keeping things super simple, just includethis file as a script like so:  
  1. <script src="your_path/choreographer.min.js"></script>
复制代码
Cool! Now you can create an instance of Choreographer like this, and run the animations based on whatever measurement floats your boat (ex. scroll position, mouse position, timestamp, whatever).
  1. let choreographer = new Choreographer(config)
  2. choreographer.runAnimationsAt(position)
复制代码
More often than not, you'll probably want to wrap that    runAnimationsAtfunction in another, like an event handler, for instance:  
  1. window.addEventListener('scroll', () => {
  2.   // then, use the scroll position (pageYOffset) to base the animations off of
  3.   choreographer.runAnimationsAt(window.pageYOffset)
  4. })
复制代码
The easiest way to understand how this all works is to check out the          examples    . More detailed documentation below!  
  Full API Reference

      Choreographer  

      [Class]| The home base for everything.  
    construction:
          new Choreographer(        choreographerConfig            )   
    public methods:
  
       
  •         this.updateAnimations   
  •         this.runAnimationsAt  
      choreographerConfig  

      [Object]| The object used to configure an instance of Choreographer.  
  example structure:
  1. {
  2.   customFunctions: {
  3.     [animation type]: [animationFunction]
  4.   },
  5.   animations: [ animationConfig, animationConfig, ... ]
  6. }
复制代码
related references:      animationFunction    ,      animationConfig      
      Choreographer.updateAnimations([ Array of      animationConfig        ])  

      [Function]| Replace    this.animationswith a new Array of    Animations.  
      Choreographer.runAnimationsAt([ Number ])  

      [Function]| Run the animations at a given location marker.  
      Animation  

      [Class]| The class that manages each animation's data.  
    construction:
          new Animation(        animationConfig            )   
        animationConfig  

      [Object]| The object used to configure an instance of Animation.  
  example structure:
  1. {
  2.   range: [0, 100],
  3.   selector: '.box',
  4.   type: 'scale',
  5.   fn: [animationFunction],
  6.   style: 'width',
  7.   from: 0,
  8.   to: 100,
  9.   unit: '%'
  10. }
复制代码
           range    |    [Array of Number]or    [Array of Array of Number]   
    Either a one- or two-dimensional array of ranges, i.e. [0,5] or [[0,3], [4,5]]
          NOTE: Bugs will occur if you overlap animation ranges that affect the same style properties!   
          type    |    [String]   
The name of the animation function  
        fn    |    [animationFunction]see    animationFunction](#animationfunction)  
        selector    |    [String]   
A valid DOM Element selector string, ex. '.classname' or '#box .thing[data-attr=true]'  
        selectors    |    [Array]An array of selector strings (as described above).  
  NOTE: Only one of the below (selector or selectors) is necessary. If they both exist, 'selectors' will be used.
        style    |    [String]A valid CSS style property.    NOTE: If you are using 'transform', follow it with a colon and the property name, ex. 'transform:scaleX'  
        from    |    [Number]   
The minimum value to set to the style property. Useful when progressively calculating a value.  
        to    |    [Number or String]If you want progressively calculated (scaled) values, this has to be a    number. Otherwise, if for something a 'change' animation, this can be a string - whatever the valid type for the relevant    styleproperty is.  
  related references:      animationFunction      
      animationFunction  

      [Function]| A function that takes      animationData    and does something with it.  
  There are two built-in animation functions available, called 'scale' and 'change'.
  
       
  • 'scale' maps a progressively calculated value to the node's style property based on location   
  • 'change' adds or takes away a style property value if you're in or out of range  
  Example animationFunction (this is a simplified version of how 'change' works):
  1. const Choreographer = require('choreographer-js')0
复制代码
arguments:      animationData      
      animationData  

      [Object]| This is the data passed into an    animationFunction. A lot of it is taken directly from    animationConfig.  
  Structure:
  1. const Choreographer = require('choreographer-js')1
复制代码
       Progressis what allows for progressive scaling of values (ex. smooth fading of opacity, 2d translation, etc.)    If the value is between 0 and 1, that means you are within a range (given in animationConfig).  
  Contributing

  
       
  • Fork it!   
  • Create your feature branch:      git checkout -b my-new-feature   
  • Commit your changes:      git commit -am 'Add some feature'   
  • Push to the branch:      git push origin my-new-feature   
  • Submit a pull request :D  
  Found an issue but don't know how to fix it? Submit an issue or email me.
  License

  The MIT License (MIT) Copyright (c) 2016 Christine Cha
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
友荐云推荐




上一篇:Uber在印度推出Xchange Leasing项目,为买不起车的人提供贷款
下一篇:[图]ThinkGeek推星球大战R2-D2法压壶:今年11月发货
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表