Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

Readme.md 1.3 KiB

il y a 3 ans
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. # tween
  2. Motion tween component using [ease](https://github.com/component/ease).
  3. ## Installation
  4. $ component install component/tween
  5. ## Example
  6. ```js
  7. var Tween = require('tween');
  8. var raf = require('raf');
  9. var button = document.querySelector('button');
  10. var tween = Tween({ rotate: 0, opacity: 0 })
  11. .ease('out-bounce')
  12. .to({ rotate: 360, opacity: 1 })
  13. .duration(800);
  14. tween.update(function(o){
  15. button.style.opacity = o.opacity;
  16. button.style.webkitTransform = 'rotate(' + (o.rotate | 0) + 'deg)';
  17. });
  18. tween.on('end', function(){
  19. animate = function(){};
  20. });
  21. function animate() {
  22. raf(animate);
  23. tween.update();
  24. }
  25. animate();
  26. ```
  27. ## API
  28. ### Tween(obj:Object|Array)
  29. Initialize a new `Tween` with `obj`.
  30. ### Tween#reset()
  31. Reset the tween.
  32. ### Tween#to(obj:Object|Array)
  33. Tween to `obj` and reset internal state.
  34. tween.to({ x: 50, y: 100 })
  35. ### Tween#duration(ms:Number)
  36. Set duration to `ms` [500].
  37. ### Tween#ease(fn:String|Function)
  38. Set easing function to `fn`.
  39. tween.ease('in-out-sine')
  40. ### Tween#update(fn:Function)
  41. Set update function to `fn` or
  42. when no argument is given this performs
  43. a "step".
  44. ### Tween#stop()
  45. Immediately stop the tween and emit "stop" and end" events. `tween.stopped`
  46. is then marked as `true`.
  47. ## License
  48. MIT