lottie.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. 'use strict';
  2. var _index = require('../index.js');
  3. var _index2 = _interopRequireDefault(_index);
  4. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  5. Component({
  6. properties: {
  7. width: {
  8. type: Number,
  9. value: 100
  10. },
  11. height: {
  12. type: Number,
  13. value: 100
  14. },
  15. path: {
  16. type: String,
  17. observer: function observer() {
  18. this.init();
  19. }
  20. },
  21. animationData: {
  22. type: Object,
  23. observer: function observer() {
  24. this.init();
  25. }
  26. },
  27. loop: {
  28. type: Boolean,
  29. value: true
  30. },
  31. autoplay: {
  32. type: Boolean,
  33. value: true
  34. }
  35. },
  36. ready: function ready() {
  37. this.init();
  38. },
  39. methods: {
  40. init: function init(animationData) {
  41. var width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.properties.width;
  42. var height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.properties.height;
  43. var data = animationData || this.properties.animationData;
  44. var dataPath = this.properties.path;
  45. if (!data && !dataPath) {
  46. return;
  47. }
  48. this.destory();
  49. var canvasContext = _index.api.createCanvasContext('lottie-canvas', this);
  50. canvasContext.canvas = {
  51. width: width,
  52. height: height
  53. };
  54. this.lottie = _index2.default.loadAnimation({
  55. renderer: 'canvas', // 只支持canvas
  56. loop: this.data.loop,
  57. autoplay: this.data.autoplay,
  58. animationData: data,
  59. path: dataPath,
  60. rendererSettings: {
  61. context: canvasContext,
  62. clearCanvas: true
  63. }
  64. });
  65. },
  66. destory: function destory() {
  67. if (this.lottie) {
  68. this.lottie.destroy();
  69. this.lottie = null;
  70. }
  71. }
  72. },
  73. detached: function detached() {
  74. this.destory();
  75. }
  76. });