lottie.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  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. canId:{
  36. type:String,
  37. value:'0'
  38. }
  39. },
  40. ready: function ready() {
  41. this.init.bind(this);
  42. },
  43. methods: {
  44. init: function init(animationData) {
  45. var width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.properties.width;
  46. var height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.properties.height;
  47. var data = animationData || this.properties.animationData;
  48. var dataPath = this.properties.path;
  49. if (!data && !dataPath) {
  50. return;
  51. }
  52. this.destory();
  53. var that=this;
  54. var canvasContext = _index.api.createCanvasContext(`test-canvas`, that);
  55. canvasContext.canvas = {
  56. width: width,
  57. height: height
  58. };
  59. that.lottie = _index2.default.loadAnimation({
  60. renderer: 'canvas', // 只支持canvas
  61. loop: that.data.loop,
  62. autoplay: that.data.autoplay,
  63. animationData: data,
  64. rendererSettings: {
  65. context: canvasContext,
  66. clearCanvas: true
  67. }
  68. });
  69. },
  70. destory: function destory() {
  71. if (this.lottie) {
  72. this.lottie.destroy();
  73. this.lottie = null;
  74. }
  75. }
  76. },
  77. detached: function detached() {
  78. this.destory.bind(this);
  79. }
  80. });