请选择 进入手机版 | 继续访问电脑版

网络科技

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

[其他] Choreographer-js

[复制链接]
心疼你伤很深 发表于 2016-10-1 09:40:11
72 0
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.
我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表