createAnimation.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. "use strict";
  2. const common_vendor = require("../../../../common/vendor.js");
  3. class MPAnimation {
  4. constructor(options, _this) {
  5. this.options = options;
  6. this.animation = common_vendor.index.createAnimation({
  7. ...options
  8. });
  9. this.currentStepAnimates = {};
  10. this.next = 0;
  11. this.$ = _this;
  12. }
  13. _nvuePushAnimates(type, args) {
  14. let aniObj = this.currentStepAnimates[this.next];
  15. let styles = {};
  16. if (!aniObj) {
  17. styles = {
  18. styles: {},
  19. config: {}
  20. };
  21. } else {
  22. styles = aniObj;
  23. }
  24. if (animateTypes1.includes(type)) {
  25. if (!styles.styles.transform) {
  26. styles.styles.transform = "";
  27. }
  28. let unit = "";
  29. if (type === "rotate") {
  30. unit = "deg";
  31. }
  32. styles.styles.transform += `${type}(${args + unit}) `;
  33. } else {
  34. styles.styles[type] = `${args}`;
  35. }
  36. this.currentStepAnimates[this.next] = styles;
  37. }
  38. _animateRun(styles = {}, config = {}) {
  39. let ref = this.$.$refs["ani"].ref;
  40. if (!ref)
  41. return;
  42. return new Promise((resolve, reject) => {
  43. nvueAnimation.transition(ref, {
  44. styles,
  45. ...config
  46. }, (res) => {
  47. resolve();
  48. });
  49. });
  50. }
  51. _nvueNextAnimate(animates, step = 0, fn) {
  52. let obj = animates[step];
  53. if (obj) {
  54. let {
  55. styles,
  56. config
  57. } = obj;
  58. this._animateRun(styles, config).then(() => {
  59. step += 1;
  60. this._nvueNextAnimate(animates, step, fn);
  61. });
  62. } else {
  63. this.currentStepAnimates = {};
  64. typeof fn === "function" && fn();
  65. this.isEnd = true;
  66. }
  67. }
  68. step(config = {}) {
  69. this.animation.step(config);
  70. return this;
  71. }
  72. run(fn) {
  73. this.$.animationData = this.animation.export();
  74. this.$.timer = setTimeout(() => {
  75. typeof fn === "function" && fn();
  76. }, this.$.durationTime);
  77. }
  78. }
  79. const animateTypes1 = [
  80. "matrix",
  81. "matrix3d",
  82. "rotate",
  83. "rotate3d",
  84. "rotateX",
  85. "rotateY",
  86. "rotateZ",
  87. "scale",
  88. "scale3d",
  89. "scaleX",
  90. "scaleY",
  91. "scaleZ",
  92. "skew",
  93. "skewX",
  94. "skewY",
  95. "translate",
  96. "translate3d",
  97. "translateX",
  98. "translateY",
  99. "translateZ"
  100. ];
  101. const animateTypes2 = ["opacity", "backgroundColor"];
  102. const animateTypes3 = ["width", "height", "left", "right", "top", "bottom"];
  103. animateTypes1.concat(animateTypes2, animateTypes3).forEach((type) => {
  104. MPAnimation.prototype[type] = function(...args) {
  105. this.animation[type](...args);
  106. return this;
  107. };
  108. });
  109. function createAnimation(option, _this) {
  110. if (!_this)
  111. return;
  112. clearTimeout(_this.timer);
  113. return new MPAnimation(option, _this);
  114. }
  115. exports.createAnimation = createAnimation;
  116. //# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uni-transition/components/uni-transition/createAnimation.js.map