ainojs-animation

KO | EN

gitlite — search

#javascript #react #ai #golang #machine-learning #docker #macos #java #awesome #vue #security #pytorch #ios #openai

ainojs-animation

(★ 8)

Animate values using requestframe

ainojs-animation 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Animation
=========

Microtool for animating multiple values using requestAnimationFrame. This does not do any parsing or modification of DOM nodes or styles, it simply animates values.

Installation:
-------------

Using npm:

npm install ainojs-animation

In the browser:

- Download a release at https://github.com/aino/ainojs-animation/releases
- Include the compiled file: ``<script src="ainojs-animation/dist/ainojs-animation.min.js"></script>``

Rich usage example:
-------------------

var animation = new Animation({
      duration: 2000 // two seconds
    })

var node = document.getElementById('foo')

animation.on('frame', function(e) {
      Animation.transform(node, e.values)
      /*
      or: 
      node.style.left = e.values.left + 'px'
      node.style.top = e.values.top + 'px'
      */
    })

animation.init({
      top: 100,
      left: 0
    })

animation.animateTo({
      top: 200,
      left: 400
    })

Chain methods:
--------------

var animation = new Animation().on('frame', function(e) {
      // do something on each fame
    }).on('complete', function(e) {
      // do something when animation is complete
    }).init({ x: 0 }).animateTo({ x: 1 })

Animation.simple():
-------------------

Use `Animation.simple()` to create a simple animation from one value to another:

Animation.simple(0, 1, {
      duration: 300,
      frame: function(val) {
        console.log(val) // 
      },
      complete: function() {
        console.log('finished')
      }
    })

React usage example using states:
---------------------------------

var App = React.createClass({

getInitialState: function() {
        return { left: 0, top: 100 }
      },

componentWillMount: function() {
        this.animation = new Animation({
          duration: 2000 // two seconds
        })
        this.animation.on('frame', this.onFrame)
        this.animation.init(this.state)
      },

onFrame: function(e) {
        this.setState(e.values)
      },

componentDidMount: function() {
        this.animation.animateTo({
          top: 200,
          left: 400
        })
      },

render: function() {
        var style = {
          width: 100,
          height: 100,
          position: 'absolute',
          left: this.state.left,
          top: this.state.top,
          background: '#000'
        }
        
        return (
          <div style={style} />
        )
      }
    })

React.renderComponent(App(), document.body)

Methods:
--------
    
    animation.init(initialValues)    // sets initial values
    animation.animateTo(values)      // starts the animation starting from current values
    animation.updateTo(newValues)    // updates the destinations while animating (within the same timeline)
    animation.moveTo()               // move the animation to new values without animation
    animation.pause()                // pauses the animation
    animation.resume()               // resumes the animation after pause
    animation.end()                  // stops and force completes the animation
    animation.setOptions(options)    // set new options at run-time
    animation.isAnimating()          // returns true/false if the animation is running
    animation.destroy()              // kill animation and clear memory
    animation.getInitialValues()     // returns a non-mutated object with the initial values set in the init() method

Static Methods:
---------------

Animation.cleanUp()                  // destroys all animations and clears memory
    Animation.simple(from, to, options)  // creates a simple animation instance
    Animation.transform(node, obj)       // sets optimized inline styles to DOM nodes. Values: top, left, scale, rotate, opacity

Animation implemenets the ainojs-events interface. Example:
  
    // callback for each frame:
    animation.on('frame', function(e) {
      console.log(e.values) // animation values
    })

// callback for animation complete:
    animation.on('complete', function() {
      // animation is complete
    })

The object passed into ``animation.init()`` will be mutated in the animation. 
You can use that to retrieve the values in another callback, F.ex:

var obj = { left: 0 }
    var animation = new Animation()
    animation.init(obj).animateTo({ left:100 })
    setTimeout(function() {
      console.log(obj)
    },100)

Events:
-------

- frame - triggers every frame. Event properties: *values*
- complete - triggers when animation is complete.

Options:
--------

- easing (function) - easing function (use ainojs-easing)
- duration (400) - duration in ms
- repeat (false) - repeats the animation in a loop
- yoyo (false) - loops the animation back & forth
- delay (0) - ms of delay before the animation starts. If it is looped, the delay will be applied on each loop.

ainojs-animation

ainojs-animation 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

ainojs-animation

ainojs-animation 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README